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

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

:root{
--color-primary:#0d1b2a;
--color-accent:#f5c842;
--color-bg:#ffffff;
--color-bg-secondary:#f8f6f1;
--color-text:#1a1a2e;
--font-heading:'DM Serif Display',Georgia,serif;
--font-body:'DM Sans',Helvetica,sans-serif;
--max-w:780px;
--gap:1.5rem;
}

html{scroll-behavior:smooth}
a{display:inline-block;text-align:center}

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

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

h1,h2,h3,h4{font-family:var(--font-heading);font-weight:400;line-height:1.25;color:var(--color-primary)}
h1{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:1rem}
h2{font-size:clamp(1.3rem,3vw,1.9rem);margin-bottom:0.75rem;margin-top:2.5rem}
h3{font-size:1.2rem;margin-bottom:0.5rem}

p{margin-bottom:1.25rem}

/* ---------- HEADER ---------- */
.site-header{
background:var(--color-primary);
padding:1rem var(--gap);
position:sticky;top:0;z-index:100;
}
.site-header__inner{
max-width:var(--max-w);
margin:0 auto;
display:flex;align-items:center;justify-content:space-between;
}
.site-logo{
font-family:var(--font-heading);
font-size:1.35rem;
color:var(--color-accent);
text-decoration:none;
letter-spacing:.02em;
}
.site-logo:hover{opacity:.85}

