/*
Theme Name: Custom Auto Theme
Author: System
Version: 1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=DM+Sans:wght@300;400;500;700&display=swap');

:root {
  --apricot: #FBCEB1;
  --apricot-soft: #FDE8D0;
  --apricot-deep: #F4A261;
  --yellow-warm: #FFD166;
  --yellow-pale: #FFF3CD;
  --graphite: #2D2D2D;
  --graphite-light: #5A5A5A;
  --graphite-muted: #8A8A8A;
  --white: #FFFFFF;
  --cream: #FFFAF3;
  --cream-dark: #FFF0DE;
  --accent: #E07A5F;
  --accent-soft: #F2A58D;
  --green-soft: #A8C686;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 4px 24px rgba(45,45,45,0.08);
  --shadow-lg: 0 8px 40px rgba(45,45,45,0.12);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

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

html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family:'DM Sans',sans-serif;
  color:var(--graphite);
  background:var(--cream);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4 {
  font-family:'Playfair Display',Georgia,serif;
  line-height:1.2;
  letter-spacing:-0.02em;
}

a { color:var(--accent); text-decoration:none; transition:var(--transition); }
a:hover { color:var(--graphite); }

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

/* ── HEADER ── */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(255,250,243,0.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(244,162,97,0.15);
  padding:0.75rem 1.5rem;
}
.header-inner {
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
}
.site-logo {
  font-family:'Playfair Display',serif;
  font-size:1.75rem; font-weight:900;
  color:var(--graphite);
  text-decoration:none;
}
.site-logo span { color:var(--accent); }
.nav-links { display:flex; gap:1.5rem; list-style:none; align-items:center; }
.nav-links a {
  font-size:0.9rem; font-weight:500; color:var(--graphite-light);
  text-transform:uppercase; letter-spacing:0.05em;
  padding:0.25rem 0; border-bottom:2px solid transparent;
  transition:var(--transition);
}
.nav-links a:hover { color:var(--graphite); border-color:var(--apricot-deep); }
.burger { display:none; background:none; border:none; cursor:pointer; padding:0.5rem; }
.burger svg { width:28px; height:28px; stroke:var(--graphite); }

@media(max-width:768px) {
  .nav-links { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--cream); padding:1.5rem; gap:1rem; border-bottom:2px solid var(--apricot); }
  .nav-links.open { display:flex; }
  .burger { display:block; }
}

/* ── HERO ── */
.hero-article {
  background:linear-gradient(165deg, var(--apricot-soft) 0%, var(--yellow-pale) 40%, var(--cream) 100%);
  padding:3rem 1.5rem 2rem;
}
.hero-article-inner {
  max-width:1280px; margin:0 auto;
}
.hero-category {
  display:inline-block;
  font-size:0.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--accent);
  background:rgba(224,122,95,0.12);
  padding:0.35rem 1rem; border-radius:50px;
  margin-bottom:1.5rem;
}
.hero-article h1 {
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:900; color:var(--graphite);
  max-width:800px; margin-bottom:1rem;
}
.hero-article h1 em {
  font-style:italic; color:var(--accent);
}
.hero-subtitle {
  font-size:1.15rem; color:var(--graphite-light);
  max-width:640px; margin-bottom:1.5rem; line-height:1.8;
}
.hero-meta {
  display:flex; gap:1.5rem; align-items:center;
  font-size:0.85rem; color:var(--graphite-muted);
  padding-top:1rem; border-top:1px solid rgba(244,162,97,0.2);
}
.hero-meta span { display:flex; align-items:center; gap:0.35rem; }

/* ── MAIN LAYOUT ── */
.main-content {
  max-width:1280px; margin:0 auto; padding:2.5rem 1.5rem;
  display:grid;
  grid-template-columns:1fr 300px;
  gap:3rem;
}
@media(max-width:960px) {
  .main-content { grid-template-columns:1fr; }
}

