/* Vetted v1 — WordPress bridge (Hefesto). Loads AFTER components.css/home.css; Apolo's files stay verbatim.
   Only maps real WP/md2wp markup onto the v1 components and fixes what the static mockups don't cover. */

/* ---------- base ---------- */
img{height:auto}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;margin:0;left:8px;top:8px;z-index:100000;padding:10px 16px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2);border-radius:var(--r-2)}
.vt-main:focus{outline:none}
button{font:inherit;color:inherit;cursor:pointer}
.vt-search-btn{padding:0}
.vt-search-btn[aria-expanded="true"]{border-color:var(--ink)}
/* header nav from wp_nav_menu */
.main-navigation li{margin:0}
.main-navigation .current-menu-item>a{color:var(--ink)}
.site-header.is-night .main-navigation .current-menu-item>a{color:var(--on-night)}
.vt-searchpanel{border-top:1px solid var(--line);background:var(--paper);padding:var(--s-4) 0}
.site-header.is-night .vt-searchpanel{background:var(--night);border-color:rgba(255,255,255,.08)}
.vt-searchpanel .vt-searchbar{margin:0;max-width:640px}
@media (max-width:900px){
  .site-header{position:sticky}
  .main-navigation.is-open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-2);padding:var(--s-3) var(--gutter) var(--s-5)}
  .site-header.is-night .main-navigation.is-open{background:var(--night);border-color:rgba(255,255,255,.08)}
  .main-navigation.is-open ul{flex-direction:column;gap:0}
  .main-navigation.is-open a{display:block;padding:12px 0;font-size:17px;border-bottom:1px solid var(--line)}
  .site-header.is-night .main-navigation.is-open a{border-color:rgba(255,255,255,.08)}
  .inside-header{position:relative}
}

/* ---------- home.css components reused outside the front page (home.css itself loads only on the front page,
   as the guide says). Values copied 1:1 from design/<site>/home.css. ---------- */
