/*
Theme Name: Gridzone Child
Theme URI: https://plastichuman.com
Description: Child theme for Gridzone - Plastic Human
Author: Nico Becerra
Author URI: https://plastichuman.com
Template: gridzone
Version: 1.0.0
*/

/* =====================================================================
   GLOBAL — brand tokens, base typography, shared header/footer.
   Loaded on every template. Homepage-specific layout lives in
   homepage.css (enqueued only on the front page).
   ===================================================================== */

:root{
	--paper:#F5F4F0;
	--ink:#1A1A1A;
	--plum:#5B2D8E;
	--plum-deep:#4A2375;
	--stone:#6B665C;
	--vellum:#ECEAE3;
	--hairline:#DAD6CC;
	--display:'Playfair Display', Georgia, serif;
	--body:'EB Garamond', Georgia, serif;
	--mono:'IBM Plex Mono', 'Courier New', monospace;
}

/* ---------- Base ---------- */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* Brand typography.
   Gridzone's Customizer injects an INLINE `body{font-family:"Roboto",...}`
   into wp_head, which loads after every enqueued stylesheet and therefore
   beats a plain `body{}` rule at equal specificity. We qualify our base rules
   with `html body` (and cover the text elements explicitly) so they outrank
   that inline declaration without needing !important. */
html body{
	background:var(--paper);
	color:var(--ink);
	font-family:var(--body);
	font-size:19px;
	line-height:1.65;
	font-weight:400;
	-webkit-font-smoothing:antialiased;
}
html body p,
html body li,
html body dd,
html body dt,
html body blockquote,
html body figcaption,
html body td,
html body th,
html body input,
html body textarea,
html body select,
html body button{
	font-family:var(--body);
}
html body p,
html body li,
html body blockquote{
	font-size:19px;
}
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6{ font-family:var(--display); }
a{ color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible{
	outline:2px solid var(--plum);
	outline-offset:3px;
}

.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
.eyebrow{
	font-family:var(--mono);
	font-size:12px;
	letter-spacing:.22em;
	text-transform:uppercase;
	color:var(--stone);
	display:block;
}

/* ---------- Shared header (brand bar) ---------- */
#site-header{
	position:sticky; top:0; z-index:50;
	background:rgba(245,244,240,.92);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	border-bottom:1px solid var(--hairline);
}
#site-header .nav{ display:flex; align-items:center; justify-content:space-between; height:88px; }
#site-header .logo{ display:inline-block; line-height:0; }
#site-header .logo img{ height:56px; width:auto; display:block; }
#site-header .logo-text{ font-family:var(--display); font-size:26px; line-height:1; color:var(--ink); text-decoration:none; }
#site-header nav ul.site-menu{ display:flex; gap:36px; list-style:none; align-items:center; margin:0; padding:0; }
#site-header nav a{
	font-family:var(--mono);
	font-size:12px; letter-spacing:.14em; text-transform:uppercase;
	text-decoration:none; color:var(--ink);
	padding-bottom:4px; border-bottom:1px solid transparent;
	transition:border-color .2s ease;
}
#site-header nav a:hover{ border-bottom-color:var(--plum); }
/* Subscribe: plum TEXT only — no persistent underline. */
#site-header nav li.nav-sub a{ color:var(--plum); }
/* The underline is reserved exclusively for the current-section indicator.
   Subscribe (.nav-sub) is never underlined. */
#site-header nav li.current-menu-item:not(.nav-sub) a,
#site-header nav li.current-menu-ancestor:not(.nav-sub) a{ border-bottom-color:var(--ink); }

/* Keep the sticky bar clear of the WP admin bar for logged-in users. */
.admin-bar #site-header{ top:32px; }
@media (max-width:782px){ .admin-bar #site-header{ top:46px; } }

@media (max-width:860px){
	#site-header nav ul.site-menu{ gap:18px; }
	#site-header nav a{ font-size:10px; letter-spacing:.1em; }
}
@media (max-width:640px){
	#site-header .nav{ height:auto; flex-direction:column; padding:14px 0; gap:12px; }
	#site-header nav ul.site-menu{ flex-wrap:wrap; justify-content:center; row-gap:10px; }
}

/* ---------- Shared footer ---------- */
#site-footer{ padding:56px 0; border-top:1px solid var(--hairline); background:var(--paper); }
#site-footer .foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
#site-footer .foot .logo{ line-height:0; }
#site-footer .foot img{ height:38px; width:auto; display:block; }
#site-footer .foot ul{ display:flex; gap:28px; list-style:none; flex-wrap:wrap; margin:0; padding:0; }
#site-footer .foot a{
	font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
	text-decoration:none; color:var(--stone);
}
#site-footer .foot a:hover{ color:var(--ink); }
#site-footer .foot .copy{ font-family:var(--mono); font-size:11px; color:var(--stone); letter-spacing:.08em; }

/* Footer two-state (sitewide): wide = logo left / nav right; below 900px stack
   vertically and centre everything (logo, nav, copy). Corrects the homepage
   footer wrap too, since this is the one shared footer. */
