/*
Theme Name: AsianDatingCoach
Theme URI: https://asiandatingcoach.ai
Author: HiRizzi
Description: Lightweight custom theme for AsianDatingCoach.ai, built around Maya. Theme-independent of the maya_coach plugin — no shared code, no plugin dependency beyond the [maya_coach] shortcode itself, which works identically in any theme.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: asiandatingcoach
*/

/* ==========================================================================
   Design tokens — approved visual direction. "Golden hour, not gold rush":
   warm ivory paper, warm near-black ink, muted gold as the sole accent
   (doing the "intelligence" work other AI products reach for neon to do,
   without borrowing tech's visual vocabulary), plum for depth, sage for
   quiet trust/calm notes.
   ========================================================================== */

:root {
	--adc-ink: #2B2430;
	--adc-paper: #FBF7F3;
	--adc-gold: #B8875A;
	--adc-plum: #5C3A4E;
	--adc-sage: #7C8B6F;
	--adc-mist: #A89A93;

	/* FINAL palette decision -- matched to Priya's real AsianThrill
	   DT_AI_Coach source (source-verified via direct file inspection,
	   not screenshot sampling). This is the current, approved baseline
	   -- prior "muted richness" and "screenshot-estimated" iterations
	   are superseded, not preserved here. --adc-maya-transcript-bg is
	   genuinely white, distinct from the pink card around it. */
	--adc-maya-card-bg: #FDF2F6;
	--adc-maya-card-border: rgba( 194, 24, 91, 0.12 );
	--adc-maya-bubble-bg: #FDF2F6;
	--adc-maya-bubble-text-color: #3a2a30;
	--adc-maya-bubble-border: rgba( 194, 24, 91, 0.15 );
	--adc-maya-transcript-bg: #FFFFFF;
	--adc-maya-transcript-border: rgba( 194, 24, 91, 0.1 );
	--adc-maya-surface-bg: #FFFFFF;
	--adc-maya-input-border: rgba( 194, 24, 91, 0.25 );
	--adc-maya-focus-ring: rgba( 194, 24, 91, 0.12 );
	/* Real two-stop gradient (confirmed via source, not a flat color as
	   earlier screenshot-sampling had estimated) -- shared by the Send
	   button and user bubbles, which use identical colors in the
	   source. */
	--adc-maya-send-btn-start: #c2185b;
	--adc-maya-send-btn-end: #e91e63;
	/* Two DISTINCT colors, not one -- the italic "Maya" name and the
	   plainer tagline below it are different colors in the real
	   design. An earlier pass conflated both under a single
	   --adc-maya-tagline-color variable and applied it to the name by
	   mistake; fixed here. */
	--adc-maya-header-name-color: #c2185b;
	--adc-maya-tagline-color: #5a4550;
	--adc-maya-chip-text: #c2185b;
	--adc-maya-chip-border: rgba( 194, 24, 91, 0.35 );
	--adc-maya-disclaimer-color: #9a7d88;

	--adc-font-display: 'Fraunces', Georgia, serif;
	--adc-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* The single, standardized max-width for Maya's column and the
	   supporting copy directly above it — approved at 760px to match Priya's real outer coach width. Anything that shares a visual column
	   with the Maya chat surface should reference this variable rather
	   than a hardcoded number, so the site and the plugin's own CSS
	   (assets/css/maya.css, updated separately to match) never drift
	   apart again. */
	--adc-maya-column-width: 760px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

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

body {
	margin: 0;
	background: var( --adc-paper );
	color: var( --adc-ink );
	font-family: var( --adc-font-body );
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var( --adc-ink );
}

h1, h2, h3, h4 {
	font-family: var( --adc-font-display );
	font-weight: 500;
	line-height: 1.25;
	margin: 0 0 0.6em;
	color: var( --adc-ink );
}

p {
	margin: 0 0 1.2em;
}

/* Visible keyboard focus everywhere — quality floor, not optional. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var( --adc-gold );
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 32px;
}

.site-branding {
	display: flex;
	align-items: center;
}

/* Text wordmark — the initial identity. Architected so a real logo can
   be added later purely through Appearance > Customize > Site Identity
   (add_theme_support('custom-logo') in functions.php) with zero code
   changes: the_custom_logo() renders here automatically once an image
   is set, and this text wordmark simply stops rendering at that point
   (see header.php's conditional) rather than needing to be replaced. */
.site-branding__wordmark {
	font-family: var( --adc-font-display );
	font-size: 20px;
	font-weight: 500;
	color: var( --adc-ink );
	text-decoration: none;
	letter-spacing: 0.01em;
}

.site-branding__wordmark span {
	color: var( --adc-gold );
}

.site-branding img.custom-logo {
	max-height: 40px;
	width: auto;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.main-navigation li {
	margin-left: 28px;
}

.main-navigation a {
	text-decoration: none;
	font-size: 14px;
	color: var( --adc-ink );
	opacity: 0.75;
}

.main-navigation a:hover {
	opacity: 1;
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	font-family: var( --adc-font-body );
	font-size: 14px;
	cursor: pointer;
	color: var( --adc-ink );
}

/* ==========================================================================
   Homepage hero — give Maya her full 760px content width. The hero itself
   is wider by its 24px side padding, otherwise box-sizing:border-box would
   silently shrink the shortcode mount to 712px. That was why Maya looked
   narrower than Priya even though both cards declared max-width:760px.
   ========================================================================== */

.hero {
	max-width: calc( var( --adc-maya-column-width ) + 48px );
	margin: 40px auto 0;
	padding: 0 24px;
	text-align: center;
}

.hero__maya-mount {
	max-width: var( --adc-maya-column-width );
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.hero__intro {
	font-family: var( --adc-font-display );
	font-size: 26px;
	font-weight: 400;
	margin: 0 0 32px;
}


/* ==========================================================================
   Content sections
   ========================================================================== */

.section {
	max-width: var( --adc-maya-column-width );
	margin: 0 auto;
	padding: 56px 24px;
	text-align: center;
}

.section h2 {
	font-size: 24px;
	margin: 0 0 16px;
}

.section p {
	color: #5A4F55;
	max-width: 480px;
	margin: 0 auto 1.2em;
}

.section--dark {
	background: var( --adc-plum );
	color: var( --adc-paper );
	max-width: 100%;
	padding: 56px 24px;
}

.section--dark h2,
.section--dark p {
	color: var( --adc-paper );
}

.section--dark p {
	color: #E8DCE2;
}

.helps-list {
	list-style: none;
	padding: 0;
	margin: 24px auto 0;
	text-align: left;
	max-width: 420px;
}

.helps-list li {
	padding: 10px 0 10px 28px;
	position: relative;
	border-bottom: 1px solid rgba( 43, 36, 48, 0.08 );
}

.helps-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 18px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --adc-sage );
}

/* ==========================================================================
   Editorial pages — About, Privacy, Terms, Blog single/index. One shared,
   consistent template deliberately, per the approved direction: these
   are utility/trust content, not places to spend design novelty.
   ========================================================================== */

.editorial {
	max-width: 680px;
	margin: 0 auto;
	padding: 56px 24px 80px;
}

.editorial h1 {
	font-size: 34px;
	margin-bottom: 0.3em;
}

.editorial .entry-meta {
	font-family: var( --adc-font-body );
	font-size: 13px;
	color: var( --adc-mist );
	margin-bottom: 2em;
}

.editorial .entry-content {
	font-size: 17px;
	line-height: 1.75;
}

.editorial .entry-content h2 {
	font-size: 22px;
	margin-top: 1.6em;
}

.editorial .entry-content h3 {
	font-size: 18px;
	margin-top: 1.4em;
}

.editorial .entry-content a {
	color: var( --adc-plum );
}

.editorial .entry-content blockquote {
	border-left: 3px solid var( --adc-gold );
	margin: 1.5em 0;
	padding: 0.2em 0 0.2em 1.2em;
	font-family: var( --adc-font-display );
	font-size: 19px;
	color: var( --adc-plum );
}

/* Blog index list */
.blog-list {
	max-width: 680px;
	margin: 0 auto;
	padding: 56px 24px 80px;
}

.blog-list__item {
	padding: 28px 0;
	border-bottom: 1px solid rgba( 43, 36, 48, 0.1 );
}

.blog-list__item:first-child {
	padding-top: 0;
}

.blog-list__item h2 {
	font-size: 24px;
	margin-bottom: 0.3em;
}

.blog-list__item h2 a {
	text-decoration: none;
	color: var( --adc-ink );
}

.blog-list__item .entry-meta {
	font-size: 13px;
	color: var( --adc-mist );
	margin-bottom: 0.8em;
}

.blog-list__item .entry-excerpt {
	color: #5A4F55;
}

.pagination {
	display: flex;
	justify-content: space-between;
	max-width: 680px;
	margin: 0 auto;
	padding: 0 24px 60px;
	font-size: 14px;
}

.pagination a {
	text-decoration: none;
	color: var( --adc-plum );
}

/* ==========================================================================
   Safety page — richer, more structured treatment per the approved
   direction ("trust and dating safety are central to this product").
   Deliberately CMS-native rather than requiring custom fields: any H2
   the editor writes in the block editor becomes a visually distinct
   "safety principle" block on this one template — no plugin dependency,
   no ACF, just heavier styling scoped to this template's H2s.
   ========================================================================== */

.safety-page {
	max-width: 780px;
	margin: 0 auto;
	padding: 56px 24px 80px;
}

.safety-page__intro {
	text-align: center;
	max-width: 560px;
	margin: 0 auto 48px;
}

.safety-page__intro h1 {
	font-size: 36px;
}

.safety-page__intro p {
	font-size: 18px;
	color: #5A4F55;
}

.safety-page .entry-content h2 {
	font-family: var( --adc-font-display );
	font-size: 22px;
	background: #fff;
	border: 1px solid rgba( 43, 36, 48, 0.08 );
	border-left: 4px solid var( --adc-sage );
	border-radius: 4px 12px 12px 4px;
	padding: 18px 24px;
	margin: 2em 0 0.8em;
}

.safety-page .entry-content h2:first-of-type {
	margin-top: 0;
}

.safety-page .entry-content > p {
	padding: 0 24px;
	font-size: 16px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	border-top: 1px solid rgba( 43, 36, 48, 0.1 );
	padding: 32px 24px;
	text-align: center;
	font-size: 13px;
	color: var( --adc-mist );
}

.footer-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
}

