/*
Theme Name: Custom Auto Theme
Author: System
Version: 1.0
*/

html {scroll-behavior: smooth;}
html, body {overflow-x:hidden;}
a {display: inline-block; text-align: center;}

:root {
  --clr-bg: #faf8f4;
  --clr-surface: #ffffff;
  --clr-ink: #1a1a2e;
  --clr-ink-light: #4a4a5a;
  --clr-accent: #c49a6c;
  --clr-accent-dark: #a07848;
  --clr-divider: #d4c5b0;
  --clr-muted: #8a8a9a;
  --clr-highlight: #f5efe6;
  --clr-footer: #1a1a2e;
  --clr-footer-text: #d4c5b0;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Serif 4', 'Noto Serif', Georgia, serif;
  --font-ui: 'DM Sans', 'Segoe UI', sans-serif;
  --max-w: 780px;
  --max-w-wide: 1100px;
  --radius: 6px;
  --shadow-card: 0 2px 16px rgba(26,26,46,0.07);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=DM+Sans:wght@400;500;700&display=swap');

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

body {
  font-family: var(--font-body);
  background: var(--clr-bg);
  color: var(--clr-ink);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img {max-width:100%;height:auto;display:block;border-radius:var(--radius);}

/* ---------- HEADER / NAV ---------- */
.site-header {
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-divider);
  padding: 0.8rem 1.5rem;
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.92);
}
.site-header-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.site-logo {
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight: 900;
  color: var(--clr-ink);
  text-decoration: none; letter-spacing: -0.5px;
}
.site-logo span { color: var(--clr-accent); }
.site-nav { display:flex; gap:1.2rem; align-items:center; }
.site-nav a {
  font-family: var(--font-ui); font-size: 0.85rem;
  color: var(--clr-ink-light); text-decoration: none;
  text-transform: uppercase; letter-spacing: 1.2px; font-weight: 500;
  transition: color var(--transition);
  padding: 0.3rem 0;
  position: relative;
}
.site-nav a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:2px; background:var(--clr-accent);
  transition: width var(--transition);
}
.site-nav a:hover { color: var(--clr-accent); }
.site-nav a:hover::after { width:100%; }

.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:0.5rem; }
.nav-toggle span {
  display:block; width:22px; height:2px; background:var(--clr-ink);
  margin:5px 0; transition: var(--transition);
}

@media(max-width:768px){
  .nav-toggle { display:block; }
  .site-nav {
    position:fixed; top:0; right:-100%; width:70vw; height:100vh;
    background:var(--clr-surface); flex-direction:column;
    padding:5rem 2rem 2rem; gap:1.5rem;
    box-shadow: -4px 0 24px rgba(0,0,0,0.1);
    transition: right var(--transition); z-index:200;
  }
  .site-nav.open { right:0; }
  .site-nav a { font-size:1rem; text-align:left; }
  .nav-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.3);
    z-index:199; display:none;
  }
  .nav-overlay.show { display:block; }
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb {
  max-width: var(--max-w);
  margin: 1.5rem auto 0; padding: 0 1.5rem;
  font-family: var(--font-ui); font-size: 0.8rem;
  color: var(--clr-muted);
}
.breadcrumb a { color: var(--clr-muted); text-decoration:none; text-align:left; }
.breadcrumb a:hover { color: var(--clr-accent); }
.breadcrumb .sep { margin: 0 0.4rem; }

/* ---------- ARTICLE ---------- */
.article-container {
  max-width: var(--max-w);
  margin: 0 auto; padding: 0 1.5rem 3rem;
}
.article-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900; line-height: 1.15;
  margin: 1.5rem 0 1rem; color: var(--clr-ink);
  letter-spacing: -1px;
}
.article-meta {
  display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap;
  font-family: var(--font-ui); font-size: 0.82rem;
  color: var(--clr-muted); margin-bottom: 1.5rem;
}
.article-meta .tag {
  background: var(--clr-highlight); color: var(--clr-accent-dark);
  padding: 0.2rem 0.7rem; border-radius: 50px; font-weight:500;
}

