/*
Theme Name: Astra VDPHL01
Template: astra
Description: Child theme for vdphl01.com. Warm-paper palette with DM Sans typography applied site-wide. Includes custom homepage tracker template and content-page polish. Disable to fall back to stock Astra.
Author: vdphl01.com
Version: 0.3.4
*/

/* =================================================================
   FONTS
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');

/* =================================================================
   DESIGN TOKENS — override Astra globals for warm palette
   ================================================================= */
:root {
    /* Brand tokens (used by our templates and overrides) */
    --vh-paper:        #FAF7F0;
    --vh-paper-2:      #F4EFE5;
    --vh-paper-3:      #EBE4D2;
    --vh-ink:          #161A18;
    --vh-ink-2:        #4A524E;
    --vh-iron:         #898680;
    --vh-forest:       #1E6044;
    --vh-forest-deep:  #13442F;
    --vh-accent:       #C77033;
    --vh-border:       #E5DECE;
    --vh-border-soft:  #EFE9D9;

    /* Override Astra's variables — affects every page */
    --ast-global-color-0: var(--vh-forest);     /* link */
    --ast-global-color-1: var(--vh-forest-deep);/* link hover */
    --ast-global-color-2: var(--vh-ink);        /* heading/text */
    --ast-global-color-3: var(--vh-ink-2);      /* secondary */
    --ast-global-color-4: var(--vh-paper);      /* primary surface — header uses this */
    --ast-global-color-5: var(--vh-accent);     /* secondary */
    --ast-global-color-6: var(--vh-paper-2);    /* alternate bg */
    --ast-global-color-7: var(--vh-paper-2);    /* subtle bg */
}

/* =================================================================
   BODY + TYPOGRAPHY (site-wide)
   ================================================================= */
