/* ════════════════════════════════════════════════════════════════════════
   American Notary — Main stylesheet
   Uses CSS variables output by flavor-starter (Dual Theme) plugin.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Design tokens (constants) ─── */
:root {
	/* Header-specific — always dark, don't invert with theme */
	--an-header-bg: #282828;
	--an-header-bg-elevated: #3A3A3A;
	--an-header-text: #FFFFFF;
	--an-header-text-muted: rgba(255, 255, 255, 0.72);
	--an-header-border: rgba(255, 255, 255, 0.08);
	--an-header-hover-bg: rgba(255, 255, 255, 0.06);
	--an-header-height: 72px;
	--an-header-height-mobile: 64px;

	/* Layout — container widths */
	--an-container-max: 1280px;
	--an-container-narrow: 820px;
	--an-container-pad: 40px;
	--an-container-pad-md: 24px;
	--an-container-pad-sm: 16px;

	/* Radius scale (Figma-aligned) */
	--an-radius-xs: 4px;    /* chips, tags, tiny badges */
	--an-radius-sm: 8px;    /* buttons, inputs, menu links */
	--an-radius-md: 12px;   /* dropdowns, menu panels, notary cards */
	--an-radius-lg: 16px;   /* state/city tiles, feature tiles */
	--an-radius-xl: 24px;   /* hero cards, large CTA cards */
	--an-radius-pill: 999px;/* pills, avatars, circular buttons, hero search bar */

	/* Shadow scale */
	--an-shadow-xs: 0 1px 2px rgba(40, 40, 40, 0.05);
	--an-shadow-sm: 0 2px 8px rgba(40, 40, 40, 0.06);
	--an-shadow-md: 0 4px 16px rgba(40, 40, 40, 0.08);
	--an-shadow-lg: 0 12px 40px rgba(40, 40, 40, 0.12);
	--an-shadow-xl: 0 24px 60px rgba(40, 40, 40, 0.18);

	/* Shadows inside dark header */
	--an-shadow-dropdown: 0 12px 40px rgba(0, 0, 0, 0.35);

	/* Spacing scale (use where you need semantic spacing) */
	--an-space-1: 4px;
	--an-space-2: 8px;
	--an-space-3: 12px;
	--an-space-4: 16px;
	--an-space-5: 20px;
	--an-space-6: 24px;
	--an-space-8: 32px;
	--an-space-10: 40px;
	--an-space-12: 48px;
	--an-space-16: 64px;
	--an-space-20: 80px;

	/* Transitions */
	--an-trans-fast: 0.12s ease;
	--an-trans-base: 0.18s ease;
	--an-trans-slow: 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);

	/* ─── Brand (constant across themes) ─── */
	--an-accent:         #E11D2E;   /* brand red */
	--an-accent-hover:   #C71828;
	--an-success:        #16A34A;
	--an-warning:        #F59E0B;

	/* Alpha tokens for tints (work in both themes). */
	--an-accent-a8:      rgba(225, 29, 46, 0.08);
	--an-accent-a12:     rgba(225, 29, 46, 0.12);
	--an-accent-a20:     rgba(225, 29, 46, 0.20);
	--an-accent-a35:     rgba(225, 29, 46, 0.35);

	/* ─── LIGHT theme (default) ─── */
	--an-bg-primary:     #FFFFFF;
	--an-bg-secondary:   #F7F8FA;
	--an-bg-elevated:    #FFFFFF;          /* cards over secondary bg */
	--an-text:           #1E2433;
	--an-text-muted:     #5A6477;
	--an-heading:        #282828;
	--an-border:         #E5E7EB;
	--an-border-strong:  #CBD2DC;
	--an-link:           #E11D2E;
	--an-link-hover:     #C71828;
	--an-shadow-color:   40, 40, 40;       /* rgb triplet for rgba() */

	/* ─── Homepage section tones (dark mode flips below) ─── */
	--an-section-cream-1: #F7F5EE;          /* states / how-it-works */
	--an-section-cream-2: #F3EADC;          /* top-rated */
	--an-section-grey:    #EDEDED;          /* dedicated pages */
	--an-card:            #FFFFFF;          /* notary / state cards */

	/* ─── Backwards-compat aliases ───
	   Any legacy --starter-* references that haven't been migrated yet
	   will resolve to the theme's native tokens, so nothing breaks. */
	--starter-bg-primary:   var(--an-bg-primary);
	--starter-bg-secondary: var(--an-bg-secondary);
	--starter-text:         var(--an-text);
	--starter-heading:      var(--an-heading);
	--starter-border:       var(--an-border);
	--starter-accent:       var(--an-accent);
	--starter-link:         var(--an-link);
	--starter-link-hover:   var(--an-link-hover);
}