/* ── ARTICLE BODY ── */
.article-body h2 {
  font-size:1.75rem; margin:2.5rem 0 1rem;
  padding-bottom:0.5rem;
  border-bottom:2px solid var(--apricot);
}
.article-body h3 {
  font-size:1.3rem; margin:2rem 0 0.75rem;
  color:var(--accent);
}
.article-body p {
  margin-bottom:1.25rem; font-size:1rem; color:var(--graphite-light);
}

/* ── SEPARATOR ── */
.sep {
  border:none; height:1px;
  background:linear-gradient(90deg, transparent, var(--apricot-deep), transparent);
  margin:2.5rem 0;
}

/* ── HIGHLIGHT BOX ── */
.highlight-box {
  background:linear-gradient(135deg, var(--apricot-soft), var(--yellow-pale));
  border-left:4px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.5rem 1.75rem;
  margin:2rem 0;
  font-size:0.95rem;
}
.highlight-box strong { color:var(--accent); }

/* ── QUOTE ── */
.pull-quote {
  position:relative;
  padding:2rem 2rem 2rem 3rem;
  margin:2.5rem 0;
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.pull-quote::before {
  content:'\201C'; position:absolute; top:0.5rem; left:1rem;
  font-family:'Playfair Display',serif;
  font-size:4rem; color:var(--apricot-deep); line-height:1;
}
.pull-quote p {
  font-family:'Playfair Display',serif;
  font-size:1.15rem; font-style:italic;
  color:var(--graphite); margin-bottom:0.5rem;
}
.pull-quote cite {
  font-family:'DM Sans',sans-serif;
  font-style:normal; font-size:0.85rem;
  color:var(--graphite-muted);
}

/* ── CARDS GRID ── */
.cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1.25rem; margin:2rem 0;
}
.tip-card {
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  box-shadow:var(--shadow);
  border-top:3px solid var(--apricot);
  transition:var(--transition);
}
.tip-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.tip-card .card-icon {
  font-size:2rem; margin-bottom:0.75rem;
}
.tip-card h4 {
  font-size:1.1rem; margin-bottom:0.5rem;
}
.tip-card p {
  font-size:0.9rem; color:var(--graphite-light);
}

/* ── NUMBERED LIST ── */
.numbered-steps { counter-reset:steps; margin:2rem 0; }
.step-item {
  counter-increment:steps;
  display:flex; gap:1.25rem;
  padding:1.25rem 0;
  border-bottom:1px solid rgba(244,162,97,0.15);
}
.step-item::before {
  content:counter(steps);
  flex-shrink:0;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--apricot), var(--yellow-warm));
  border-radius:50%;
  font-family:'Playfair Display',serif;
  font-size:1.1rem; font-weight:700;
  color:var(--graphite);
}
.step-item div h4 { font-size:1rem; margin-bottom:0.25rem; }
.step-item div p { font-size:0.9rem; color:var(--graphite-light); margin:0; }

/* ── SIDEBAR / RAIL ── */
.sidebar { position:sticky; top:5rem; align-self:start; }
.sidebar-block {
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  margin-bottom:1.5rem;
  box-shadow:var(--shadow);
}
.sidebar-block h3 {
  font-size:1.1rem; margin-bottom:1rem;
  padding-bottom:0.5rem;
  border-bottom:2px solid var(--apricot);
  color:var(--graphite);
}
.sidebar-tip {
  padding:0.75rem 0;
  border-bottom:1px solid rgba(244,162,97,0.1);
  font-size:0.88rem; color:var(--graphite-light);
}
.sidebar-tip:last-child { border-bottom:none; }
.sidebar-tip strong { color:var(--accent); display:block; margin-bottom:0.15rem; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; }