body {
    background: var(--vh-paper) !important;
    color: var(--vh-ink);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Astra sets font-family inline on body+input+button — override */
body, button, input, select, textarea,
.ast-button, .ast-custom-button {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.entry-content :where(h1, h2, h3, h4, h5, h6) {
    color: var(--vh-ink);
    letter-spacing: -0.018em;
    line-height: 1.2;
}

a {
    color: var(--vh-forest);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover, a:focus {
    color: var(--vh-forest-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =================================================================
   HEADER — Astra header bar, warm tone
   ================================================================= */
/* Astra applies color via .ast-above-header.ast-above-header-bar
   (double class) — match specificity, then beat with !important. */
.site-header,
.site-header .ast-main-header-wrap,
.site-header .ast-above-header-wrap,
.site-header .ast-above-header,
.site-header .ast-above-header.ast-above-header-bar,
.site-header .ast-above-header-bar,
.site-header .ast-primary-header-bar,
.site-header .main-header-bar,
.site-header .ast-mobile-header-wrap,
#ast-mobile-header,
.ast-mobile-popup-drawer {
    background-color: var(--vh-paper) !important;
    background-image: none !important;
    border-bottom-color: var(--vh-border) !important;
}

.site-header .ast-above-header-bar {
    border-bottom: 1px solid var(--vh-border-soft) !important;
}
.site-header .ast-primary-header-bar { border-bottom: 0 !important; }

/* Menu items */
.site-header .main-header-bar .main-header-menu > .menu-item > a,
.site-header .main-header-menu .menu-item a,
.site-header .ast-builder-menu .menu-item a,
.site-header .ast-above-header-bar .menu-item a {
    color: var(--vh-ink) !important;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: color .15s ease;
}
.site-header .main-header-menu .menu-item a:hover,
.site-header .ast-builder-menu .menu-item a:hover,
.site-header .main-header-menu .current-menu-item > a,
.site-header .ast-above-header-bar .menu-item a:hover {
    color: var(--vh-forest) !important;
}

/* Mobile menu toggle icon */
.site-header .ast-button-wrap .menu-toggle .ast-mobile-svg {
    fill: var(--vh-ink) !important;
}

/* Belt-and-suspenders: keep .site-branding hidden in case any remnant */
.site-header .site-branding,
.site-header .ast-site-identity {
    display: none !important;
}

/* =================================================================
   ENTRY CONTENT — inner pages get warm tone too
   ================================================================= */
.ast-container,
.site-content,
#content {
    background-color: transparent;
}

.entry-content,
.ast-article-single .entry-content,
.ast-article-inner {
    color: var(--vh-ink);
    font-size: 16.5px;
    line-height: 1.65;
}
.entry-content p { color: var(--vh-ink); }
.entry-content h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 700; margin-top: 0; margin-bottom: 18px; }
.entry-content h2 { font-size: clamp(1.4rem, 2.5vw, 1.75rem); font-weight: 600; margin-top: 36px; margin-bottom: 14px; }
.entry-content h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 600; margin-top: 28px; margin-bottom: 10px; }
.entry-content h4 { font-size: 1.1rem; font-weight: 600; margin-top: 22px; margin-bottom: 8px; }

.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: 6px; }
.entry-content blockquote {
    border-left: 2px solid var(--vh-accent);
    padding-left: 18px;
    margin: 22px 0;
    color: var(--vh-ink-2);
    font-style: italic;
}

.entry-content a {
    color: var(--vh-ink);
    border-bottom: 1px solid var(--vh-border);
    transition: color .15s ease, border-color .15s ease;
}
.entry-content a:hover {
    color: var(--vh-forest);
    border-bottom-color: var(--vh-forest);
    text-decoration: none;
}

/* Page title styling */
.ast-article-single .entry-title,
.page .entry-title {
    color: var(--vh-ink);
    letter-spacing: -0.025em;
    font-weight: 700;
}

/* Astra's primary header bar has min-height:133px but we emptied it
   (logo removed). Hide it so menu in above-header sits directly
   above content with no 130-px void below. */
.site-header .ast-primary-header-bar,
.site-header .ast-mobile-header-wrap .ast-primary-header-bar {
    display: none !important;
}

/* Tighten space between header and content */
.site-content,
.site-content > .ast-container,
.ast-container,
.site-content #primary,
.ast-no-sidebar #primary,
.ast-separate-container .site-content,
.ast-separate-container #primary,
.ast-plain-container .site-content,
.ast-page-builder-template .site-content {
    padding-top: 18px !important;
    margin-top: 0 !important;
}
.site-content > * { padding-top: 0 !important; }
#primary { padding-top: 0 !important; }
.ast-article-single { margin-top: 0 !important; }
header.entry-header { padding-top: 0 !important; margin-top: 0 !important; }
.ast-separate-container .ast-article-single .entry-header { padding: 0 0 18px 0 !important; }

/* Unify content width across header, homepage, and inner pages.
   Astra ships site-content-width=1200 (used by header) and
   narrow-container-max-width=750 (used by single posts/pages).
   We force both to 1200 so menu and content edges line up. */
.single .site-content > .ast-container,
.page .site-content > .ast-container,
.single.ast-narrow-container .site-content > .ast-container,
.page.ast-narrow-container .site-content > .ast-container,
.blog .site-content > .ast-container,
.archive .site-content > .ast-container {
    max-width: 1200px !important;
}

/* Single-page container surface — subtle off-paper card, gentle separation.
   Card fills the 1200px container; text inside is constrained for readability. */
.page .ast-article-single,
.single .ast-article-single {
    background: #FEFDF8 !important;
    border: 1px solid var(--vh-border-soft) !important;
    border-radius: 8px !important;
    padding: 40px 56px !important;
    margin: 18px 0 !important;
    box-shadow: 0 1px 0 rgba(229, 222, 206, 0.4);
}
/* Keep prose readable inside wide card — caps line length at ~80ch */
.page .ast-article-single .entry-content,
.single .ast-article-single .entry-content,
.page .ast-article-single .entry-header,
.single .ast-article-single .entry-header {
    max-width: 980px;
}
/* Allow custom layouts (where-to-buy grids, clinical-trials tables) to
   break out of the prose constraint and use the full card width. */
.page .ast-article-single .entry-content .wtb-grid,
.page .ast-article-single .entry-content .wtb-pharma,
.page .ast-article-single .entry-content > table,
.page .ast-article-single .entry-content > figure,
.single .ast-article-single .entry-content > table,
.single .ast-article-single .entry-content > figure {
    max-width: 100%;
}
@media (max-width: 720px) {
    .page .ast-article-single,
    .single .ast-article-single {
        padding: 22px 20px !important;
        margin: 12px 0 !important;
    }
}

/* =================================================================
   TABLES (existing fix + warm border)
   ================================================================= */
.entry-content table,
.entry-content .comparison-table,
.entry-content .pharmacy-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 14px;
}
.entry-content table thead,
.entry-content table tbody {
    display: table;
    width: 100%;
    table-layout: auto;
}
.entry-content table th,
.entry-content table td {
    min-width: 110px;
    white-space: normal;
    word-break: normal;
    border: 1px solid var(--vh-border) !important;
    padding: 10px 12px !important;
    vertical-align: top;
}
.entry-content table th {
    background: var(--vh-paper-2);
    font-weight: 600;
    color: var(--vh-ink);
}