@media (max-width:900px){
	#site-footer .foot{ flex-direction:column; align-items:center; gap:20px; text-align:center; }
	#site-footer .foot ul{ justify-content:center; }
}

/* ---------- Newsletter placeholder (single posts) ---------- */
.ph-newsletter{ margin-top:8px; }
body.single .ph-newsletter{
	max-width:640px; margin:48px auto 8px; padding:40px 32px;
	background:var(--vellum); border-top:3px solid var(--plum); text-align:center;
}
body.single .ph-newsletter .eyebrow{ color:var(--plum); margin-bottom:10px; }
body.single .ph-newsletter__lead{ font-size:18px; color:#4A463D; margin-bottom:20px; }
body.single .ph-newsletter .sub-form{ display:flex; gap:12px; max-width:520px; margin:0 auto; }
body.single .ph-newsletter .sub-form input{
	flex:1; background:#fff; border:1px solid var(--hairline); color:var(--ink);
	font-family:var(--body); font-size:17px; padding:14px 16px;
}
body.single .ph-newsletter .sub-form button{
	background:var(--plum); color:var(--paper); border:1px solid var(--plum);
	font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
	padding:14px 22px; cursor:pointer;
}
body.single .ph-newsletter .sub-note{
	display:block; margin-top:14px;
	font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--stone);
}
@media (max-width:640px){ body.single .ph-newsletter .sub-form{ flex-direction:column; } }

/* ---------------------------------------------------------------------
   SUBSCRIBE BAND — default appearance + the Kit HTML-embed bridge.

   Why a DEFAULT here: the plum band was declared three times, once per
   wrapper (.ph-home, .ph-blog, body.single). A fourth context (.ph-about)
   therefore rendered the band with no styling at all - transparent
   background, black text, browser-default input - and nothing failed
   loudly, because "the band is present" was true. These unscoped rules are
   the fallback any context inherits, so a new wrapper gets a correct band
   instead of an invisible one. The three scoped copies carry two classes
   and still win on specificity; their per-context padding and widths are
   unchanged. (Consolidating the three into this one home is a post-launch
   cleanup, not a pre-launch edit.)
   --------------------------------------------------------------------- */
.subscribe{ background:var(--plum); color:var(--paper); padding:88px 0; }
.subscribe .sub-inner{ max-width:620px; margin:0 auto; text-align:center; padding:0 24px; }
.subscribe .eyebrow{ color:#D9CCEE; }
.subscribe h2{
	font-family:var(--display); font-weight:500;
	font-size:clamp(28px,3.4vw,38px); color:var(--paper); margin:14px 0 12px;
}
.subscribe p,
.subscribe .ph-newsletter__lead{ color:#E4DAF2; font-size:19px; }
.subscribe .sub-form{ display:flex; gap:12px; margin:32px auto 0; max-width:520px; }
.subscribe .sub-form input{
	flex:1; background:transparent; border:1px solid #9B7FC4; color:var(--paper);
	font-family:var(--body); font-size:17px; padding:15px 18px;
}
.subscribe .sub-form input::placeholder{ color:#BBA6DB; }
.subscribe .sub-form button{
	background:var(--paper); color:var(--plum); border:1px solid var(--paper);
	font-family:var(--mono); font-size:12px; letter-spacing:.16em;
	text-transform:uppercase; padding:15px 24px; cursor:pointer;
}
.subscribe .sub-note{
	display:block; margin-top:16px;
	font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:#B9A3DA;
}

/* Kit HTML embed: structural bridge only, no colours of its own.
   Kit nests the input and the button inside .formkit-fields, so .sub-form's
   flex row would otherwise have ONE child and the controls would stack. The
   colour contract stays with .sub-form input / .sub-form button above, which
   already match Kit's <input class="formkit-input"> and
   <button class="formkit-submit"> as plain elements. */
.sub-form .formkit-fields{ display:flex; gap:12px; flex:1; margin:0; padding:0; }
.sub-form .formkit-field{ flex:1; margin:0; display:flex; }
.sub-form .formkit-field .formkit-input{ width:100%; }
.sub-form .formkit-submit{ flex:0 0 auto; white-space:nowrap; }
.sub-form .formkit-submit span{ font:inherit; letter-spacing:inherit; }

/* Kit's inline alert, used for BOTH the success message and errors
   (ck.5.js writes into [data-element="errors"]). Paper on plum with a
   hairline, never green or red - the band owns the palette. */
.sub-form .formkit-alert{
	list-style:none; margin:0 0 14px; padding:0;
	font-family:var(--body); font-size:16px; line-height:1.5; color:var(--paper);
}
.sub-form .formkit-alert:not(:empty){
	border:1px solid #9B7FC4; padding:12px 16px; background:transparent;
}
.sub-form .formkit-alert li{ list-style:none; margin:0; }

/* Free-plan credit: the words are required, the logo is not. */
.subscribe .kit-credit{
	text-decoration:none; color:#B9A3DA; text-align:center;
}
.subscribe .kit-credit:hover{ color:var(--paper); }
.subscribe .kit-credit svg,
.subscribe .kit-credit img{ display:none; }

@media (max-width:640px){
	.subscribe .sub-form,
	.sub-form .formkit-fields{ flex-direction:column; }
}

/* =====================================================================
   BLOG / ARCHIVE — existing rules retained from the prior child theme.
   (Blog body design is a planned follow-up; these keep it functional.)
   ===================================================================== */

.masonry-item .entry-meta li.entry-icon{
	float: right;
	margin: 0;
}

#toolbar{
	padding: 20px 20px 0;
}

#toolbar strong{
	display: block;
	font-size: 16px;
}

#toolbar a{
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 16px;
	display: inline-block;
	padding: 4px 11px;
	margin: 0 2px;
	border-radius: 10px;
	pointer-events: auto;
	opacity: .5;
	transition: .3s;
}

