/*
Theme Name: CAADRIA
Theme URI: https://caadria2025.org
Description: GeneratePress child theme for CAADRIA — the Cognitive, Affective And Developmental Research Insights Archive. Psychology content with interactive self-checks, myth cards and predict-then-reveal formats.
Author: Piyush Choudhary
Template: generatepress
Version: 1.5.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: caadria
*/

:root {
	--ca-ink: #2E2A4F;       /* ink violet — identity */
	--ca-ink-deep: #1F1C38;  /* deep dusk */
	--ca-peri: #6C63D2;      /* periwinkle — actions */
	--ca-peri-dark: #4F47B0;
	--ca-mint: #5FCFAD;      /* mint — reveal / correct states */
	--ca-amber: #F2A93B;     /* amber — highlights, sparing */
	--ca-mist: #EEECF6;      /* lavender mist — sections */
	--ca-paper: #FCFBFE;
	--ca-text: #2B2838;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 3px solid var(--ca-peri);
	outline-offset: 2px;
}

/* ============================ Site footer =========================== */
.ca-footer {
	background: var(--ca-ink-deep);
	color: rgba(255, 255, 255, 0.78);
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 0.95rem;
	line-height: 1.6;
}
.ca-footer__wrap { max-width: 1160px; margin-inline: auto; padding-inline: 24px; }
.ca-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr);
	gap: 40px;
	padding-block: 64px 56px;
}
.ca-footer__logo {
	display: inline-block;
	font-family: "Space Grotesk", system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.3em;
	color: #fff;
	text-decoration: none;
	margin-bottom: 16px;
}
.ca-footer__logo span { color: var(--ca-mint); }
.ca-footer__brand p { margin: 0; color: rgba(255, 255, 255, 0.66); }
.ca-footer__head {
	font-family: "Space Grotesk", system-ui, sans-serif;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	margin: 4px 0 18px;
}
.ca-footer__col ul { list-style: none; margin: 0; padding: 0; }
.ca-footer__col li { margin-bottom: 12px; }
.ca-footer__col a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.ca-footer__col a:hover { color: var(--ca-mint); text-decoration: underline; }
.ca-footer__disclaimer {
	background: rgba(0, 0, 0, 0.2);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: 24px;
	font-size: 0.86rem;
	color: rgba(255, 255, 255, 0.6);
}
.ca-footer__disclaimer p { margin: 0; max-width: 78em; }
.ca-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 20px; font-size: 0.86rem; }
.ca-footer__bar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.ca-footer__bar p { margin: 0; color: rgba(255, 255, 255, 0.6); }
.ca-footer__bar nav { display: flex; gap: 22px; }
.ca-footer__bar a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.ca-footer__bar a:hover { color: var(--ca-mint); }
@media (max-width: 980px) { .ca-footer__grid { grid-template-columns: 1fr 1fr; } .ca-footer__brand { grid-column: 1 / -1; max-width: 46em; } }
@media (max-width: 560px) { .ca-footer__grid { grid-template-columns: 1fr; gap: 32px; } }

/* Logo replaces text title */
.site-branding .main-title,
.site-branding .site-description { display: none !important; }

/* Header logo sizing */
.site-header .site-logo img,
.site-header .header-image { height: 46px; width: auto; max-width: none; }

/* ============ Full-canvas pages: neutralize GP content box ============ */
/* Our templates (front page, articles, pages, 404) manage their own
   max-width via internal wraps. GP's container padding + sidebar column
   would otherwise squeeze them into a partial-width frame. */
body.ca-canvas .site-content,
body.ca-canvas .content-area,
body.ca-canvas .site-main {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}
body.ca-canvas .grid-container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
body.ca-canvas #primary { width: 100% !important; }
body.ca-canvas .inside-article { padding: 0 !important; margin: 0 !important; background: transparent; }
body.ca-canvas #secondary { display: none !important; }

/* ============ Article container: immune to injected layout CSS ============ */
/* Pipeline-injected article CSS can gridify <article> into a content+rail
   two-column layout, capturing our template's hero/media/content as grid
   children and pinning everything into a partial-width column. Our article
   shell owns its own layout — force it back to block flow. */
body.ca-canvas .ca-entry article,
body.ca-canvas article.ca-entry__article,
body.ca-canvas .ca-entry__article {
	display: block !important;
	grid-template-columns: none !important;
	grid-template-areas: none !important;
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	columns: auto !important;
}
body.ca-canvas .ca-entry__article > * {
	grid-column: auto !important;
	grid-area: auto !important;
}
body.ca-canvas .ca-entry__hero,
body.ca-canvas .ca-entry__media {
	width: 100% !important;
	max-width: 100% !important;
}

/* ==== Layout immunity, level up: <main> itself (grid track fix) ==== */
/* If injected CSS gridifies <main>, the article's width:100% resolves
   against its grid TRACK (~65%), not the viewport — which is why fixing
   the article alone changed nothing. Reset the whole ancestor chain. */
body.ca-canvas main,
body.ca-canvas main.ca-home,
body.ca-canvas main.ca-entry {
	display: block !important;
	grid-template-columns: none !important;
	grid-template-areas: none !important;
	flex-direction: initial !important;
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	columns: auto !important;
}
body.ca-canvas main > *,
body.ca-canvas .ca-entry__article {
	grid-column: auto !important;
	grid-area: auto !important;
	flex: none !important;
	width: 100% !important;
	max-width: 100% !important;
}