/* =================================================================
   FORMS — site-wide inputs
   ================================================================= */
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="url"],
.entry-content textarea {
    background: #fff;
    border: 1px solid var(--vh-border);
    border-radius: 4px;
    padding: 10px 14px;
    font: 500 15px/1.4 'DM Sans', sans-serif;
    color: var(--vh-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.entry-content input[type="text"]:focus,
.entry-content input[type="email"]:focus,
.entry-content textarea:focus {
    border-color: var(--vh-forest);
    box-shadow: 0 0 0 3px rgba(30, 96, 68, 0.12);
    outline: 0;
}
.entry-content button,
.entry-content input[type="submit"],
.entry-content .wp-block-button__link {
    background: var(--vh-ink);
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 11px 20px;
    font: 500 14px/1 'DM Sans', sans-serif;
    cursor: pointer;
    transition: background .2s ease;
}
.entry-content button:hover,
.entry-content input[type="submit"]:hover,
.entry-content .wp-block-button__link:hover {
    background: var(--vh-forest);
}

/* =================================================================
   FOOTER — warm
   ================================================================= */
.site-footer,
.ast-footer-overlay,
.footer-adv-overlay {
    background-color: var(--vh-paper-2) !important;
    border-top: 1px solid var(--vh-border);
    color: var(--vh-ink-2);
}
.site-footer a { color: var(--vh-ink); }
.site-footer a:hover { color: var(--vh-forest); }
.ast-footer-copyright p {
    color: var(--vh-ink-2);
    font-size: 13px;
}

/* =================================================================
   SMALL POLISH
   ================================================================= */
hr {
    border: 0;
    border-top: 1px solid var(--vh-border);
    margin: 28px 0;
}

::selection {
    background: var(--vh-paper-3);
    color: var(--vh-ink);
}

/* Mobile menu off-canvas — warm too */
.ast-mobile-header-stack .main-header-bar,
.ast-mobile-popup-drawer {
    background: var(--vh-paper) !important;
}
.ast-mobile-popup-drawer .menu-item a {
    color: var(--vh-ink) !important;
    border-bottom: 1px solid var(--vh-border-soft);
}

/* Search field if any */
.search-field {
    background: #fff;
    border: 1px solid var(--vh-border);
    border-radius: 4px;
}

/* Blog cards layout (Astra archive) */
.ast-archive-entry,
.ast-blog-single-element-area,
article.post,
article.page {
    background: transparent;
}

/* Mobile responsive — section padding tighter */
@media (max-width: 720px) {
    .entry-content h1 { font-size: 1.6rem; }
    .entry-content h2 { font-size: 1.3rem; }
}

/* =================================================================
   /where-to-buy/ page-scoped components (page id 30)
   ================================================================= */
.entry-content .wtb-note{display:flex;gap:14px;padding:18px 22px;background:var(--vh-paper-2);border-left:3px solid var(--vh-accent);border-radius:0 8px 8px 0;margin:18px 0 28px}
.entry-content .wtb-note-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--vh-accent);margin-top:9px;box-shadow:0 0 0 5px rgba(199,112,51,.12)}
.entry-content .wtb-note-body p{margin:0 0 6px;color:var(--vh-ink);line-height:1.55}
.entry-content .wtb-note-body p:last-child{margin-bottom:0}

.entry-content .wtb-kicker{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:19px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--vh-accent);margin:36px 0 14px;display:block;line-height:1.3}
.entry-content .wtb-kicker::before{content:"";display:inline-block;width:24px;height:1px;background:var(--vh-accent);vertical-align:middle;margin:-2px 12px 0 0}
.entry-content .wtb-meta{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.04em;color:var(--vh-iron);margin:0 0 4px}

.entry-content .wtb-steps{counter-reset:wtb;list-style:none;padding:0;margin:14px 0 32px}
.entry-content .wtb-steps li{counter-increment:wtb;position:relative;padding:10px 0 12px 44px;border-bottom:1px solid var(--vh-border-soft);line-height:1.55;color:var(--vh-ink)}
.entry-content .wtb-steps li:last-child{border-bottom:0}
.entry-content .wtb-steps li::before{content:counter(wtb,decimal-leading-zero);position:absolute;left:0;top:11px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;color:var(--vh-iron);font-weight:500}