.footer-navigation li {
	display: inline;
}

.footer-navigation li:not( :last-child )::after {
	content: '·';
	margin: 0 10px;
	color: var( --adc-mist );
}

.footer-navigation a {
	color: var( --adc-mist );
	text-decoration: none;
}

.footer-navigation a:hover {
	color: var( --adc-ink );
}

/* ==========================================================================
   404
   ========================================================================== */

.error-404 {
	max-width: 500px;
	margin: 0 auto;
	padding: 100px 24px;
	text-align: center;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media ( max-width: 640px ) {
	.site-header {
		padding: 18px 20px;
	}

	.main-navigation {
		display: none;
	}

	.main-navigation.is-open {
		display: block;
		position: absolute;
		top: 64px;
		left: 0;
		right: 0;
		background: var( --adc-paper );
		border-bottom: 1px solid rgba( 43, 36, 48, 0.1 );
		padding: 16px 20px;
		z-index: 10;
	}

	.main-navigation.is-open ul {
		flex-direction: column;
		align-items: flex-start;
	}

	.main-navigation.is-open li {
		margin: 0 0 14px;
	}

	.menu-toggle {
		display: block;
	}

	.hero {
		margin-top: 16px;
		padding: 0 12px;
	}

	.hero__intro {
		font-size: 21px;
		margin-bottom: 20px;
	}

	.editorial,
	.blog-list,
	.safety-page {
		padding-left: 16px;
		padding-right: 16px;
	}

	.safety-page .entry-content h2 {
		padding: 14px 16px;
	}

	.safety-page .entry-content > p {
		padding: 0 16px;
	}
}

/* Asian Dating Coach header logo */
.site-branding .custom-logo {
    width: 220px;
    height: auto;
    max-width: 100%;
}

@media (max-width: 768px) {
    .site-branding .custom-logo {
        width: 175px;
    }
}