/* ── NEWSLETTER ── */
.newsletter-section {
  background:linear-gradient(135deg, var(--apricot), var(--yellow-warm));
  border-radius:var(--radius-lg);
  padding:3rem 2rem;
  text-align:center;
  margin:3rem 0;
}
.newsletter-section h2 {
  color:var(--graphite); margin-bottom:0.75rem;
}
.newsletter-section p {
  color:var(--graphite-light); margin-bottom:1.5rem; max-width:500px; margin-left:auto; margin-right:auto;
}
.newsletter-form {
  display:flex; gap:0.75rem;
  max-width:460px; margin:0 auto;
}
.newsletter-form input[type='email'] {
  flex:1; padding:0.85rem 1.25rem;
  border:2px solid rgba(45,45,45,0.1);
  border-radius:50px;
  font-family:'DM Sans',sans-serif;
  font-size:0.95rem;
  background:var(--white);
  outline:none;
  transition:var(--transition);
}
.newsletter-form input[type='email']:focus {
  border-color:var(--accent);
}
.newsletter-form button {
  padding:0.85rem 2rem;
  background:var(--graphite);
  color:var(--white);
  border:none;
  border-radius:50px;
  font-family:'DM Sans',sans-serif;
  font-size:0.95rem;
  font-weight:700;
  cursor:pointer;
  transition:var(--transition);
  min-width:44px; min-height:44px;
}
.newsletter-form button:hover {
  background:var(--accent);
}
@media(max-width:480px) {
  .newsletter-form { flex-direction:column; }
}

/* ── IMAGE BLOCK ── */
.article-image {
  margin:2rem 0; position:relative; overflow:hidden;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
.article-image img { width:100%; display:block; }
.image-caption {
  font-size:0.8rem; color:var(--graphite-muted);
  text-align:center; padding:0.75rem;
  background:var(--white);
}

/* ── ARTICLE CARDS (listing) ── */
.articles-listing {
  max-width:1280px; margin:0 auto; padding:2rem 1.5rem;
}
.articles-listing h2 {
  font-size:1.75rem; margin-bottom:1.5rem;
  text-align:center;
}
.articles-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:1.5rem;
}
.article-card {
  background:var(--white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:var(--transition);
  text-decoration:none; color:inherit;
  display:block;
}
.article-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  color:inherit;
}
.article-card img { width:100%; height:200px; object-fit:cover; border-radius:0; }
.article-card-body { padding:1.5rem; }
.article-card-body .card-cat {
  font-size:0.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.1em;
  color:var(--accent); margin-bottom:0.5rem;
}
.article-card-body h3 { font-size:1.2rem; margin-bottom:0.5rem; }
.article-card-body p { font-size:0.88rem; color:var(--graphite-light); }

/* ── INLINE TAG ── */
.tag-inline {
  display:inline-block;
  background:var(--apricot-soft);
  color:var(--accent);
  font-size:0.75rem; font-weight:700;
  padding:0.2rem 0.75rem;
  border-radius:50px;
  text-transform:uppercase;
  letter-spacing:0.06em;
}

/* ── FOOTER ── */
.site-footer {
  background:var(--graphite);
  color:rgba(255,255,255,0.7);
  padding:3rem 1.5rem 2rem;
  margin-top:3rem;
}
.footer-inner {
  max-width:1280px; margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem; align-items:start;
}
@media(max-width:640px) { .footer-inner { grid-template-columns:1fr; } }
.footer-brand {
  font-family:'Playfair Display',serif;
  font-size:1.5rem; font-weight:900;
  color:var(--white); margin-bottom:0.5rem;
}
.footer-brand span { color:var(--apricot); }
.footer-links { display:flex; gap:1.25rem; flex-wrap:wrap; }
.footer-links a { color:rgba(255,255,255,0.6); font-size:0.85rem; }
.footer-links a:hover { color:var(--apricot); }
.footer-disclaimer {
  grid-column:1/-1;
  font-size:0.75rem; color:rgba(255,255,255,0.4);
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:1.5rem; margin-top:1rem;
  line-height:1.6;
}