body:not(.home) .vt-searchbar{margin-top:var(--s-6);display:flex;align-items:center;gap:12px;height:60px;padding:0 8px 0 20px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-pill);box-shadow:var(--shadow-2);max-width:560px;color:var(--muted);font-size:16px}
body:not(.home) .vt-searchbar .gb-button{height:44px}
body:not(.home) .vt-searchbar svg{width:20px;height:20px;flex:none}
body:not(.home) .vt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
body:not(.home) .vt-card h3{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);font-size:22px;line-height:1.2}
body:not(.home) .vt-card .vt-meta{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
@media (max-width:900px){body:not(.home) .vt-cards{grid-template-columns:1fr}body:not(.home) .vt-searchbar{height:54px}}
/* Apolo review P0: the real <input type=search> has an intrinsic width; never let it widen the grid */
@media (max-width:900px){.vt-hero-grid{grid-template-columns:minmax(0,1fr)}}
.vt-searchbar input[type=search]{width:100%}
.vt-searchbar{min-width:0;max-width:min(560px,100%)}

/* ---------- search form (WP search.php / header / AI hero) ---------- */
.vt-searchbar{color:var(--ink)}
.vt-searchbar input[type=search]{flex:1;min-width:0;height:100%;border:0;background:transparent;font:400 16px/1.2 var(--font-ui);color:var(--ink);outline:none;-webkit-appearance:none}
.vt-searchbar input::placeholder{color:var(--muted);opacity:1}
.vt-searchbar:focus-within{box-shadow:var(--focus),var(--shadow-2);border-color:var(--accent)}
.vt-searchbar svg{color:var(--muted)}
.vt-searchbar input::-webkit-search-cancel-button{-webkit-appearance:none}
.vt-archive-search .vt-searchbar{margin-top:var(--s-5)}

/* ---------- containers: GP's #page is not a grid-container here, sections handle their own width ---------- */
.site-content.grid-container{padding-left:var(--gutter);padding-right:var(--gutter)}
.vt-home .vt-section,.vt-home .vt-hero{width:100%}
a.vt-chip:hover{text-decoration:none;border-color:var(--line-strong);color:var(--ink)}

/* ---------- home: real-data variants of the mockup blocks ---------- */
.vt-home-cats .vt-browse{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.vt-home-cats .vt-browse .vt-chips{margin-top:0}
.vt-home-cats:has(.vt-browse){padding-top:var(--s-6)!important;padding-bottom:var(--s-6)}
.vt-browse .vt-chip{font-size:14px;padding:8px 14px}
.vt-glance-title{display:block;margin:var(--s-5) 0 var(--s-4);font:600 24px/1.2 var(--font-display);letter-spacing:var(--display-tracking);color:var(--on-night);text-wrap:balance}
.vt-glance-title:hover{text-decoration:none;color:#fff}
.vt-glance-media{display:block;margin:0 0 var(--s-5);border-radius:var(--r-3);overflow:hidden;border:1px solid rgba(255,255,255,.10);aspect-ratio:1200/630;background:#0B1422}
.vt-glance-media img{width:100%;height:100%;object-fit:cover;display:block}
.vt-glance-media+div{margin-top:0}
a.vt-panel-row{color:var(--ink)}
a.vt-panel-row:hover{text-decoration:none}
a.vt-panel-row:hover b{text-decoration:underline;text-underline-offset:3px}
.vt-panel-row b{display:block;line-height:1.3}
.vt-thumb-tile{overflow:hidden;padding:0}
.vt-panel-row .vt-logo-tile.vt-thumb-tile{width:76px;height:40px;border-radius:8px}
.vt-thumb-tile img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.vt-panel-arrow{color:var(--muted)}
.vt-panel-arrow svg{width:18px;height:18px}
.vt-panel .vt-panel-row:last-of-type{border-bottom:0}

/* AI home without newsletter: night section meets the footer */
.vt-ends-night .site-footer{border-top:1px solid rgba(255,255,255,.10)}

/* ---------- cards (home + archives): real featured image instead of the .vt-shot placeholder ---------- */
.vt-card{display:block}
.vt-card-link{display:grid;gap:var(--s-4);color:var(--ink)}
.vt-card-link:hover{text-decoration:none}
.vt-card-link:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.vt-card-media{border-radius:var(--r-3);border:1px solid var(--line);overflow:hidden;background:var(--surface-2);aspect-ratio:1200/630}
.vt-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.vt-card-link:hover .vt-card-media img{transform:scale(1.02)}
.vt-card-media .vt-shot{border:0;border-radius:0;height:100%}
.vt-cards-archive{margin-top:var(--s-7)}
.vt-archive-head{max-width:860px}
.vt-archive-head .entry-title{margin-top:var(--s-4)}
.vt-empty{margin-top:var(--s-7);padding:var(--s-7);border:1px dashed var(--line-strong);border-radius:var(--r-4);text-align:left}
.nav-links{display:flex;gap:8px;margin-top:var(--s-7);font-size:15px}
.nav-links .page-numbers{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink-2)}
.nav-links .page-numbers.current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- single ---------- */
.inside-article .entry-header .vt-kicker{display:block}
.inside-article .entry-title{margin-top:var(--s-4)}
.vt-featured{margin:0 0 var(--s-6);max-width:var(--measure)}
.vt-featured img{width:100%;border-radius:var(--r-3);border:1px solid var(--line)}
.vt-body-main{min-width:0}
.vt-body-grid{margin-top:var(--s-7)}
.vt-body-grid .widget-area{padding-top:0}
.vt-toc ol{max-height:calc(100vh - 160px);overflow:auto}
.vt-page .entry-content{margin-top:var(--s-6)}
.vt-page .entry-header{margin-bottom:0}

/* ---------- entry content (md2wp output) ---------- */
.entry-content{font-size:var(--fs-body);line-height:var(--lh-body)}
.entry-content ul,.entry-content ol{padding-left:1.3em;color:var(--ink-2)}
.entry-content li+li{margin-top:8px}
.entry-content li::marker{color:var(--muted)}
.entry-content strong{color:var(--ink);font-weight:600}
/* body links need a non-colour cue (WCAG 1.4.1): underline in running text */
.entry-content p a:not(.gb-button):not([data-gos-cta]),.entry-content li a:not([data-gos-cta]),.entry-content td a:not([data-gos-cta]),.vt-page .entry-content a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.entry-content figure{margin-left:0;margin-right:0}
.entry-content .wp-block-image img{width:100%;border-radius:var(--r-3);border:1px solid var(--line)}
.entry-content figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.entry-content hr{border:0;border-top:1px solid var(--line);margin:var(--s-7) 0}
.entry-content blockquote{margin:0;padding:var(--s-4) var(--s-5);border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 var(--r-2) var(--r-2) 0}
/* affiliate disclosure from md2wp = .vt-disclosure box of the mockup header */
.entry-content blockquote.affiliate-disclosure{border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);padding:12px 16px}
.entry-content blockquote.affiliate-disclosure p{font-size:13px;line-height:1.5;color:var(--muted)}
.entry-content blockquote.affiliate-disclosure strong{color:var(--ink-2);font-weight:600}
.entry-content blockquote.affiliate-disclosure a{color:var(--ink-2)}
.entry-content p:not(.vt-has-label)>em:only-child{font-size:14px;color:var(--muted)}
.entry-content em.vt-label{display:block;margin-bottom:6px;font:500 12px/1.4 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* top box (data-gos-box="top" + data-gos-item children) = picks panel. Order is editorial; no badge/number is added. */
.entry-content [data-gos-box="top"]{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-4);box-shadow:var(--shadow-2);padding:var(--s-2) var(--s-5) var(--s-3);margin-top:var(--s-6)}
.entry-content [data-gos-box="top"]>p:first-child{padding:var(--s-4) 0 var(--s-3);border-bottom:1px solid var(--line)}
.entry-content [data-gos-box="top"]>p:first-child strong{font:500 var(--fs-micro)/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.entry-content [data-gos-item]{position:relative;padding:var(--s-4) 210px var(--s-4) 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--ink-2);margin:0}
.entry-content [data-gos-item]:last-child{border-bottom:0}
.entry-content [data-gos-item]>strong:first-child{font:600 17px/1.3 var(--font-ui);letter-spacing:-.01em;color:var(--ink)}
.entry-content [data-gos-item]>a{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.entry-content [data-gos-item]>a:not([data-gos-cta]){text-decoration:underline;text-underline-offset:3px;font-weight:500}
@media (max-width:640px){
  .entry-content [data-gos-box="top"]{padding:var(--s-1) var(--s-4) var(--s-2)}
  .entry-content [data-gos-item]{padding-right:0}
  .entry-content [data-gos-item]>a{position:static;transform:none;margin-top:var(--s-3)}
  .entry-content [data-gos-item]>a[data-gos-cta]{display:flex;width:100%}
}
/* affiliate CTA links in content: pill button; arrow is CSS (::after) because the JS swaps textContent */
.entry-content a[data-gos-cta]{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border-radius:var(--r-pill);background:var(--accent-strong);color:var(--on-accent);font:600 15px/1 var(--font-ui);letter-spacing:-.005em;white-space:nowrap;text-decoration:none;transition:background .15s}
.entry-content a[data-gos-cta]:hover{background:color-mix(in srgb,var(--accent-strong) 88%,black);text-decoration:none}
.entry-content a[data-gos-cta]::after{content:"";width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.entry-content [data-gos-item]:not(:first-of-type)>a[data-gos-cta]{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.entry-content [data-gos-item]:not(:first-of-type)>a[data-gos-cta]:hover{border-color:var(--ink);background:var(--surface-2)}

/* comparison tables (wp-block-table from md2wp) = .vt-table look, cells wrap (long text) */
.vt-body-main{container-type:inline-size}
.entry-content .wp-block-table{border:1px solid var(--line);border-radius:var(--r-3);overflow:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  /* scroll cue (Apolo P2.10): right-edge shadow while there is more to the right; the "local" cover hides it at the end */
  background:linear-gradient(270deg,var(--surface) 40%,transparent) right/40px 100% no-repeat local,
             linear-gradient(270deg,rgba(0,0,0,.10),transparent) right/14px 100% no-repeat scroll,var(--surface)}
.entry-content .wp-block-table thead th:not(:first-child){background:transparent}
/* Apolo P2.7: on desktop a table may use the full main column (up to 960px) instead of the 680px text measure */
@media (min-width:901px){
  .entry-content .wp-block-table{width:min(100cqw,960px);max-width:none}
  .entry-content .wp-block-table td:not(:first-child),.entry-content .wp-block-table th:not(:first-child){min-width:140px}
}
/* table infographics: open full size (tap to zoom) */
.vt-zoom{display:block;position:relative;cursor:zoom-in}
.vt-zoom-hint{display:none}
@media (max-width:900px){.vt-zoom-hint{display:inline-flex;align-items:center;position:absolute;right:8px;top:8px;bottom:auto;padding:4px 8px;border-radius:var(--r-pill);background:rgba(17,17,17,.78);color:#fff;font:500 12px/1 var(--font-ui);letter-spacing:.01em;pointer-events:none}}
.entry-content .wp-block-table table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.45;min-width:620px}
.entry-content .wp-block-table th,.entry-content .wp-block-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.entry-content .wp-block-table thead th{font:500 12px/1.2 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface);vertical-align:bottom}
.entry-content .wp-block-table tbody tr:last-child td{border-bottom:0}
.entry-content .wp-block-table td:first-child{font-weight:600;color:var(--ink);position:sticky;left:0;background:var(--surface);z-index:1;box-shadow:1px 0 0 var(--line);min-width:150px}
.entry-content .wp-block-table thead th:first-child{position:sticky;left:0;z-index:2}
.entry-content .wp-block-table td a{color:var(--accent-strong);font-weight:500}

/* md2wp safety net: pending internal links stay visible on purpose */
.todo-internal-link{background:#FFF3BF;color:#5C4400;padding:0 4px;border-radius:3px}

/* mobile tweaks for real content */
@media (max-width:900px){.vt-body-grid{margin-top:var(--s-5)}}
@media (max-width:640px){
  .entry-content .wp-block-table table{min-width:560px}
  .vt-glance-title{font-size:21px}
  .vt-empty{padding:var(--s-5)}
}

/* v1.1.1 (Apolo review v1.1) */
.vt-k-short{display:none}
@media (max-width:640px){.vt-k-full{display:none}.vt-k-short{display:inline;white-space:nowrap}}
#how-we-vet{scroll-margin-top:72px}
@media (prefers-reduced-motion:no-preference){html:has(#how-we-vet){scroll-behavior:smooth}}