/* TOC */
.toc {
  background: var(--clr-highlight);
  border-left: 3px solid var(--clr-accent);
  padding: 1.2rem 1.5rem; margin: 1.5rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.toc-title {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight:700;
  margin-bottom: 0.6rem; color: var(--clr-ink);
}
.toc ol { padding-left:1.2rem; }
.toc li { margin:0.3rem 0; }
.toc a {
  font-family: var(--font-ui); font-size:0.9rem;
  color: var(--clr-ink-light); text-decoration:none; text-align:left;
  transition: color var(--transition);
}
.toc a:hover { color: var(--clr-accent); }

/* Reading time widget */
.reading-widget {
  display: inline-flex; align-items:center; gap:0.5rem;
  background: var(--clr-ink); color: var(--clr-bg);
  padding: 0.5rem 1.2rem; border-radius: 50px;
  font-family: var(--font-ui); font-size:0.82rem; font-weight:500;
  margin-bottom: 2rem;
}
.reading-widget svg { width:16px; height:16px; fill:var(--clr-accent); }

/* Article body */
.article-body h2 {
  font-family: var(--font-display);
  font-size: 1.6rem; font-weight:700;
  margin: 2.5rem 0 0.8rem; color: var(--clr-ink);
  padding-top: 1rem;
  border-top: 1px solid var(--clr-divider);
}
.article-body h3 {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight:700;
  margin: 1.8rem 0 0.6rem; color: var(--clr-ink);
}
.article-body p { margin-bottom:1.2rem; color: var(--clr-ink-light); }
.article-body ul, .article-body ol {
  margin: 0.8rem 0 1.2rem 1.5rem;
  color: var(--clr-ink-light);
}
.article-body li { margin-bottom:0.4rem; }
.article-body .img-wrap {
  margin: 2rem 0; position:relative;
}
.article-body .img-wrap figcaption {
  font-family:var(--font-ui); font-size:0.8rem;
  color:var(--clr-muted); margin-top:0.5rem; text-align:center; font-style:italic;
}

/* Pull quote */
.pull-quote {
  border-left: 4px solid var(--clr-accent);
  padding: 1.2rem 1.5rem;
  margin: 2rem 0;
  background: var(--clr-highlight);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display);
  font-size: 1.15rem; font-style:italic;
  color: var(--clr-ink); line-height:1.6;
}
.pull-quote cite {
  display:block; margin-top:0.6rem;
  font-size:0.85rem; font-style:normal;
  color: var(--clr-muted); font-family:var(--font-ui);
}

/* Dividers */
.editorial-divider {
  border: none; border-top: 1px solid var(--clr-divider);
  margin: 2.5rem 0;
}
.editorial-divider.accent {
  border-top: 2px solid var(--clr-accent); width:60px;
}

/* Life story block */
.life-story {
  background: var(--clr-surface);
  border: 1px solid var(--clr-divider);
  border-radius: var(--radius);
  padding: 1.8rem; margin: 2.5rem 0;
  box-shadow: var(--shadow-card);
  position:relative;
}
.life-story::before {
  content:'\201C'; font-family:var(--font-display);
  font-size:4rem; color:var(--clr-accent);
  position:absolute; top:-0.2rem; left:1rem; line-height:1;
}
.life-story-label {
  font-family:var(--font-ui); font-size:0.75rem;
  text-transform:uppercase; letter-spacing:1.5px;
  color:var(--clr-accent-dark); font-weight:700;
  margin-bottom:0.8rem;
}
.life-story p { color:var(--clr-ink-light); font-style:italic; }