.nav-toggle{display:none}
.nav-toggle-label{
display:none;
cursor:pointer;
width:28px;height:20px;
position:relative;
flex-direction:column;justify-content:space-between;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after{
display:block;width:100%;height:2px;
background:var(--color-accent);
transition:transform .3s ease,opacity .3s ease;
}
.nav-toggle-label span{position:relative}
.nav-toggle-label span::before,
.nav-toggle-label span::after{content:'';position:absolute;left:0}
.nav-toggle-label span::before{top:-8px}
.nav-toggle-label span::after{top:8px}

.site-nav{display:flex;gap:1.5rem;align-items:center}
.site-nav a{
color:rgba(255,255,255,.8);
text-decoration:none;
font-size:.9rem;
font-weight:500;
transition:color .2s;
}
.site-nav a:hover{color:var(--color-accent)}

@media(max-width:680px){
.nav-toggle-label{display:flex}
.site-nav{
display:none;flex-direction:column;
position:absolute;top:100%;left:0;right:0;
background:var(--color-primary);
padding:1rem var(--gap);
gap:.75rem;
}
.nav-toggle:checked ~ .site-nav{display:flex}
.nav-toggle:checked ~ .nav-toggle-label span{background:transparent}
.nav-toggle:checked ~ .nav-toggle-label span::before{transform:rotate(45deg);top:0}
.nav-toggle:checked ~ .nav-toggle-label span::after{transform:rotate(-45deg);top:0}
}

/* ---------- BREADCRUMBS ---------- */
.breadcrumbs{
max-width:var(--max-w);
margin:1.5rem auto .5rem;
padding:0 var(--gap);
font-size:.82rem;
color:#666;
}
.breadcrumbs a{
color:var(--color-primary);
text-decoration:none;
}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs span{margin:0 .35rem;color:#999}

/* ---------- ARTICLE ---------- */
.article-wrapper{
max-width:var(--max-w);
margin:0 auto;
padding:0 var(--gap) 3rem;
}
.article-meta{
display:flex;flex-wrap:wrap;gap:.75rem;
font-size:.85rem;
color:#666;
margin-bottom:2rem;
padding-bottom:1rem;
border-bottom:1px solid #e0ddd6;
}
.article-meta span{display:inline-flex;align-items:center;gap:.3rem}

.article-body p{text-align:justify;hyphens:auto}

.article-body .article-img{margin:2rem 0}

.pull-quote{
border-left:3px solid var(--color-accent);
padding:1.25rem 1.5rem;
margin:2.5rem 0;
font-family:var(--font-heading);
font-size:1.15rem;
color:var(--color-primary);
background:var(--color-bg-secondary);
}

/* ---------- WIDE BANNER DIVIDER ---------- */
.banner-divider{
background:var(--color-bg-secondary);
border-top:2px solid var(--color-accent);
border-bottom:2px solid var(--color-accent);
padding:1.5rem var(--gap);
margin:2.5rem calc(-1 * var(--gap));
text-align:center;
font-family:var(--font-heading);
font-size:1.1rem;
color:var(--color-primary);
}

/* ---------- FAQ ---------- */
.faq-section{
margin-top:3rem;
padding-top:2rem;
border-top:1px solid #e0ddd6;
}
.faq-section h2{margin-top:0}
.faq-item{
margin-bottom:1.25rem;
padding:1rem 1.25rem;
background:var(--color-bg-secondary);
}
.faq-item h3{
font-family:var(--font-body);
font-weight:700;
font-size:.95rem;
margin-bottom:.4rem;
color:var(--color-primary);
}
.faq-item p{margin-bottom:0;font-size:.92rem}

/* ---------- ASIDE ---------- */
.article-layout-with-aside{
max-width:calc(var(--max-w) + 260px);
margin:0 auto;
padding:0 var(--gap) 3rem;
display:grid;
grid-template-columns:1fr 220px;
gap:2.5rem;
}
.article-layout-with-aside .article-body{min-width:0}

.author-card{
background:var(--color-bg-secondary);
padding:1.5rem;
margin-bottom:1.5rem;
text-align:center;
}
.author-card .author-avatar{
width:64px;height:64px;
background:var(--color-primary);
color:var(--color-accent);
font-family:var(--font-heading);
font-size:1.5rem;
display:flex;align-items:center;justify-content:center;
margin:0 auto .75rem;
}
.author-card h3{font-size:1rem;margin-bottom:.3rem}
.author-card p{font-size:.82rem;color:#666;margin-bottom:0}

.share-box{
background:var(--color-bg-secondary);
padding:1.25rem;
}
.share-box h3{font-size:.9rem;margin-bottom:.75rem;text-align:center}
.share-links{display:flex;flex-direction:column;gap:.5rem}
.share-links a{
display:block;
text-align:center;
padding:.5rem;
font-size:.82rem;
font-weight:500;
color:var(--color-primary);
text-decoration:none;
border:1px solid #e0ddd6;
transition:background .2s,border-color .2s;
}
.share-links a:hover{
background:var(--color-accent);
border-color:var(--color-accent);
}

@media(max-width:780px){
.article-layout-with-aside{
grid-template-columns:1fr;
max-width:var(--max-w);
}
}

/* ---------- TAGS ---------- */
.article-tags{
display:flex;flex-wrap:wrap;gap:.4rem;
margin:2rem 0;
}
.article-tags a{
font-size:.78rem;
padding:.3rem .7rem;
background:var(--color-bg-secondary);
color:var(--color-primary);
text-decoration:none;
font-weight:500;
transition:background .2s;
}
.article-tags a:hover{background:var(--color-accent)}

/* ---------- READ ALSO ---------- */
.read-also{
margin-top:2.5rem;
padding-top:2rem;
border-top:1px solid #e0ddd6;
}
.read-also h2{margin-top:0;margin-bottom:1rem}
.read-also-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:1rem;
}
.read-also-card{
padding:1rem;
background:var(--color-bg-secondary);
text-decoration:none;
transition:background .2s;
}
.read-also-card:hover{background:#ece9e0}
.read-also-card h3{font-size:.95rem;margin-bottom:.3rem;color:var(--color-primary)}
.read-also-card p{font-size:.82rem;color:#666;margin-bottom:0}

/* ---------- SUBSCRIBE FORM ---------- */
.subscribe-section{
background:var(--color-primary);
padding:2.5rem var(--gap);
margin-top:3rem;
text-align:center;
}
.subscribe-section h2{color:var(--color-accent);margin-top:0}
.subscribe-section p{color:rgba(255,255,255,.75);max-width:480px;margin:0 auto 1.25rem}
.subscribe-form{
display:flex;
max-width:420px;
margin:0 auto;
gap:0;
}
.subscribe-form input[type="email"]{
flex:1;
padding:.7rem 1rem;
border:none;
font-family:var(--font-body);
font-size:.9rem;
}
.subscribe-form input[type="email"]:focus{outline:2px solid var(--color-accent)}
.subscribe-form button{
padding:.7rem 1.25rem;
background:var(--color-accent);
color:var(--color-primary);
border:none;
font-family:var(--font-body);
font-weight:700;
font-size:.9rem;
cursor:pointer;
transition:opacity .2s;
}
.subscribe-form button:hover{opacity:.85}
@media(max-width:480px){
.subscribe-form{flex-direction:column}
.subscribe-form input[type="email"],.subscribe-form button{width:100%}
}

/* ---------- DISCLAIMER ---------- */
.article-disclaimer{
background:var(--color-bg-secondary);
border-left:3px solid var(--color-accent);
padding:1rem 1.25rem;
margin:2.5rem 0 0;
font-size:.85rem;
color:#555;
}

/* ---------- PRINT BUTTON ---------- */
.print-block{
margin:2rem 0;
text-align:center;
}
.print-btn{
display:inline-block;
padding:.65rem 2rem;
background:var(--color-primary);
color:#fff;
border:none;
font-family:var(--font-body);
font-weight:700;
font-size:.9rem;
cursor:pointer;
text-decoration:none;
transition:background .2s;
}
.print-btn:hover{background:var(--color-accent);color:var(--color-primary)}

@media print{
.site-header,.breadcrumbs,.subscribe-section,.read-also,.cookie-banner,.print-block,.site-footer{display:none!important}
.article-wrapper,.article-layout-with-aside{padding:0}
}

/* ---------- BIG TITLE (article 3) ---------- */
.big-title{
font-size:clamp(2.2rem,5.5vw,3.6rem);
margin-bottom:1.5rem;
letter-spacing:-.01em;
}

/* ---------- FOOTER ---------- */
.site-footer{
background:var(--color-primary);
color:rgba(255,255,255,.7);
padding:2rem var(--gap);
font-size:.82rem;
}
.site-footer__inner{
max-width:var(--max-w);
margin:0 auto;
display:flex;flex-wrap:wrap;gap:1rem;
justify-content:space-between;align-items:flex-start;
}
.footer-brand{font-family:var(--font-heading);font-size:1.1rem;color:var(--color-accent);text-decoration:none;display:block;margin-bottom:.5rem}
.footer-copy{margin-bottom:.5rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.75rem}
.footer-links a{color:rgba(255,255,255,.6);text-decoration:none;font-size:.82rem;transition:color .2s}
.footer-links a:hover{color:var(--color-accent)}
.footer-disclaimer{
width:100%;
margin-top:1rem;
padding-top:1rem;
border-top:1px solid rgba(255,255,255,.1);
font-size:.78rem;
color:rgba(255,255,255,.45);
}

/* ---------- COOKIE BANNER (no JS) ---------- */
.cookie-check{display:none}
.cookie-banner{
position:fixed;
bottom:1rem;right:1rem;
max-width:340px;
background:var(--color-primary);
color:rgba(255,255,255,.85);
padding:1.25rem;
z-index:999;
font-size:.82rem;
line-height:1.5;
}
.cookie-banner p{margin-bottom:.75rem}
.cookie-banner a{color:var(--color-accent)}
.cookie-actions{display:flex;gap:.5rem}
.cookie-actions label{
padding:.45rem 1rem;
font-size:.8rem;
font-weight:700;
cursor:pointer;
transition:opacity .2s;
text-align:center;
}
.cookie-accept{background:var(--color-accent);color:var(--color-primary)}
.cookie-decline{background:transparent;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.3)}
.cookie-actions label:hover{opacity:.8}
.cookie-check:checked ~ .cookie-banner{display:none}

/* ---------- LEGAL PAGES ---------- */
.legal-page{padding:2rem 0 4rem}
.legal-wrapper{
max-width:var(--max-w);
margin:0 auto;
padding:0 var(--gap);
}
.legal-wrapper h1{margin-bottom:.5rem}
.legal-updated{
font-size:.85rem;
color:#888;
margin-bottom:2.5rem;
padding-bottom:1rem;
border-bottom:1px solid #e0ddd6;
}
.legal-wrapper h2{
font-size:1.15rem;
margin-top:2rem;
margin-bottom:.5rem;
padding-top:1rem;
border-top:1px solid #f0ede6;
}
.legal-wrapper h2:first-of-type{border-top:none;padding-top:0}
.legal-wrapper p{font-size:.93rem;text-align:justify;hyphens:auto}

/* ---------- SUCCESS PAGE ---------- */
.success-page{
display:flex;align-items:center;justify-content:center;
min-height:60vh;
padding:3rem var(--gap);
text-align:center;
}
.success-wrapper{max-width:480px}
.success-icon{margin-bottom:1.5rem}
.success-page h1{margin-bottom:.75rem}
.success-page p{color:#666;margin-bottom:2rem}
.back-home-btn{
display:inline-block;
padding:.75rem 2rem;
background:var(--color-primary);
color:#fff;
text-decoration:none;
font-weight:700;
font-size:.9rem;
transition:background .2s;
}
.back-home-btn:hover{background:var(--color-accent);color:var(--color-primary)}

/* ---------- 404 PAGE ---------- */
.error-page{
display:flex;align-items:center;justify-content:center;
min-height:60vh;
padding:3rem var(--gap);
text-align:center;
}
.error-wrapper{max-width:480px}
.error-code{
font-family:var(--font-heading);
font-size:clamp(5rem,15vw,9rem);
line-height:1;
color:var(--color-bg-secondary);
letter-spacing:-.04em;
margin-bottom:.5rem;
}
.error-page h1{margin-bottom:.75rem}
.error-page p{color:#666;margin-bottom:2rem}

/* ---------- ANIMATIONS ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.article-wrapper,.article-layout-with-aside{animation:fadeUp .5s ease both}