/* =====================================================================
   GetDetailPro — production fixes for the new design (October 2026)
   Loaded after styles.css, light.css and effects.css on every page.
   ===================================================================== */

/* ---------- 1. Videos: the channel's videos are square (1:1) ---------- */
.video-cover{height:auto!important;aspect-ratio:1/1;background:#0f1418}
.video-cover img{object-position:50% 50%!important;filter:none!important}
.video-cover::after{background:linear-gradient(0deg,rgba(8,12,16,.55),transparent 45%)!important}
/* grid cards: start content at the top so cards in a row line up */
.video-grid .video-card{display:flex!important;flex-direction:column;justify-content:flex-start;align-items:stretch;align-self:start}
/* home carousel: each card fills its slide (it was shrinking to a third) */
.owl-carousel .video-card{flex:1 1 auto!important;width:100%!important;min-width:0!important}
#home-videos .owl-nav{display:none!important}
/* video inside an article */
.prose .article-video{max-width:460px;margin:32px auto!important;border-radius:14px;min-height:0!important}
.prose .article-video img{display:block;width:100%;aspect-ratio:1/1;height:auto!important;max-height:none!important;min-height:0!important;object-fit:cover;opacity:1!important}
/* player dialog sized for square video */
.video-dialog{width:min(640px,calc(100% - 24px))!important}
.video-dialog iframe{aspect-ratio:1/1!important;width:min(100%,calc(100svh - 210px))!important;margin:0 auto}

/* ---------- 2. Home: trust strip squeezed into narrow columns on phones ---------- */
@media(max-width:760px){
  .home-strip span,.home-strip span:first-child{max-width:none!important}
}

/* ---------- 3. Article boxes that had no style ---------- */
.prose .warning-box{padding:20px 24px;border-left:2px solid #c0634a;background:#fcf2ee;margin:26px 0;font-size:15px;line-height:1.7;color:#4a2a20}
.prose .warning-box strong{color:#9b3b24}
.prose .warning-box p:last-child{margin-bottom:0}
html[data-theme=dark] .prose .warning-box{background:#2e211d;color:var(--ink);border-color:#c0634a}
html[data-theme=dark] .prose .warning-box strong{color:#f2b8a6}
.prose .related-articles-seo{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.prose .related-articles-seo ul{margin:0;padding-left:0;list-style:none}
.prose .related-articles-seo li{padding:8px 0;border-bottom:1px solid var(--line)}
.prose .sources{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font-size:14px}
.prose .sources ol{padding-left:20px}
.prose .src-pub{color:var(--muted)}

/* ---------- 4. Hindi guide components ---------- */
.prose .hindi-intro{margin-bottom:26px}
.prose .badge-hindi{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin:6px 0 14px}
.prose .topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 36px}
.prose a.topic-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);text-decoration:none!important;color:var(--ink)!important;transition:border-color .2s,transform .2s}
.prose a.topic-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.prose .tc-hindi{font-family:var(--disp);font-weight:650;font-size:18px;line-height:1.35;color:var(--ink)}
.prose .tc-eng{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}
.prose .tc-desc{font-size:14px;line-height:1.6;color:var(--muted)}
.prose .tc-link{margin-top:auto;padding-top:6px;font-size:14px;font-weight:600;color:var(--gold-deep)}
.prose .faq-section-title{font-family:var(--disp);font-size:27px;font-weight:650;line-height:1.3;letter-spacing:-.03em;margin:44px 0 6px;color:var(--ink)}
.prose .faq-section-sub{color:var(--muted);margin-bottom:14px}
.prose details.hindi-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.prose details.hindi-faq summary::-webkit-details-marker{display:none}
.prose details.hindi-faq summary::after{content:'+';flex:none;font-size:22px;line-height:1;color:var(--gold-deep)}
.prose details.hindi-faq[open] summary::after{content:'\2013'}
.prose .hindi-q{display:block;font-weight:600;color:var(--ink)}
.prose .eng-q{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:3px}
.prose .hindi-a{display:block}
.prose .eng-note{margin-top:12px;font-size:13.5px;line-height:1.65;color:var(--muted);border-left:2px solid var(--line);padding-left:12px}
.prose .callout-hindi{padding:20px 24px;border-left:2px solid var(--gold);background:#f5f7f9;margin:30px 0;font-size:15px;line-height:1.75}
html[data-theme=dark] .prose .callout-hindi{background:var(--surface)}

/* ---------- 5. City guide components ---------- */
.prose .city-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 12px}
.prose a.city-card{display:flex;flex-direction:column;gap:3px;padding:16px 16px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);color:var(--ink)!important;text-decoration:none!important;transition:border-color .2s,transform .2s}
.prose a.city-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.prose .city-emoji{font-size:24px;line-height:1.2}
.prose .city-name{font-family:var(--disp);font-weight:650;font-size:17px;margin-top:6px;color:var(--ink)}
.prose .city-state{font-size:12.5px;color:var(--muted)}
.prose .city-challenges{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 10px}
.prose .city-challenges span{font-size:11px;line-height:1.4;padding:3px 8px;border-radius:20px;background:var(--surface-soft,#f2f5f8);border:1px solid var(--line);color:var(--muted)}
.prose .city-score{margin-top:auto}
.prose .cs-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.prose .cs-val{font-weight:600;color:var(--ink)}
.prose .cs-bar{height:4px;border-radius:4px;background:var(--line);margin-top:6px;overflow:hidden}
.prose .cs-fill{height:100%;border-radius:4px}
.prose .cs-fill.diff-med{width:45%;background:#c9a24a}
.prose .cs-fill.diff-high{width:72%;background:#cf7a3f}
.prose .cs-fill.diff-extreme{width:96%;background:#bf4a3a}
.prose .city-more{font-size:13.5px;color:var(--muted);margin:4px 0 8px}
.prose .city-detail{border-top:1px solid var(--line);padding-top:34px;margin-top:34px;scroll-margin-top:110px}
.prose .city-hero-bg{display:none}
.prose .city-hero .city-emoji{font-size:30px}
.prose h2.ch-title{margin:8px 0 10px}
.prose .ch-subtitle{color:var(--muted);font-size:16px;line-height:1.75}
.prose .city-stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:22px 0 6px}
.prose .cstat{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface-soft,#f7f8fa)}
.prose .cstat-num{font-family:var(--disp);font-weight:650;font-size:17px;line-height:1.3;color:var(--ink)}
.prose .cstat-label{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.prose .city-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin:28px 0 12px}
.prose .challenge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.prose .challenge-card{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--surface,#fff)}
.prose .cc-icon{font-size:20px;line-height:1.2}
.prose .cc-title{font-weight:650;margin:6px 0 4px;color:var(--ink)}
.prose .cc-desc{font-size:14px;line-height:1.65;color:var(--muted)}
.prose .cc-tip{font-size:13.5px;line-height:1.6;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);color:var(--ink)}
.prose .reco-item{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.prose .reco-item:first-child{border-top:1px solid var(--line)}
.prose .reco-num{font-family:var(--disp);font-weight:650;font-size:19px;line-height:1.3;color:var(--gold-deep)}
.prose .reco-body h3{margin:0 0 6px!important;font-size:18px!important;line-height:1.35}
.prose .reco-body p{margin:0 0 8px;font-size:15px}
.prose .reco-link{font-size:14px;font-weight:600}
.prose .season-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.prose .sq-item{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface-soft,#f7f8fa)}
.prose .sq-season{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:4px}
.prose .sq-task{font-size:13.5px;line-height:1.5;color:var(--muted)}

/* ---------- 6. Seasonal guide components ---------- */
.prose .season-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.prose .season-tabs a{padding:9px 16px;border:1px solid var(--line);border-radius:30px;font-size:14px;line-height:1.3;text-decoration:none!important;color:var(--ink)!important;background:var(--surface,#fff)}
.prose .season-tabs a:hover{border-color:var(--gold)}
.prose .season-panel{border-top:1px solid var(--line);padding-top:32px;margin-top:34px;scroll-margin-top:110px}
.prose .season-tabs+.season-panel,.prose .season-panel:first-child{border-top:0;margin-top:0;padding-top:0}
.prose .season-hero-bg{display:none}
.prose h2.season-title{margin:0 0 10px}
.prose .season-subtitle{color:var(--muted);line-height:1.75}
.prose .season-badges{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.prose .sbadge{font-size:11.5px;line-height:1.4;padding:4px 10px;border-radius:20px;border:1px solid var(--line);background:var(--surface-soft,#f7f8fa);color:var(--muted)}
.prose .warning-strip,.prose .tip-strip{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:12px;margin:18px 0;background:#fcf2ee;border:1px solid #f0cdc1}
.prose .tip-strip{background:#f2f6ec;border-color:#d3dfc4}
.prose .warning-strip-icon{flex:none;font-size:20px;line-height:1.4}
.prose .warning-strip p,.prose .tip-strip p{margin:0;font-size:15px}
.prose .progress-tracker{display:flex;align-items:center;gap:14px;margin:22px 0 16px}
.prose .pt-count{font-family:var(--disp);font-weight:650;font-size:18px;min-width:44px;color:var(--ink)}
.prose .pt-bar{flex:1;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.prose .pt-fill{height:100%;width:0;background:var(--gold);transition:width .3s}
.prose .pt-text{font-size:13px;color:var(--muted);white-space:nowrap}
.prose .task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.prose .task-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--surface,#fff)}
.prose .task-priority{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:20px}
.prose .tp-critical{background:#fbe4dd;color:#9b3b24}
.prose .tp-high{background:#fbeed8;color:#7f520c}
.prose .tp-medium{background:#eef2e4;color:#4a5c2c}
.prose .tp-low{background:#eef1f5;color:#4d5b6a}
.prose .task-icon{font-size:20px;line-height:1.2}
.prose .task-title{font-weight:650;color:var(--ink)}
.prose .task-desc{font-size:14.5px;line-height:1.6;color:var(--ink)}
.prose .task-why{font-size:13.5px;line-height:1.6;color:var(--muted)}
.prose .task-link{margin-top:auto;padding-top:4px;font-size:14px;font-weight:600}
.prose .checklist{margin:26px 0 8px;border:1px solid var(--line);border-radius:12px;padding:4px 18px 8px;background:var(--surface,#fff)}
.prose .checklist h3{margin:14px 0 8px!important;font-size:18px!important}
.prose .check-item{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);cursor:pointer;-webkit-user-select:none;user-select:none}
.prose .check-box{flex:none;width:20px;height:20px;border:1.5px solid #9aa8b7;border-radius:5px;margin-top:2px;display:grid;place-items:center;transition:background .15s,border-color .15s}
.prose .check-item.done .check-box{background:var(--gold);border-color:var(--gold)}
.prose .check-item.done .check-box::after{content:'';width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.prose .check-item.done .check-text{color:var(--muted);text-decoration:line-through}
.prose .check-item:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* shared dark-theme surfaces for the components above */
html[data-theme=dark] .prose :is(a.city-card,.challenge-card,.task-card,.checklist,a.topic-card,.season-tabs a){background:var(--surface);border-color:var(--line);color:var(--ink)!important}
html[data-theme=dark] .prose :is(.cstat,.sq-item,.sbadge,.city-challenges span){background:var(--surface-soft);border-color:var(--line)}
html[data-theme=dark] .prose .warning-strip{background:#2e211d;border-color:#6e4234}
html[data-theme=dark] .prose .tip-strip{background:#1f2b1d;border-color:#46603e}
html[data-theme=dark] .prose .tp-critical{background:#4a2a22;color:#f2b8a6}
html[data-theme=dark] .prose .tp-high{background:#47391d;color:#f3d79c}
html[data-theme=dark] .prose .tp-medium{background:#2c3a22;color:#c8deae}
html[data-theme=dark] .prose .tp-low{background:#273342;color:#c4d0dd}

/* responsive grids */
@media(max-width:900px){
  .prose .city-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prose .city-stats-row,.prose .season-quick{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .prose .topic-grid,.prose .challenge-grid,.prose .task-grid{grid-template-columns:1fr}
  .prose .progress-tracker{flex-wrap:wrap;gap:8px 12px}
  .prose .pt-bar{flex-basis:100%;order:3}
}
@media(max-width:380px){.prose .city-grid{grid-template-columns:1fr}}

/* ---------- 7. Page sections added below tools (FAQ) ---------- */
.page-extra{padding-bottom:72px}
.page-extra .extra-head{border-top:1px solid var(--line);padding-top:46px}
.page-extra .extra-head h2{font-family:var(--disp);font-size:clamp(26px,3vw,34px);font-weight:650;letter-spacing:-.035em;line-height:1.2;margin-top:12px;color:var(--ink)}
.page-extra .faq-list{max-width:820px;margin-top:8px}
.page-extra .faq-list h3{font-family:var(--disp);font-size:19px;font-weight:650;letter-spacing:-.02em;line-height:1.35;margin:30px 0 8px;color:var(--ink)}
.page-extra .faq-list p{font-size:15.5px;line-height:1.75;color:var(--muted);margin:0}
.page-extra .extra-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:34px;font-size:14px}
.page-extra .extra-links a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.page-extra .extra-head{padding-top:34px}.page-extra{padding-bottom:52px}}

/* ---------- 8. Not-found page ---------- */
.notfound-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.notfound-list{list-style:none;margin:0;padding:0;max-width:640px}
.notfound-list li{border-bottom:1px solid var(--line)}
.notfound-list a{display:block;padding:14px 0;color:var(--ink);text-decoration:none}
.notfound-list a:hover{color:var(--gold-deep)}

/* Further Reading list: arrow spacing */
.prose .related-articles-seo li a span{display:inline-block;margin-right:8px;text-decoration:none}

/* myth buster: India note under each answer */
.myth-answer .myth-india{margin-top:12px;padding:12px 14px;border-left:2px solid var(--gold);background:#f5f7f9;font-size:14.5px;line-height:1.65;color:#344052}
html[data-theme=dark] .myth-answer .myth-india{background:var(--surface);color:var(--ink)}

/* article video: centred play button, caption over the bottom of the frame */
.prose .article-video .video-play{left:50%!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%);width:62px!important;height:62px!important;font-size:17px!important;background:rgba(0,0,0,.45)!important;border-color:rgba(255,255,255,.75)!important}
.prose .article-video .vfacade-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px!important;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0));color:#fff!important;font-size:13px!important}

/* ---------- 9. Dark theme contrast fixes ---------- */
/* bold text inside articles was dark green on the dark background */
html[data-theme=dark] .prose strong,html[data-theme=dark] .prose b{color:var(--ink)}
html[data-theme=dark] .prose .warning-box strong,html[data-theme=dark] .prose .warning-strip strong{color:#f2b8a6}
/* paint lab: selected layer tab */
html[data-theme=dark] .layer-tab[aria-selected=true]{background:#3a3021;color:#f5dfb2;border-color:#987b47}
/* sun / shade toggle: unselected option */
html[data-theme=dark] .segmented button:not([aria-pressed=true]){color:var(--muted)}

/* ---------- 10. Homepage hero: full screen, photo across the whole width (tablet & desktop) ---------- */
@media(min-width:701px){
  .hero{min-height:clamp(560px,calc(100svh - var(--hh,84px)),1400px)!important}
  .hero-scenes{inset:0!important;background:#1b232c!important}
  .hero-scenes img{object-position:68% 50%}
  .hero-shade{display:block!important;background:linear-gradient(90deg,rgba(247,248,250,.97) 0%,rgba(247,248,250,.93) 33%,rgba(247,248,250,.55) 50%,rgba(247,248,250,0) 68%)!important}
  html[data-theme=dark] .hero-shade{background:linear-gradient(90deg,rgba(16,22,30,.94) 0%,rgba(16,22,30,.84) 33%,rgba(16,22,30,.42) 52%,rgba(16,22,30,0) 72%)!important}
  .hero-top{flex:1 1 auto!important;min-height:0!important;align-items:center!important;
    padding-top:clamp(16px,4.2vh,64px)!important;padding-bottom:clamp(14px,3vh,44px)!important}
  .hero-caption{align-self:end!important}
  .hero-copy h1{font-size:clamp(40px,min(4.6vw,7.4vh),68px)!important;margin:clamp(10px,1.8vh,22px) 0 clamp(14px,2.4vh,28px)!important}
  .hero-copy>p:not(.eyebrow){font-size:clamp(15px,2.1vh,18px)!important;margin-bottom:clamp(14px,2.4vh,25px)!important}
  .hero-controls{flex:none;margin-bottom:clamp(14px,2.6vh,28px)!important;padding-top:clamp(12px,1.8vh,20px)!important;padding-bottom:clamp(10px,1.6vh,18px)!important}
  .hero-process-top{margin-bottom:clamp(6px,1vh,10px)!important}
  .stage-tab{min-height:clamp(78px,10.5vh,110px)!important;padding-top:clamp(12px,2vh,23px)!important;padding-bottom:clamp(12px,2vh,23px)!important}
  .hero-stage-links{min-height:0!important;padding-top:clamp(8px,1.5vh,19px)!important}
}

/* ---------- 11. Alignment: header bookmark icon and the stage tabs ---------- */
/* The bookmark sat 4px higher than the search icon (inline span added a text line under the svg). */
#bookmark-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0}
#bookmark-icon svg{display:block}
/* Every stage tab gets the same inner padding (tab 1, and tab 3 on phones, sat flush against their own edge). */
.stage-tab:first-child{padding-left:20px}
@media(max-width:1050px){.stage-tab:first-child{padding-left:13px}}
@media(max-width:760px){.stage-tab:first-child,.stage-tab:nth-child(3){padding-left:12px!important}}
@media(max-width:700px){.stage-tab:first-child,.stage-tab:nth-child(3){padding-left:10px!important}}
/* Same fix for the magnifier inside the search box (it sat 4px above the text line). */
#search-icon{display:flex;align-items:center;justify-content:center;line-height:0}
#search-icon svg{display:block}