.entry-content .wtb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin:18px 0 32px}
.entry-content .wtb-card{display:flex;flex-direction:column;background:var(--vh-paper);border:1px solid var(--vh-border);border-radius:10px;padding:22px 20px 20px;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.entry-content .wtb-card:hover{border-color:var(--vh-ink);transform:translateY(-2px);box-shadow:0 12px 30px -18px rgba(22,26,24,.25)}
.entry-content .wtb-card-illu{height:96px;display:flex;align-items:center;justify-content:center;margin:-22px -20px 14px;padding:14px;background:#fff;border-bottom:1px solid var(--vh-border-soft);border-radius:9px 9px 0 0}
.entry-content .wtb-card-illu svg{height:34px;width:auto;display:block}
.entry-content .wtb-card-illu img{max-height:80px;width:auto;display:block;object-fit:contain}
.entry-content .wtb-card h3{margin:0 0 2px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--vh-ink)}
.entry-content .wtb-card-generic{margin:0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:var(--vh-iron);letter-spacing:.02em}
.entry-content .wtb-card-price{margin:14px 0 0;color:var(--vh-ink);font-size:14.5px;line-height:1.3}
.entry-content .wtb-card-price strong{font-weight:600;font-size:18px;letter-spacing:-.015em}
.entry-content .wtb-card-price small{display:block;color:var(--vh-iron);font-size:12px;font-weight:400;margin-top:1px;letter-spacing:.01em}
.entry-content .wtb-card-cta{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:9px 0 0;font-size:13.5px;font-weight:500;color:var(--vh-accent) !important;text-decoration:none !important;border-top:1px solid var(--vh-border-soft);border-bottom:0 !important;letter-spacing:.005em}
.entry-content .wtb-card-cta::after{content:"→";font-family:'JetBrains Mono',ui-monospace,monospace;transition:transform .2s ease}
.entry-content .wtb-card-cta:hover::after{transform:translateX(3px)}
.entry-content .wtb-card-cta:hover{color:var(--vh-ink) !important;text-decoration:none !important}

.entry-content .wtb-pharma{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:18px 0 32px}
.entry-content .wtb-pharma-card{display:flex;flex-direction:column;border:1px solid var(--vh-border);border-radius:10px;padding:24px 24px 22px;background:#FEFDF8}
.entry-content .wtb-pharma-tag{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--vh-iron);margin:0 0 6px}
.entry-content .wtb-pharma-card h3{margin:0 0 14px;font-size:19px;font-weight:600;letter-spacing:-.012em;color:var(--vh-ink)}
.entry-content .wtb-pharma-card ul{list-style:none;padding:0;margin:0 0 18px;color:var(--vh-ink-2);font-size:14px;line-height:1.5}
.entry-content .wtb-pharma-card li{padding:6px 0 7px 18px;position:relative;border-bottom:1px solid var(--vh-border-soft)}
.entry-content .wtb-pharma-card li:last-child{border-bottom:0}
.entry-content .wtb-pharma-card li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:1px;background:var(--vh-accent)}
.entry-content .wtb-pay{margin-top:auto;padding-top:12px;border-top:1px dashed var(--vh-border);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.06em;color:var(--vh-iron);display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.entry-content .wtb-pay span{padding:3px 7px;border:1px solid var(--vh-border);border-radius:3px;background:var(--vh-paper);color:var(--vh-ink-2);text-transform:uppercase}
.entry-content .wtb-pharma-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;background:var(--vh-ink);color:#fff !important;border-radius:4px;font-size:13.5px;font-weight:500;text-decoration:none !important;letter-spacing:.005em;align-self:flex-start;transition:background .2s ease;border:0 !important}
.entry-content .wtb-pharma-cta::after{content:"→";font-family:'JetBrains Mono',ui-monospace,monospace}
.entry-content .wtb-pharma-cta:hover{background:var(--vh-accent);color:#fff !important;text-decoration:none !important}

.entry-content .wtb-checklist{list-style:none;padding:0;margin:14px 0 24px}
.entry-content .wtb-checklist li{position:relative;padding:9px 0 10px 30px;border-bottom:1px solid var(--vh-border-soft);color:var(--vh-ink);line-height:1.5}
.entry-content .wtb-checklist li::before{content:"";position:absolute;left:2px;top:14px;width:14px;height:14px;border:1.5px solid var(--vh-forest);border-radius:3px;background:transparent}
.entry-content .wtb-checklist li::after{content:"";position:absolute;left:6px;top:17px;width:7px;height:4px;border-left:1.5px solid var(--vh-forest);border-bottom:1.5px solid var(--vh-forest);transform:rotate(-45deg)}

.entry-content .wtb-plan{background:var(--vh-paper-2);border:1px dashed var(--vh-border);border-radius:10px;padding:22px 26px;margin:18px 0 28px}
.entry-content .wtb-plan p{margin:0 0 8px;color:var(--vh-ink)}
.entry-content .wtb-plan ul{margin:8px 0 0;padding-left:18px;color:var(--vh-ink-2)}
.entry-content .wtb-plan li{margin-bottom:4px}

.entry-content .wtb-sources{font-size:13.5px;color:var(--vh-ink-2)}
.entry-content .wtb-sources a{color:var(--vh-ink-2) !important;border-bottom:1px solid var(--vh-border)}
.entry-content .wtb-sources a:hover{color:var(--vh-forest) !important;border-bottom-color:var(--vh-forest)}

@media (max-width:560px){
    .entry-content .wtb-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .entry-content .wtb-card{padding:18px 16px 16px}
    .entry-content .wtb-card h3{font-size:15.5px}
    .entry-content .wtb-pharma-card{padding:20px 18px}
}