/*
Theme Name:   GamesKeep Canvas
Theme URI:    https://gameskeep.com
Author:       Carterson Games
Description:  A simple, fully customizable wrapper theme. Change the background colour, font and which elements show, all from Appearance > Customize. Built to sit alongside the GamesKeep GamePix plugin (the plugin takes over the games page itself; this theme handles every other page — About, Contact, Terms, Privacy, blog posts).
Version:      1.5
Requires PHP: 7.4
Text Domain:  gameskeep-canvas
*/

/* ---- Defaults (overridden live by Customizer via inline CSS vars in wp_head) ---- */
:root{
	--gkc-bg:#0b0e1a;
	--gkc-surface:#161a2c;
	--gkc-text:#eef0f6;
	--gkc-muted:#9aa0b4;
	--gkc-accent:#0066ff;
	--gkc-header-bg:#0b0e1a;
	--gkc-footer-bg:#0b0e1a;
	--gkc-border:#242a42;
	--gkc-font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	--gkc-font-size:17px;
	--gkc-radius:10px;
	--gkc-container:1100px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0;
	font-family:var(--gkc-font);
	font-size:var(--gkc-font-size);
	line-height:1.65;
	color:var(--gkc-text);
	background:var(--gkc-bg) var(--gkc-bg-image, none) center/cover fixed no-repeat;
	-webkit-font-smoothing:antialiased;
	overflow-wrap:break-word;
	word-break:break-word;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--gkc-accent);text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--gkc-accent);outline-offset:2px;}
ul,ol{padding-left:1.3em;}
h1,h2,h3,h4,h5,h6{line-height:1.25;font-weight:700;margin:1.4em 0 .5em;}
h1:first-child,h2:first-child,h3:first-child{margin-top:0;}
p{margin:0 0 1.1em;}
hr{border:0;border-top:1px solid var(--gkc-border);margin:2em 0;}
table{border-collapse:collapse;width:100%;max-width:100%;table-layout:fixed;margin:0 0 1.5em;}
th,td{border:1px solid var(--gkc-border);padding:9px 12px;text-align:left;vertical-align:top;overflow-wrap:break-word;word-break:break-word;}
th{background:var(--gkc-surface);}
blockquote{margin:0 0 1.1em;padding:.2em 0 .2em 1.1em;border-left:3px solid var(--gkc-accent);color:var(--gkc-muted);}
code,pre{background:var(--gkc-surface);border-radius:6px;}
code{padding:.15em .4em;font-size:.9em;}
pre{padding:14px 16px;overflow-x:auto;}
pre code{padding:0;background:none;}

.gkc-container{max-width:var(--gkc-container);margin:0 auto;padding:0 22px;}
.screen-reader-text{position:absolute;clip:rect(1px,1px,1px,1px);overflow:hidden;height:1px;width:1px;}

/* ---- Header ---- */
.gkc-header{background:var(--gkc-header-bg);border-bottom:1px solid var(--gkc-border);}
.gkc-header-inner{display:flex;align-items:center;gap:18px;padding:16px 22px;flex-wrap:wrap;}
.gkc-brand{display:flex;align-items:center;gap:10px;color:var(--gkc-text);font-size:20px;font-weight:800;}
.gkc-brand img{max-height:42px;width:auto;}
.gkc-brand:hover{text-decoration:none;}
.gkc-tagline{margin:2px 0 0;font-size:13px;color:var(--gkc-muted);font-weight:500;}

.gkc-nav{margin-left:auto;display:flex;}
.gkc-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap;}
.gkc-nav a{display:inline-block;padding:9px 14px;border-radius:8px;color:var(--gkc-text);font-weight:600;font-size:14.5px;}
.gkc-nav a:hover{background:var(--gkc-surface);text-decoration:none;}
.gkc-nav .current-menu-item>a{color:var(--gkc-accent);}
.gkc-nav .sub-menu{display:none;}