#toolbar a:hover,
#toolbar a.active{
	opacity: 1;
}

#toolbar a.active{
	pointer-events: none;
}

#toolbar a i{
	font-size: 80%;
	margin-right: 6px;
}

#filters{
	margin-bottom: 10px;
}

@media only screen and (min-width: 720px){
	#toolbar{
		padding: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	#toolbar strong{
		display: inline;
	}

	#filters{
		margin: 0;
	}
}

.pld-like-dislike-wrap{
	display: block;
}

.pld-common-wrap{
	background: #f5f5f5;
	border-radius: 10px;
	font-weight: 600;
	padding: 10px 14px;
	font-size: 15px;
	line-height: 1.5em;
}

.pld-common-wrap i{
	margin-right: 6px;
}

.pld-common-wrap .pld-count-wrap{
	background-color: #fff;
	padding: 0 6px;
	margin-left: 8px;
	border-radius: 4px;
}

.pld-like-dislike-wrap .pld-prevent{
	pointer-events: none;
}

/* ---------- Blog / archive intro + topic grid ---------- */
body.blog .ph-content-intro,
body.archive .ph-content-intro{
	padding: 36px 0 28px;
	background: #f7f7f7;
}

body.blog .ph-content-intro__header,
body.archive .ph-content-intro__header{
	max-width: 820px;
	margin: 0 auto 30px;
	text-align: center;
}

body.blog .ph-content-intro__title,
body.archive .ph-content-intro__title{
	margin: 0 0 14px;
	font-size: 52px;
	line-height: 1.05;
	font-weight: 500;
	letter-spacing: -0.3px;
}

body.blog .ph-content-intro__text,
body.archive .ph-content-intro__text{
	margin: 0;
	font-size: 19px;
	line-height: 1.7;
	color: rgba(0,0,0,.68);
}

body.blog .ph-topic-grid,
body.archive .ph-topic-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-bottom: 26px;
}

body.blog .ph-topic-card,
body.archive .ph-topic-card{
	display: block;
	position: relative;
	text-decoration: none;
	background: #fff;
	border: 1px solid rgba(0,0,0,.06);
	border-radius: 16px;
	padding: 26px 24px 28px;
	transition: all .22s ease;
}

body.blog .ph-topic-card:hover,
body.archive .ph-topic-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(0,0,0,.08);
	border-color: rgba(99,25,173,.28);
}

body.blog .ph-topic-card__title,
body.archive .ph-topic-card__title{
	display: block;
	margin: 0 0 8px;
	font-size: 30px;
	line-height: 1.1;
	color: #222;
	font-weight: 500;
	transition: color .2s ease;
}

body.blog .ph-topic-card__desc,
body.archive .ph-topic-card__desc{
	display: block;
	color: rgba(0,0,0,.66);
	line-height: 1.6;
	font-size: 15px;
}

body.blog .ph-topic-card:hover .ph-topic-card__title,
body.archive .ph-topic-card:hover .ph-topic-card__title{
	color: #6319ad;
}

@media (max-width: 1100px){
	body.blog .ph-topic-grid,
	body.archive .ph-topic-grid{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px){
	body.blog .ph-content-intro,
	body.archive .ph-content-intro{
		padding: 30px 0 18px;
	}

	body.blog .ph-content-intro__title,
	body.archive .ph-content-intro__title{
		font-size: 40px;
	}

	body.blog .ph-content-intro__text,
	body.archive .ph-content-intro__text{
		font-size: 17px;
	}

	body.blog .ph-topic-grid,
	body.archive .ph-topic-grid{
		grid-template-columns: 1fr;
		gap: 14px;
	}

	body.blog .ph-topic-card,
	body.archive .ph-topic-card{
		padding: 20px 18px;
	}

	body.blog .ph-topic-card__title,
	body.archive .ph-topic-card__title{
		font-size: 26px;
	}
}

body.blog #toolbar,
body.archive #toolbar{
	margin-top: 4px;
	margin-bottom: 28px;
}

#toolbar strong{
	opacity: .65;
	font-weight: 500;
}

.post-card .post-category,
.masonry-card .post-category,
.grid-card .post-category,
.card .post-category,
.post .post-category{
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}