/* ─── DARK theme ─── */
[data-theme="dark"] {
	--an-bg-primary:     #282828;
	--an-bg-secondary:   #3A3A3A;
	--an-bg-elevated:    #333333;
	--an-text:           #D8DCE6;
	--an-text-muted:     #9CA3B0;
	--an-heading:        #FFFFFF;
	--an-border:         rgba(255, 255, 255, 0.08);
	--an-border-strong:  rgba(255, 255, 255, 0.16);
	--an-link:           #FF5868;
	--an-link-hover:     #FFA3AD;

	/* Homepage section tones flipped for dark */
	--an-section-cream-1: #222222;
	--an-section-cream-2: #1E1E1E;
	--an-section-grey:    #1A1A1A;
	--an-card:            #2E2E2E;
	--an-shadow-color:   0, 0, 0;

	/* Mirror aliases so legacy styles flip with the theme. */
	--starter-bg-primary:   var(--an-bg-primary);
	--starter-bg-secondary: var(--an-bg-secondary);
	--starter-text:         var(--an-text);
	--starter-heading:      var(--an-heading);
	--starter-border:       var(--an-border);
	--starter-accent:       var(--an-accent);
	--starter-link:         var(--an-link);
	--starter-link-hover:   var(--an-link-hover);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: var(--an-text);
	background: var(--an-bg-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* ─── Smooth theme transitions ───
   When `data-theme` flips, ease color changes on the root element only.
   Because CSS custom properties cascade from the root, children inherit
   the new values automatically — we don't need to transition every
   descendant (which would clobber element-specific transitions like
   the drawer's transform slide). */
html.theme-transitions-enabled,
html.theme-transitions-enabled body {
	transition:
		background-color 280ms ease,
		color            200ms ease;
}

/* Elements that carry their OWN background / border and should
   smoothly flip with the theme: list them explicitly. Keeps the
   effect surgical and avoids breaking any transform/opacity
   animations elsewhere. */
html.theme-transitions-enabled .an-header,
html.theme-transitions-enabled .an-footer,
html.theme-transitions-enabled .an-cta-band,
html.theme-transitions-enabled .an-plan,
html.theme-transitions-enabled .an-faq__item,
html.theme-transitions-enabled .an-compare-wrap,
html.theme-transitions-enabled .an-compare th,
html.theme-transitions-enabled .an-compare td,
html.theme-transitions-enabled .an-compare thead th,
html.theme-transitions-enabled .an-join__hero,
html.theme-transitions-enabled .an-join__plans,
html.theme-transitions-enabled .an-join__compare,
html.theme-transitions-enabled .an-join__faq {
	transition:
		background-color 280ms ease,
		border-color     280ms ease,
		color            200ms ease,
		box-shadow       280ms ease;
}

@media (prefers-reduced-motion: reduce) {
	html.theme-transitions-enabled,
	html.theme-transitions-enabled body,
	html.theme-transitions-enabled .an-header,
	html.theme-transitions-enabled .an-footer,
	html.theme-transitions-enabled .an-cta-band,
	html.theme-transitions-enabled .an-plan,
	html.theme-transitions-enabled .an-faq__item,
	html.theme-transitions-enabled .an-compare-wrap,
	html.theme-transitions-enabled .an-compare th,
	html.theme-transitions-enabled .an-compare td,
	html.theme-transitions-enabled .an-compare thead th,
	html.theme-transitions-enabled .an-join__hero,
	html.theme-transitions-enabled .an-join__plans,
	html.theme-transitions-enabled .an-join__compare,
	html.theme-transitions-enabled .an-join__faq {
		transition: none !important;
	}
}

h1, h2, h3, h4 {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--starter-heading);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 0.5em;
}
h5, h6 {
	font-family: 'Inter', system-ui, sans-serif;
	color: var(--starter-heading);
	font-weight: 600;
	margin: 0 0 0.5em;
}
h1 { font-size: clamp( 36px, 4vw, 56px ); }
h2 { font-size: clamp( 28px, 3vw, 40px ); }
h3 { font-size: clamp( 22px, 2.2vw, 30px ); }
h4 { font-size: clamp( 18px, 1.8vw, 22px ); }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p { margin: 0 0 1em; }

a {
	color: var(--starter-link);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover { color: var(--starter-link-hover); }

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

/* ─── Accessibility ─── */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px; overflow: hidden;
	padding: 0; position: absolute !important;
	word-wrap: normal !important;
}

.an-skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	padding: 8px 16px;
	background: var(--starter-accent);
	color: #fff;
	font-weight: 600;
	z-index: 10000;
}
.an-skip-link:focus { top: 0; }

/* ─── Main content wrapper ─── */
.an-main {
	/* No min-height — the CTA band + footer give the page enough
	   vertical weight, and forcing a min-height creates an awkward
	   empty white strip between page content and the footer band on
	   pages whose content is shorter than 60vh. */
}

/* ─── Container ─── */
.an-container {
	width: 100%;
	max-width: var(--an-container-max);   /* 1280px */
	margin: 0 auto;
	padding: 0 var(--an-container-pad);
}
.an-container--narrow {
	max-width: var(--an-container-narrow);
}
@media (max-width: 1024px) { .an-container { padding: 0 var(--an-container-pad-md); } }
@media (max-width: 640px)  { .an-container { padding: 0 var(--an-container-pad-sm); } }

/* ─── Buttons ─── */
.an-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--an-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--an-trans-base), border-color var(--an-trans-base), color var(--an-trans-base), transform 0.08s ease, box-shadow var(--an-trans-base);
	white-space: nowrap;
	text-decoration: none;
}
.an-btn:active { transform: translateY(1px); }