.gkc-back{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px;color:var(--gkc-text);flex:0 0 auto;-webkit-tap-highlight-color:transparent;}

/* Center the logo in the header on desktop; nav stays pinned to the
   right via its own margin-left:auto. Mobile keeps its own centering
   behavior (nav hidden, back button + brand centered by flex) below. */
@media (min-width: 781px) {
	.gkc-header-inner{position:relative;}
	.gkc-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
}

/* ---- Layout ---- */
.gkc-page{padding-top:42px;padding-bottom:70px;}
.gkc-shell{display:flex;gap:42px;align-items:flex-start;}
.gkc-content{flex:1;min-width:0;}
.gkc-sidebar{flex:0 0 280px;}
.gkc-shell.gkc-sidebar-left{flex-direction:row-reverse;}

.gkc-entry-title{font-size:clamp(26px,4vw,38px);margin-top:0;}
.gkc-entry-meta{color:var(--gkc-muted);font-size:13.5px;margin:0 0 22px;}
.gkc-entry-thumb{border-radius:var(--gkc-radius);overflow:hidden;margin-bottom:24px;}
.gkc-entry-content{max-width:72ch;}

.gkc-archive-list{display:grid;gap:26px;}
.gkc-card{border:1px solid var(--gkc-border);border-radius:var(--gkc-radius);overflow:hidden;background:var(--gkc-surface);}
.gkc-card-thumb img{aspect-ratio:16/9;object-fit:cover;}
.gkc-card-body{padding:18px 20px;}
.gkc-card-title{margin:0 0 6px;font-size:19px;}
.gkc-card-meta{color:var(--gkc-muted);font-size:13px;margin:0 0 8px;}
.gkc-card-excerpt{color:var(--gkc-muted);margin:0;}

.gkc-pagination{display:flex;gap:8px;margin-top:36px;flex-wrap:wrap;}
.gkc-pagination a,.gkc-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border-radius:8px;background:var(--gkc-surface);border:1px solid var(--gkc-border);color:var(--gkc-text);font-weight:600;font-size:14px;}
.gkc-pagination a:hover{border-color:var(--gkc-accent);text-decoration:none;}
.gkc-pagination .current{background:var(--gkc-accent);border-color:var(--gkc-accent);color:#fff;}

/* ---- Widgets / sidebar ---- */
.widget{margin-bottom:30px;background:var(--gkc-surface);border:1px solid var(--gkc-border);border-radius:var(--gkc-radius);padding:20px 22px;}
.widget:last-child{margin-bottom:0;}
.widget-title{margin:0 0 12px;font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:var(--gkc-muted);}
.widget ul{list-style:none;padding:0;margin:0;}
.widget li{margin-bottom:8px;}

/* ---- Forms / buttons ---- */
input,textarea,select{font-family:inherit;font-size:15px;color:var(--gkc-text);background:var(--gkc-surface);border:1px solid var(--gkc-border);border-radius:8px;padding:10px 13px;}
button,.gkc-btn,input[type=submit]{font-family:inherit;font-weight:700;font-size:14.5px;background:var(--gkc-accent);color:#fff;border:0;border-radius:8px;padding:10px 18px;cursor:pointer;}
button:hover,.gkc-btn:hover,input[type=submit]:hover{filter:brightness(1.08);text-decoration:none;}

/* ---- Comments ---- */
.gkc-comments{margin-top:50px;border-top:1px solid var(--gkc-border);padding-top:36px;}
.gkc-comments ol{list-style:none;padding:0;}
.gkc-comments .comment{border:1px solid var(--gkc-border);border-radius:var(--gkc-radius);padding:16px 18px;margin-bottom:14px;background:var(--gkc-surface);}
.gkc-comments .comment-meta{font-size:13px;color:var(--gkc-muted);margin-bottom:6px;}

/* ---- Footer ---- */
.gkc-footer{background:var(--gkc-footer-bg);border-top:1px solid var(--gkc-border);margin-top:auto;}
.gkc-footer-widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;padding:40px 22px;}
.gkc-footer-bottom{padding:18px 22px;text-align:center;color:var(--gkc-muted);font-size:13.5px;}
.gkc-footer-bottom a{color:var(--gkc-muted);}

html,body{overflow-x:hidden;max-width:100vw;}

body{display:flex;flex-direction:column;min-height:100vh;}
#page{display:flex;flex-direction:column;flex:1;min-width:0;max-width:100vw;}

@media(max-width:780px){
	html,body{scrollbar-width:none;-ms-overflow-style:none;}
	html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0;}

	.gkc-header-inner{position:relative;justify-content:center;}
	.gkc-back{display:flex;position:absolute;left:22px;top:50%;transform:translateY(-50%);}

	.gkc-nav{display:none;}

	.gkc-shell{flex-direction:column;}
	.gkc-shell.gkc-sidebar-left{flex-direction:column;}
	.gkc-sidebar{flex-basis:auto;width:100%;}

	table{font-size:14px;}
	th,td{padding:7px 8px;}
}

