/*
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');

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

:root{
--primary:#0d1b2a;
--accent:#f5c842;
--bg:#ffffff;
--bg-sec:#f8f6f1;
--text:#1a1a2e;
--max-w:780px;
--header-h:64px;
}

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

body{
font-family:'DM Sans',sans-serif;
color:var(--text);
background:var(--bg);
line-height:1.75;
font-size:17px;
}

h1,h2,h3,h4{
font-family:'DM Serif Display',serif;
color:var(--primary);
line-height:1.25;
}

h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.6em}
h2{font-size:clamp(1.3rem,3vw,1.8rem);margin-bottom:.5em;margin-top:2em}
h3{font-size:clamp(1.1rem,2.5vw,1.35rem);margin-bottom:.4em;margin-top:1.5em}
p{margin-bottom:1em}
img{max-width:100%;height:auto;display:block}

/* ── HEADER ── */
.site-header{
position:sticky;top:0;z-index:100;
background:var(--primary);
border-bottom:3px solid var(--accent);
}
.header-inner{
max-width:1200px;margin:0 auto;
display:flex;align-items:center;justify-content:space-between;
padding:0 1.5rem;height:var(--header-h);
}
.site-logo{
font-family:'DM Serif Display',serif;
font-size:1.35rem;color:var(--accent);
text-decoration:none;letter-spacing:.02em;
}
.site-logo:hover{opacity:.85}
.nav-menu{display:flex;gap:1.5rem;list-style:none;align-items:center}
.nav-menu a{
color:#e0e0e0;text-decoration:none;font-size:.9rem;
font-weight:500;transition:color .2s;
}
.nav-menu a:hover,.nav-menu a:focus-visible{color:var(--accent)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.burger span{width:24px;height:2px;background:#fff;display:block;transition:transform .3s,opacity .3s}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:768px){
.burger{display:flex}
.nav-menu{
position:fixed;top:var(--header-h);left:0;right:0;
background:var(--primary);flex-direction:column;
padding:1.5rem;gap:1rem;
transform:translateY(-120%);transition:transform .3s;
border-bottom:3px solid var(--accent);
z-index:99;
}
.nav-menu.active{transform:translateY(0)}
}

/* ── BREADCRUMBS ── */
.breadcrumbs{
max-width:var(--max-w);margin:1.5rem auto .5rem;padding:0 1.5rem;
font-size:.85rem;color:#777;
}
.breadcrumbs a{color:var(--accent);text-decoration:none;font-size:.85rem}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs span{margin:0 .35em}

/* ── ARTICLE BANNER ── */
.article-banner{
background:var(--bg-sec);
border-top:1px solid #e8e5df;
border-bottom:1px solid #e8e5df;
padding:1.5rem;
margin-bottom:2rem;
}
.banner-inner{
max-width:var(--max-w);margin:0 auto;
display:flex;align-items:center;gap:1rem;
font-size:.88rem;color:#555;
}
.banner-label{
background:var(--accent);color:var(--primary);
padding:.25rem .7rem;font-weight:700;
font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;
white-space:nowrap;
}
.banner-inner p{margin:0}

@media(max-width:480px){
.banner-inner{flex-direction:column;align-items:flex-start}
}

/* ── ARTICLE ── */
.article-wrapper{
max-width:var(--max-w);margin:0 auto;padding:0 1.5rem 3rem;
}
.article-meta{
display:flex;flex-wrap:wrap;gap:1rem;
font-size:.85rem;color:#777;margin-bottom:2rem;
padding-bottom:1rem;border-bottom:1px solid #e8e5df;
}
.article-meta span{display:flex;align-items:center;gap:.3em}
.article-img{margin:2rem 0;border:1px solid #e8e5df}
.article-img img{width:100%;display:block}

/* ── PULL QUOTE ── */
.pull-quote{
border-left:4px solid var(--accent);
padding:1.2rem 1.5rem;
margin:2rem 0;
background:var(--bg-sec);
font-family:'DM Serif Display',serif;
font-size:1.15rem;
line-height:1.6;
color:var(--primary);
font-style:italic;
}
.pull-quote cite{
display:block;margin-top:.6rem;
font-family:'DM Sans',sans-serif;
font-size:.82rem;font-style:normal;color:#777;
}

/* ── TAGS ── */
.article-tags{
display:flex;flex-wrap:wrap;gap:.5rem;
margin:2rem 0;padding-top:1.5rem;
border-top:1px solid #e8e5df;
}
.article-tags a{
background:var(--bg-sec);color:var(--text);
padding:.3rem .8rem;font-size:.8rem;
text-decoration:none;border:1px solid #e8e5df;
transition:border-color .2s,background .2s;
}
.article-tags a:hover{border-color:var(--accent);background:#fdf8e8}

/* ── DISCLAIMER ── */
.disclaimer{
background:var(--bg-sec);
border:1px solid #e8e5df;
padding:1.2rem 1.5rem;
margin:2rem 0;
font-size:.88rem;
color:#555;
line-height:1.6;
}
.disclaimer strong{color:var(--primary)}

/* ── EXPERT NOTE ── */
.expert-note{
background:var(--bg-sec);
border:1px solid #e8e5df;
padding:1.5rem;
margin:2rem 0;
}
.expert-note h3{margin-bottom:.5em;font-size:1.1rem;margin-top:0}
.expert-note p{font-size:.92rem;color:#444;margin-bottom:.5em}

/* ── SUBSCRIBE FORM ── */
.subscribe-section{
background:var(--primary);
padding:3rem 1.5rem;
margin-top:3rem;
}
.subscribe-inner{
max-width:var(--max-w);margin:0 auto;text-align:center;
}
.subscribe-inner h2{color:var(--accent);margin-top:0;margin-bottom:.5em}
.subscribe-inner p{color:#ccc;margin-bottom:1.5rem}
.subscribe-form{
display:flex;gap:.5rem;max-width:460px;margin:0 auto;
}
.subscribe-form input[type="email"]{
flex:1;padding:.75rem 1rem;border:2px solid #2a3a4f;
background:#162636;color:#fff;font-size:.95rem;
font-family:'DM Sans',sans-serif;
}
.subscribe-form input[type="email"]::placeholder{color:#6b7a8d}
.subscribe-form input[type="email"]:focus{outline:none;border-color:var(--accent)}
.subscribe-form button{
background:var(--accent);color:var(--primary);
border:none;padding:.75rem 1.5rem;
font-weight:700;font-size:.9rem;cursor:pointer;
font-family:'DM Sans',sans-serif;
transition:opacity .2s;
}
.subscribe-form button:hover{opacity:.85}
@media(max-width:480px){
.subscribe-form{flex-direction:column}
}

/* ── FOOTER ── */
.site-footer{
background:var(--primary);
color:#aaa;
padding:2.5rem 1.5rem 1.5rem;
border-top:3px solid var(--accent);
font-size:.85rem;
}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{
display:flex;flex-wrap:wrap;justify-content:space-between;
gap:1.5rem;margin-bottom:1.5rem;
padding-bottom:1.5rem;border-bottom:1px solid #1e2d3d;
}
.footer-brand{font-family:'DM Serif Display',serif;color:var(--accent);font-size:1.2rem}
.footer-links{display:flex;gap:1.2rem;flex-wrap:wrap}
.footer-links a{color:#aaa;text-decoration:none;font-size:.83rem;transition:color .2s}
.footer-links a:hover{color:var(--accent)}
.footer-disclaimer{
font-size:.78rem;color:#6b7a8d;
margin:1rem 0;line-height:1.6;
padding:1rem;border:1px solid #1e2d3d;
}
.footer-copy{text-align:center;padding-top:1rem;font-size:.78rem;color:#6b7a8d}

/* ── COOKIE BANNER (no JS) ── */
.cookie-check{display:none}
.cookie-banner{
position:fixed;bottom:1rem;right:1rem;z-index:999;
background:var(--primary);color:#ddd;
padding:1.2rem 1.5rem;max-width:360px;
border:2px solid var(--accent);
font-size:.84rem;line-height:1.5;
}
.cookie-banner p{margin-bottom:.8rem;color:#ccc}
.cookie-banner a{color:var(--accent);font-size:.84rem}
.cookie-btns{display:flex;gap:.5rem}
.cookie-btns label{
padding:.4rem 1rem;cursor:pointer;
font-size:.82rem;font-weight:700;transition:opacity .2s;
}
.cookie-accept-btn{background:var(--accent);color:var(--primary)}
.cookie-reject-btn{background:transparent;color:#aaa;border:1px solid #555}
.cookie-btns label:hover{opacity:.8}
.cookie-check:checked ~ .cookie-banner{display:none}

/* ── ARTICLES GRID (home) ── */
.articles-grid{
max-width:var(--max-w);margin:2rem auto;padding:0 1.5rem;
}
.articles-grid h2{margin-bottom:1rem;margin-top:0}
.article-card{
border:1px solid #e8e5df;
padding:1.2rem 1.5rem;
margin-bottom:1rem;
transition:border-color .2s;
}
.article-card:hover{border-color:var(--accent)}
.article-card h3{margin-top:0;margin-bottom:.3em}
.article-card h3 a{
text-decoration:none;color:var(--primary);
font-size:1.1rem;text-align:left;
transition:color .2s;
}
.article-card h3 a:hover{color:var(--accent)}
.article-card p{font-size:.9rem;color:#555;margin-bottom:.5em}
.article-card-meta{font-size:.8rem;color:#999}

/* ── LEGAL PAGES ── */
.legal-wrapper{
max-width:var(--max-w);margin:0 auto;padding:2rem 1.5rem 3rem;
}
.legal-wrapper h1{margin-bottom:1em}
.legal-wrapper h2{margin-top:2em;margin-bottom:.5em}
.legal-wrapper p,.legal-wrapper li{font-size:.95rem;line-height:1.75}
.legal-wrapper ul{margin:1em 0 1em 1.5em;list-style:disc}
.legal-wrapper li{margin-bottom:.4em}

/* ── SUCCESS PAGE ── */
.success-wrapper{
max-width:600px;margin:0 auto;padding:5rem 1.5rem;text-align:center;
min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.success-wrapper h1{color:var(--primary);margin-bottom:.5em}
.success-wrapper p{color:#555;margin-bottom:2rem;font-size:1.05rem}
.success-btn{
background:var(--accent);color:var(--primary);
padding:.85rem 2rem;text-decoration:none;
font-weight:700;font-size:1rem;
transition:opacity .2s;
font-family:'DM Sans',sans-serif;
}
.success-btn:hover{opacity:.85}
.success-icon{
font-size:3.5rem;margin-bottom:1rem;
width:80px;height:80px;
background:var(--accent);
display:flex;align-items:center;justify-content:center;
color:var(--primary);font-weight:700;
}

/* ── 404 PAGE ── */
.page-404{
max-width:600px;margin:0 auto;padding:5rem 1.5rem;text-align:center;
min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.page-404 .err-code{
font-family:'DM Serif Display',serif;
font-size:clamp(5rem,12vw,8rem);
color:var(--accent);line-height:1;
margin-bottom:.3em;letter-spacing:.05em;
}
.page-404 h1{font-size:1.5rem;margin-bottom:.5em}
.page-404 p{color:#555;margin-bottom:2rem}
.page-404 a{
background:var(--primary);color:var(--accent);
padding:.85rem 2rem;text-decoration:none;
font-weight:700;font-size:1rem;
transition:opacity .2s;
}
.page-404 a:hover{opacity:.85}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.article-wrapper h1{animation:fadeUp .5s ease both}
.article-wrapper h2{animation:fadeUp .5s ease both;animation-delay:.05s}
.pull-quote{animation:fadeUp .6s ease both;animation-delay:.1s}
.article-img{animation:fadeUp .6s ease both;animation-delay:.08s}
.article-card{animation:fadeUp .4s ease both}
.article-card:nth-child(2){animation-delay:.08s}
.article-card:nth-child(3){animation-delay:.16s}