/* Read also */
.read-also {
  margin: 2.5rem 0;
}
.read-also-title {
  font-family:var(--font-display); font-size:1.3rem; font-weight:700;
  margin-bottom:1rem; color:var(--clr-ink);
}
.read-also-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:1rem;
}
.read-also-card {
  background:var(--clr-surface);
  border:1px solid var(--clr-divider);
  border-radius:var(--radius);
  padding:1.2rem; text-decoration:none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.read-also-card:hover {
  transform:translateY(-3px);
  box-shadow: var(--shadow-card);
}
.read-also-card .card-cat {
  font-family:var(--font-ui); font-size:0.7rem;
  text-transform:uppercase; letter-spacing:1.2px;
  color:var(--clr-accent-dark); font-weight:700;
}
.read-also-card .card-title {
  font-family:var(--font-display); font-size:1rem; font-weight:700;
  color:var(--clr-ink); margin:0.4rem 0 0.3rem; text-align:left;
  line-height:1.3;
}
.read-also-card .card-time {
  font-family:var(--font-ui); font-size:0.75rem; color:var(--clr-muted);
}

/* Subscribe */
.subscribe-section {
  background: var(--clr-ink);
  color: var(--clr-bg);
  padding: 2.5rem; border-radius: var(--radius);
  margin: 2.5rem 0;
  text-align:center;
}
.subscribe-section h3 {
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:700; margin-bottom:0.5rem;
  color: var(--clr-bg);
}
.subscribe-section p {
  font-family:var(--font-ui); font-size:0.9rem;
  color: var(--clr-footer-text); margin-bottom:1.2rem;
}
.subscribe-form {
  display:flex; gap:0.6rem; max-width:420px; margin:0 auto;
  flex-wrap:wrap; justify-content:center;
}
.subscribe-form input[type="email"] {
  flex:1; min-width:200px; padding:0.7rem 1rem;
  border:1px solid var(--clr-muted); border-radius:var(--radius);
  font-family:var(--font-ui); font-size:0.9rem;
  background:rgba(255,255,255,0.08); color:var(--clr-bg);
}
.subscribe-form input[type="email"]::placeholder { color:var(--clr-muted); }
.subscribe-form button {
  padding:0.7rem 1.8rem; background:var(--clr-accent);
  color:var(--clr-ink); border:none; border-radius:var(--radius);
  font-family:var(--font-ui); font-size:0.9rem; font-weight:700;
  cursor:pointer; transition: background var(--transition);
  text-transform:uppercase; letter-spacing:0.8px;
}
.subscribe-form button:hover { background:var(--clr-accent-dark); color:#fff; }

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--clr-footer);
  color: var(--clr-footer-text);
  padding: 3rem 1.5rem 1.5rem;
  margin-top: 3rem;
}
.footer-inner {
  max-width: var(--max-w-wide);
  margin:0 auto;
}
.footer-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:2rem; margin-bottom:2rem;
}
.footer-brand .footer-logo {
  font-family:var(--font-display); font-size:1.4rem; font-weight:900;
  color:#fff; text-decoration:none;
}
.footer-brand .footer-logo span { color:var(--clr-accent); }
.footer-brand p {
  font-family:var(--font-ui); font-size:0.8rem;
  color:var(--clr-muted); margin-top:0.5rem; max-width:280px; text-align:left;
}
.footer-links { display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-links a {
  font-family:var(--font-ui); font-size:0.82rem;
  color:var(--clr-footer-text); text-decoration:none;
  transition: color var(--transition);
}
.footer-links a:hover { color:var(--clr-accent); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:1rem;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:0.5rem;
}
.footer-bottom small {
  font-family:var(--font-ui); font-size:0.75rem; color:var(--clr-muted);
}
.footer-disclaimer {
  font-family:var(--font-ui); font-size:0.72rem;
  color:var(--clr-muted); margin-top:1rem;
  line-height:1.5; max-width:600px;
}

/* ---------- COOKIE MODAL ---------- */
.cookie-modal {
  position:fixed; bottom:1.5rem; right:1.5rem;
  background:var(--clr-surface);
  border:1px solid var(--clr-divider);
  border-radius:var(--radius);
  padding:1.5rem; max-width:360px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index:1000; font-family:var(--font-ui);
  animation: slideUp 0.4s ease-out;
}
@keyframes slideUp {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}
.cookie-modal h4 {
  font-family:var(--font-display); font-size:1.1rem;
  margin-bottom:0.5rem; color:var(--clr-ink);
}
.cookie-modal p { font-size:0.82rem; color:var(--clr-ink-light); margin-bottom:1rem; line-height:1.5; }
.cookie-modal .cookie-btns { display:flex; gap:0.6rem; }
.cookie-modal .cookie-btns button {
  flex:1; padding:0.5rem 1rem; border-radius:var(--radius);
  font-family:var(--font-ui); font-size:0.82rem; font-weight:600;
  cursor:pointer; transition: var(--transition); border:none;
}
.cookie-modal .btn-accept {
  background:var(--clr-accent); color:#fff;
}
.cookie-modal .btn-accept:hover { background:var(--clr-accent-dark); }
.cookie-modal .btn-decline {
  background:transparent; color:var(--clr-ink-light);
  border:1px solid var(--clr-divider) !important;
}
.cookie-modal .btn-decline:hover { background:var(--clr-highlight); }
.cookie-hidden { display:none !important; }

/* ---------- POLICY / LEGAL PAGES ---------- */
.legal-container {
  max-width: var(--max-w);
  margin: 0 auto; padding: 2rem 1.5rem 3rem;
}
.legal-container h1 {
  font-family:var(--font-display); font-size:2.2rem; font-weight:900;
  margin-bottom:1.5rem; color:var(--clr-ink);
}
.legal-container h2 {
  font-family:var(--font-display); font-size:1.3rem; font-weight:700;
  margin:2rem 0 0.8rem; color:var(--clr-ink);
  padding-top:1rem; border-top:1px solid var(--clr-divider);
}
.legal-container p {
  margin-bottom:1rem; color:var(--clr-ink-light);
}

/* ---------- SUCCESS PAGE ---------- */
.success-page {
  min-height:60vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:3rem 1.5rem;
}
.success-page h1 {
  font-family:var(--font-display); font-size:clamp(2.5rem,6vw,4rem);
  font-weight:900; color:var(--clr-ink); margin-bottom:0.8rem;
}
.success-page p {
  font-family:var(--font-ui); font-size:1.1rem;
  color:var(--clr-muted); margin-bottom:2rem;
}
.success-page .btn-home {
  display:inline-block; padding:0.8rem 2.5rem;
  background:var(--clr-accent); color:#fff;
  border-radius:var(--radius); text-decoration:none;
  font-family:var(--font-ui); font-weight:700; font-size:0.95rem;
  transition: background var(--transition);
}
.success-page .btn-home:hover { background:var(--clr-accent-dark); }

/* ---------- 404 ---------- */
.page-404 {
  min-height:70vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:3rem 1.5rem;
}
.page-404 .big-num {
  font-family:var(--font-display); font-size:clamp(6rem,15vw,12rem);
  font-weight:900; color:var(--clr-accent);
  line-height:1; letter-spacing:-4px;
}
.page-404 h1 {
  font-family:var(--font-display); font-size:1.6rem;
  color:var(--clr-ink); margin:1rem 0 0.5rem;
}
.page-404 p {
  font-family:var(--font-ui); color:var(--clr-muted);
  margin-bottom:2rem;
}
.page-404 .btn-home {
  display:inline-block; padding:0.8rem 2.5rem;
  background:var(--clr-ink); color:var(--clr-bg);
  border-radius:var(--radius); text-decoration:none;
  font-family:var(--font-ui); font-weight:700;
  transition: background var(--transition);
}
.page-404 .btn-home:hover { background:var(--clr-accent); }

/* ---------- HOME HERO ---------- */
.home-hero {
  max-width: var(--max-w-wide);
  margin: 2rem auto 0; padding: 0 1.5rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  align-items: center;
}
.home-hero-text .overline {
  font-family:var(--font-ui); font-size:0.75rem;
  text-transform:uppercase; letter-spacing:2px;
  color:var(--clr-accent-dark); font-weight:700;
  margin-bottom:0.5rem; display:block; text-align:left;
}
.home-hero-text h1 {
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:900; line-height:1.12; color:var(--clr-ink);
  margin-bottom:1rem;
}
.home-hero-text p {
  font-family:var(--font-body); font-size:1rem;
  color:var(--clr-ink-light); line-height:1.7;
}
.home-hero-img { border-radius:var(--radius); overflow:hidden; }
.home-hero-img img {
  width:100%; aspect-ratio:4/3; object-fit:cover;
}
@media(max-width:768px){
  .home-hero { grid-template-columns:1fr; }
}

/* ---------- ANIMATIONS ---------- */
.fade-in {
  opacity:0; transform:translateY(16px);
  animation: fadeInUp 0.6s ease-out forwards;
}
@keyframes fadeInUp {
  to { opacity:1; transform:translateY(0); }
}
.delay-1 { animation-delay:0.1s; }
.delay-2 { animation-delay:0.2s; }
.delay-3 { animation-delay:0.3s; }