/*
Theme Name:  Take Us to Main Street
Theme URI:   https://takeustomainstreet.com
Author:      Take Us to Main Street
Description: Custom theme for takeustomainstreet.com — Disney and theme park travel advisory.
Version:     1.0
License:     Private
Text Domain: tutms
*/

/* ============================================================
   FONT FACES
   ============================================================ */

/* Raleway — variable font (covers all weights 100–900) */
@font-face {
	font-family: 'Raleway';
	src: url('assets/fonts/Raleway-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Raleway';
	src: url('assets/fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* Mouse Memoirs */
@font-face {
	font-family: 'Mouse Memoirs';
	src: url('assets/fonts/MouseMemoirs-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* VVDS Dickens Tale (logo use only) */
@font-face {
	font-family: 'VVDS Dickens Tale';
	src: url('assets/fonts/VVDSDickensTale-BoldCut.woff2') format('woff2'),
	     url('assets/fonts/VVDSDickensTale-BoldCut.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* VVDS Hickory Dickory (accent use) */
@font-face {
	font-family: 'VVDS Hickory Dickory';
	src: url('assets/fonts/VVDSHickoryDickory-Normal.woff2') format('woff2'),
	     url('assets/fonts/VVDSHickoryDickory-Normal.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'VVDS Hickory Dickory';
	src: url('assets/fonts/VVDSHickoryDickory-Italic.woff2') format('woff2'),
	     url('assets/fonts/VVDSHickoryDickory-Italic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
	/* Brand colors */
	--color-plum:       #9e408c;
	--color-red:        #e14757;
	--color-blue:       #35489c;
	--color-gold:       #f9a825;
	--color-blush:      #f6dbd8;
	--color-dark-rose:  #b8504d;
	--color-coral:      #d6675e;
	--color-slate-navy: #3d4b6d;

	/* Semantic aliases */
	--color-heading:    var(--color-plum);
	--color-body-text:  var(--color-slate-navy);
	--color-action:     var(--color-red);
	--color-bg-page:    var(--color-blush);
	--color-bg-depth:   var(--color-blue);
	--color-footer-bg:  var(--color-dark-rose);

	/* Typography */
	--font-heading:  'Raleway', sans-serif;
	--font-body:     'Raleway', sans-serif;
	--font-accent:   'Mouse Memoirs', sans-serif;
	--font-logo:     'VVDS Dickens Tale', serif;

	--font-weight-regular: 400;
	--font-weight-bold:    700;

	/* Type scale */
	--text-xs:   0.75rem;   /* 12px */
	--text-sm:   0.875rem;  /* 14px */
	--text-base: 1rem;      /* 16px */
	--text-lg:   1.125rem;  /* 18px */
	--text-xl:   1.25rem;   /* 20px */
	--text-2xl:  1.5rem;    /* 24px */
	--text-3xl:  1.875rem;  /* 30px */
	--text-4xl:  2.25rem;   /* 36px */
	--text-5xl:  3rem;      /* 48px */

	/* Spacing */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Layout */
	--container-max: 1200px;
	--container-pad: var(--space-6);

	/* Breakpoints (reference only — use in media queries) */
	/* mobile:  375px  */
	/* tablet:  768px  */
	/* desktop: 1200px */

	/* Borders */
	--radius-sm:  4px;
	--radius-md:  8px;
	--radius-lg:  16px;
	--radius-full: 9999px;

	/* Touch targets */
	--touch-target: 44px;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(61, 75, 109, 0.12);
	--shadow-md: 0 4px 12px rgba(61, 75, 109, 0.15);
	--shadow-lg: 0 8px 24px rgba(61, 75, 109, 0.2);
}

/* ============================================================
   RESET / BASE
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	font-weight: var(--font-weight-regular);
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--color-body-text);
	background-color: #fff;
}

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

a {
	color: var(--color-action);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover,
a:focus {
	color: var(--color-plum);
}

a:focus-visible {
	outline: 2px solid var(--color-action);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

ul,
ol {
	list-style: none;
}

button {
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	color: var(--color-heading);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

@media (max-width: 767px) {
	h1 { font-size: var(--text-3xl); }
	h2 { font-size: var(--text-2xl); }
	h3 { font-size: var(--text-xl); }
}

p {
	margin-bottom: var(--space-4);
}

p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.site-main {
	min-height: 60vh;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--touch-target);
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-heading);
	font-weight: var(--font-weight-bold);
	font-size: var(--text-base);
	line-height: 1;
	border-radius: var(--radius-md);
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
	text-decoration: none;
}

.btn-primary {
	background-color: var(--color-action);
	color: #fff;
	border: 2px solid var(--color-action);
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--color-dark-rose);
	border-color: var(--color-dark-rose);
	color: #fff;
}

.btn-outline {
	background-color: transparent;
	color: var(--color-action);
	border: 2px solid var(--color-action);
}

.btn-outline:hover,
.btn-outline:focus {
	background-color: var(--color-action);
	color: #fff;
}

.btn-ghost {
	background-color: transparent;
	color: #fff;
	border: 2px solid #fff;
}

.btn-ghost:hover,
.btn-ghost:focus {
	background-color: #fff;
	color: var(--color-plum);
}

/* Muted ghost — secondary action on dark backgrounds */
.btn-ghost-muted {
	background-color: transparent;
	color: rgba(255, 255, 255, 0.85);
	border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-ghost-muted:hover,
.btn-ghost-muted:focus {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.8);
	color: #fff;
}

/* ============================================================
   SCREEN READER ONLY
   ============================================================ */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   SKIP LINK
   ============================================================ */

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-4);
	z-index: 9999;
	padding: var(--space-2) var(--space-4);
	background: var(--color-plum);
	color: #fff;
	border-radius: var(--radius-md);
	font-weight: var(--font-weight-bold);
}

.skip-link:focus {
	top: var(--space-4);
}

/* ============================================================
   SECTION SPACING
   ============================================================ */

.section {
	padding-block: var(--space-16);
}

.section--sm {
	padding-block: var(--space-8);
}

.section--lg {
	padding-block: var(--space-24);
}

/* ============================================================
   SECTION BACKGROUNDS
   ============================================================ */

.bg-plum      { background-color: var(--color-plum); color: #fff; }
.bg-blue      { background-color: var(--color-blue); color: #fff; }
.bg-blush     { background-color: var(--color-blush); }
.bg-dark-rose { background-color: var(--color-dark-rose); color: #fff; }
.bg-coral     { background-color: var(--color-coral); color: #fff; }
.bg-white     { background-color: #fff; }

.bg-plum h1, .bg-plum h2, .bg-plum h3,
.bg-blue h1, .bg-blue h2, .bg-blue h3,
.bg-dark-rose h1, .bg-dark-rose h2, .bg-dark-rose h3,
.bg-coral h1, .bg-coral h2, .bg-coral h3 {
	color: #fff;
}

/* ============================================================
   AD ZONE PLACEHOLDERS (R5)
   ============================================================ */

.ad-zone {
	/* Named empty placeholder — ad content dropped in here later */
	display: block;
	width: 100%;
}