/* ---- Three-column ad layout (Privacy, Terms, About pages) ----------- */

/*
 * .gkc-ad-layout replaces both .gkc-page and .gkc-container on the <main>
 * element for the three target pages. It creates three columns:
 *   [left-ad 320px] [content flex-1] [right-ad 320px]
 *
 * Ad units are standard 300x250 banners, so each column is sized to fit
 * one comfortably (300px banner + a little breathing room).
 *
 * The max-width grows to accommodate the ad columns alongside the normal
 * --gkc-container content width, then centers on the viewport.
 */
.gkc-ad-layout {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr) 320px;
	grid-template-rows: auto;
	gap: 0 24px;
	max-width: calc(var(--gkc-container) + 688px); /* (320 + 24 gap) each side */
	margin: 0 auto;
	padding: 42px 22px 70px;
	align-items: start;
}

/* Ad columns are sticky so they follow the scroll like proper side ads */
.gkc-ad-col {
	position: sticky;
	top: 22px;
	align-self: start;
}

/* Individual ad unit container — matches widget card look. Capped and
   centered at the 300px banner width so it never gets squeezed narrower
   than the creative itself. */
.gkc-ad-slot {
	background: var(--gkc-surface);
	border: 1px solid var(--gkc-border);
	border-radius: var(--gkc-radius);
	overflow: visible;
	margin: 0 auto 14px;
	max-width: 300px;
	min-height: 250px;
	text-align: center;
}
.gkc-ad-slot:last-child { margin-bottom: 0; }

/* Whatever ad code gets pasted into the widget (img, iframe, ins, etc.)
   should never exceed its slot — keeps banners intact instead of clipped. */
.gkc-ad-slot img,
.gkc-ad-slot iframe,
.gkc-ad-slot ins {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/*
 * ---- Responsive: below 1300px there isn't room for two 300px ad
 * columns plus a readable content column, so switch to a stacked layout.
 * Order: left ad (top banner) → content → right ad (bottom banner).
 * This overrides the earlier @media(max-width:780px) rules that only
 * affect non-ad elements (nav, search, back button, etc.).
 */
@media (max-width: 1300px) {
	.gkc-ad-layout {
		display: flex;
		flex-direction: column;
		max-width: var(--gkc-container);
		padding-left: 22px;
		padding-right: 22px;
	}

	.gkc-ad-col-left  { order: 1; }
	.gkc-ad-layout .gkc-shell { order: 2; }
	.gkc-ad-col-right { order: 3; }

	.gkc-ad-col {
		position: static;
		width: 100%;
		padding-bottom: 18px;
	}

	/* Ad slot stays centered and capped at its natural 300px width so it
	   never overflows the viewport (and never needs to scroll/clip). */
	.gkc-ad-slot {
		width: 100%;
		max-width: 300px;
	}
}