/* ── COOKIES BANNER ── */
#cookies-toggle { display:none; }
.cookies-banner {
  position:fixed; bottom:1.5rem; right:1.5rem;
  max-width:380px; width:calc(100% - 2rem);
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:0 8px 40px rgba(0,0,0,0.18);
  padding:1.5rem;
  z-index:9999;
  transition:var(--transition);
}
#cookies-toggle:checked ~ .cookies-banner { display:none; }
.cookies-banner p { font-size:0.85rem; color:var(--graphite-light); margin-bottom:1rem; }
.cookies-banner a { color:var(--accent); font-weight:500; }
.cookies-actions { display:flex; gap:0.5rem; }
.cookies-actions label,
.cookies-actions a.cookie-btn {
  flex:1; text-align:center;
  padding:0.65rem 1rem;
  border-radius:50px;
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  min-height:44px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.cookie-accept {
  background:var(--graphite); color:var(--white); border:none;
}
.cookie-decline {
  background:transparent; color:var(--graphite);
  border:1px solid rgba(45,45,45,0.2);
}

/* ── SUCCESS PAGE ── */
.success-page {
  text-align:center; padding:6rem 1.5rem;
  max-width:600px; margin:0 auto;
}
.success-page .check-icon {
  width:80px; height:80px;
  background:linear-gradient(135deg, var(--apricot), var(--yellow-warm));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 2rem;
  font-size:2.5rem;
}
.success-page h1 { font-size:2.5rem; margin-bottom:1rem; }
.success-page p { color:var(--graphite-light); margin-bottom:2rem; font-size:1.1rem; }
.btn-primary {
  display:inline-block;
  padding:1rem 2.5rem;
  background:var(--graphite);
  color:var(--white);
  border-radius:50px;
  font-weight:700;
  font-size:1rem;
  transition:var(--transition);
  min-height:44px;
}
.btn-primary:hover { background:var(--accent); color:var(--white); }

/* ── LEGAL PAGES ── */
.legal-page {
  max-width:800px; margin:0 auto; padding:3rem 1.5rem;
}
.legal-page h1 {
  font-size:2rem; margin-bottom:0.5rem;
}
.legal-page .legal-date { font-size:0.85rem; color:var(--graphite-muted); margin-bottom:2rem; }
.legal-page h2 {
  font-size:1.25rem; margin:2rem 0 0.75rem;
  color:var(--accent);
}
.legal-page p, .legal-page li {
  font-size:0.95rem; color:var(--graphite-light);
  margin-bottom:1rem; line-height:1.7;
}

/* ── 404 ── */
.error-page {
  text-align:center; padding:6rem 1.5rem;
  max-width:600px; margin:0 auto;
}
.error-page h1 {
  font-size:8rem; font-weight:900;
  background:linear-gradient(135deg, var(--apricot), var(--accent));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
}
.error-page h2 { font-size:1.5rem; margin-bottom:1rem; }
.error-page p { color:var(--graphite-light); margin-bottom:2rem; }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to { opacity:1; transform:translateY(0); }
}
.fade-up { animation:fadeUp 0.6s ease-out both; }
.fade-up-d1 { animation-delay:0.1s; }
.fade-up-d2 { animation-delay:0.2s; }
.fade-up-d3 { animation-delay:0.3s; }

/* ── MISC ── */
.text-center { text-align:center; }
.mt-2 { margin-top:2rem; }
.mb-2 { margin-bottom:2rem; }

.duo-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem; margin:2rem 0;
}
@media(max-width:600px) { .duo-grid { grid-template-columns:1fr; } }
.duo-card {
  background:var(--white); border-radius:var(--radius);
  padding:1.5rem; box-shadow:var(--shadow);
}
.duo-card h4 { font-size:1rem; margin-bottom:0.4rem; }
.duo-card p { font-size:0.88rem; color:var(--graphite-light); margin:0; }