.an-btn--primary {
	background: #E11D2E;              /* hardcoded — brand red, don't invert */
	color: #FFFFFF;
	border-color: #E11D2E;
	padding: 11px 22px;
	border-radius: var(--an-radius-sm);
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(225, 29, 46, 0.25);
}
.an-btn--primary:hover {
	background: #C71828;
	border-color: #C71828;
	color: #FFFFFF;
	box-shadow: 0 4px 12px rgba(225, 29, 46, 0.35);
}
.an-btn--primary .an-btn__icon {
	width: 14px; height: 14px;
}
.an-btn--primary .an-btn__icon svg {
	stroke-width: 2.5;
}

.an-btn--outline {
	background: transparent;
	color: #FFFFFF;
	border-color: rgba(255,255,255,0.5);
}
.an-btn--outline:hover {
	background: rgba(255,255,255,0.08);
	border-color: #FFFFFF;
	color: #FFFFFF;
}

.an-btn--ghost {
	background: transparent;
	color: var(--starter-text);
	border-color: transparent;
}
.an-btn--ghost:hover {
	background: var(--starter-bg-secondary);
}

.an-btn--sm {
	padding: 8px 14px;
	font-size: 13px;
	gap: 6px;
}

.an-btn--full {
	width: 100%;
}

.an-btn__icon {
	display: inline-flex;
	width: 16px; height: 16px;
}
.an-btn__icon svg {
	width: 100%; height: 100%;
}

/* ─── Responsive visibility ─── */
/* Default state: desktop-only is flex/block, mobile-only is hidden. */
.an-mobile-only  { display: none !important; }
.an-desktop-only { display: flex; }

@media (max-width: 1024px) {
	.an-desktop-only { display: none !important; }
	.an-mobile-only  { display: flex !important; }
}

/* ─── Simple body lock when drawer open ─── */
body.an-drawer-open {
	overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════
   Google Places Autocomplete dropdown — themed across every page that
   loads the Places library (homepage hero, find-a-notary, dashboard
   profile, checkout). Google injects `.pac-container` into <body>, so
   these rules need to live in main.css to apply everywhere.
   ════════════════════════════════════════════════════════════════════════ */
.pac-container {
	margin-top: 12px;
	padding: 6px;
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	border-radius: var(--an-radius-md);
	box-shadow: 0 18px 48px rgba(40, 40, 40, 0.22);
	font-family: 'Inter', system-ui, sans-serif;
	z-index: 1001;
	overflow: hidden;
}
/* Hide the default thin separator under the container (browser-painted). */
.pac-container::after { display: none !important; }

.pac-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-top: 0;
	border-radius: var(--an-radius-sm);
	cursor: pointer;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	color: #1E2433;
	line-height: 1.35;
	transition: background var(--an-trans-base), color var(--an-trans-base);
}
.pac-item + .pac-item { margin-top: 2px; }
.pac-item:hover,
.pac-item-selected {
	background: rgba(225, 29, 46, 0.08);
	color: #1E2433;
}

/* Replace the default pin glyph with a brand-coloured circular pin. */
.pac-icon,
.pac-item .pac-icon-marker {
	width: 30px;
	height: 30px;
	margin: 0;
	flex-shrink: 0;
	background-color: rgba(225, 29, 46, 0.10);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E11D2E'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	border-radius: 50%;
}

/* Main place name — strong weight, brand-dark. */
.pac-item .pac-item-query {
	padding-right: 4px;
	font-size: 14px;
	font-weight: 600;
	color: #1E2433;
}
.pac-matched { font-weight: 700; color: #0F1729; }

/* Trailing region/state/country text — muted. */
.pac-item > span:not(.pac-item-query):not(.pac-matched) {
	color: #5A6477;
	font-size: 12.5px;
	font-weight: 400;
}

/* "Powered by Google" footer — let it breathe and tone it down. */
.pac-logo:after {
	margin: 8px 14px 6px;
	opacity: 0.55;
	background-position-x: left;
}

/* Dark-mode overrides — match the rest of the theme. */
[data-theme="dark"] .pac-container {
	background: var(--an-card, #1F2530);
	border-color: var(--an-border, rgba(255, 255, 255, 0.10));
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
}
[data-theme="dark"] .pac-item              { color: var(--an-heading, #FFFFFF); }
[data-theme="dark"] .pac-item:hover,
[data-theme="dark"] .pac-item-selected     { background: rgba(225, 29, 46, 0.16); }
[data-theme="dark"] .pac-item .pac-item-query { color: var(--an-heading, #FFFFFF); }
[data-theme="dark"] .pac-matched           { color: #FFFFFF; }
[data-theme="dark"] .pac-item > span:not(.pac-item-query):not(.pac-matched) {
	color: var(--an-text-muted, rgba(255, 255, 255, 0.65));
}