/* ============================================================
   Davis Hugo — Custom CSS
   All color tokens from Davis's style.css:
     body bg      #0a101e
     dark-section #070d1b
     body text    #a9adb8
     headings     #fdfeff
     accent/gold  #fec544
     button text  #070d1b
   ============================================================ */

/* ── Sticky footer: body is a flex column so footer is always at
   viewport bottom even on short pages (e.g. 404).
   ds-page-main wraps block "main" in baseof.html and takes all
   remaining height via flex: 1.                                 ── */
html { height: 100%; }
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
/* flex column so child sections stack normally on all pages AND so
   .ds-error-area can use flex:1 to fill the remaining height on 404 */
.ds-page-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Logo: cap size (st-site-branding has no CSS in style.css) ── */
.st-site-branding img {
    max-width: 120px;
    height: auto;
    display: block;
}

/* ── Play button: always visible on ALL screen sizes ─────────────
   Davis's style.css has:
     @media (max-width:991px) { .st-site-header .st-btn { display:none !important } }
   We must beat that specificity. Wrapping the btn in .ds-play-btn-wrap
   and targeting that wrapper gives us the extra class needed.         */
.ds-play-btn-wrap {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
}
.ds-play-btn-wrap .st-btn {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
}

/* Short vs full label (same pattern as theme17) */
.lx-btn-short { display: none; }
.lx-btn-full  { display: inline; }
@media (max-width: 767px) {
    .lx-btn-full  { display: none !important; }
    .lx-btn-short { display: inline !important; }
}

/* ── Header right: flex so nav + play btn + hamburger align ────── */
.st-main-header-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}
.st-main-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ── Header: transparent at top, dark when scrolled ──────────────
   st-transparent-header zeroes bg + shadow (Davis built-in).
   st-sticky-active (added by main.js at scroll ≥ 10px) comes later
   in style.css so it wins and restores bg:#070d1b when scrolled.
   On mobile keep the header always solid — transparent looks broken
   without the full-width hero visible behind it on narrow screens.   */
@media (max-width: 991px) {
    .st-site-header.st-style1.st-transparent-header {
        background-color: #070d1b !important;
    }
}

/* ── Mobile hamburger button ──────────────────────────────────── */
.ds-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.ds-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #a9adb8;
    border-radius: 1px;
}
@media (max-width: 991px) {
    .ds-hamburger { display: flex; }
    /* Davis's own .st-munu-toggle: hide it since we use ds-hamburger */
    .st-munu-toggle { display: none !important; }
}

/* ── Mobile menu overlay ──────────────────────────────────────── */
.ds-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 90vw;
    height: 100vh;
    background: #070d1b;
    z-index: 99999;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    padding: 30px 24px;
}
.ds-mobile-menu.is-open {
    transform: translateX(0);
}
.ds-mobile-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: #a9adb8;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}
.ds-mobile-close:hover { color: #fdfeff; }
.ds-mobile-logo {
    display: block;
    margin-bottom: 28px;
    margin-top: 8px;
}
.ds-mobile-logo img {
    max-width: 100px;
    height: auto;
}
.ds-mobile-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.ds-mobile-nav li {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ds-mobile-nav li a {
    display: block;
    padding: 14px 0;
    color: #a9adb8;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s;
}
.ds-mobile-nav li a:hover { color: #fec544; }
.ds-mobile-contact-info {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.ds-mobile-contact-info p {
    color: #a9adb8;
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ds-mobile-contact-info p i { color: #fec544; }
.ds-mobile-contact-info p a {
    color: #a9adb8;
    text-decoration: none;
}
.ds-mobile-contact-info p a:hover { color: #fdfeff; }
/* Backdrop */
.ds-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 99998;
}
.ds-mobile-backdrop.is-visible { display: block; }

/* ── Dropdown sub-menu (desktop ≥992px) ──────────────────────── */
.ds-sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #070d1b;
    border: 1px solid rgba(255,255,255,0.08);
    list-style: none;
    padding: 8px 0;
    margin: 0;
    z-index: 100;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.st-nav-list > li { position: relative; }
.st-nav-list > li:hover .ds-sub-menu { display: block; }
.ds-sub-menu li a {
    display: block;
    padding: 10px 18px;
    font-size: 14px;
    color: #a9adb8;
    text-decoration: none;
    transition: color 0.2s;
}
.ds-sub-menu li a:hover { color: #fec544; }

/* ── Hero wrap: single container that holds subheader + breadcrumb strip,
   with ONE #particles-js canvas spanning both zones.
   padding-top: 80px clears the fixed header (position:fixed, 80px tall). ── */
.ds-hero-wrap {
    position: relative;
    background-color: #070d1b;
    overflow: hidden;
    padding-top: 80px;
}

/* ── Page subheader (h1 zone inside hero wrap) ───────────────────── */
.ds-subheader {
    position: relative;   /* sits above the particles canvas */
    z-index: 10;
    padding: 110px 0 60px;
    text-align: center;
}
.ds-subheader h1 {
    color: #fdfeff;
    font-size: 42px;
    margin: 0;
    line-height: 1.25;
}
@media (max-width: 767px) {
    .ds-subheader { padding: 80px 0 40px; }
    .ds-subheader h1 { font-size: 28px; }
}

/* ── Breadcrumb strip (Davis section-heading style, below subheader) ── */
.ds-breadcrumb-strip {
    position: relative;   /* sits above the particles canvas */
    z-index: 10;
    padding: 48px 0;
    text-align: center;
}
@media (max-width: 767px) { .ds-breadcrumb-strip { padding: 34px 0; } }
/* Homepage variant: no HOME link — pad to reproduce same gap from
   underscore to strip bottom as the HOME link provides on other pages.
   Other pages: line→bottom ≈ 34px(margin)+14px(home-h)+48px(pad)−14px(line) = 82px
   So: padding-bottom = 82 + 14 = 96px. */
.ds-breadcrumb-strip--home { padding-bottom: 96px; }

/* Stacking context for the whole strip content */
.ds-page-heading {
    position: relative;
    z-index: 10;
}

/* Inner wrapper that the ghost text anchors to — sized by the title row only,
   so top:50% inside here always centres on the title, not on the HOME link. */
.ds-heading-core {
    position: relative;
}

/* Ghost watermark — anchors to ds-heading-core.
   top:100% positions the ghost's top edge at the bottom of the core (= the
   title's bottom edge). translate(-50%, calc(-50% + 13px)) then centres it
   horizontally and shifts the vertical centre down 13 px — exactly to the
   underscore line (bottom:-14px, height:2px → centre = 13px below title bottom).
   width:max-content lets the element be exactly as wide as the text so that
   translateX(-50%) is always pixel-perfect regardless of text length. */
.ds-heading-bg {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 13px));
    width: max-content;
    font-size: 82px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255,255,255,0.04);
    white-space: nowrap;
    margin: 0;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 991px) { .ds-heading-bg { display: none; } }

/* Foreground title — mirrors st-section-heading-title but a touch smaller */
.ds-heading-title {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fec544;
    position: relative;   /* sits above the ghost within ds-heading-core */
    z-index: 1;
    letter-spacing: 1.5px;
    margin: 0;
}

/* Underscore: grey base + gold centre overlay — identical to Davis */
.ds-heading-title::before {
    content: "";
    position: absolute;
    background-color: #3f4551;
    width: 170px;
    height: 2px;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
}
.ds-heading-title::after {
    content: "";
    position: absolute;
    background-color: #fec544;
    width: 70px;
    height: 2px;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
}

/* HOME link below the underscore */
.ds-heading-home {
    margin-top: 34px;
    position: relative;
    z-index: 10;
}
.ds-heading-home a {
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    transition: color 0.2s;
}
.ds-heading-home a:hover { color: #fec544; }

/* ── Content areas ────────────────────────────────────────────── */
/* All content areas share the same 60px top padding so the gap between
   the hero bottom edge and the first content block is consistent across
   home and all inner pages.                                            */
.ds-content-area,
.ds-home-content-area {
    padding: 60px 0;
}
.ds-content-area--no-bottom { padding-bottom: 0; }
@media (max-width: 767px) {
    .ds-content-area,
    .ds-home-content-area { padding: 40px 0; }
}

/* ── Article prose ────────────────────────────────────────────── */
.ds-article,
.ds-article-home {
    font-size: 16px;
    line-height: 1.8;
    color: #a9adb8;
    width: 100%;
}
.ds-article > * + *,
.ds-article-home > * + * { margin-top: 1.2em; }

.ds-article h1,.ds-article h2,.ds-article h3,
.ds-article h4,.ds-article h5,.ds-article h6,
.ds-article-home h1,.ds-article-home h2,.ds-article-home h3,
.ds-article-home h4,.ds-article-home h5,.ds-article-home h6 {
    color: #fdfeff;
    line-height: 1.3;
    font-weight: 700;
    margin-top: 1.3em;
    margin-bottom: 0.4em;
}
.ds-article h1,.ds-article-home h1 { font-size: 36px; margin-bottom: 0.6em; }
.ds-article h2,.ds-article-home h2 { font-size: 28px; }
.ds-article h3,.ds-article-home h3 { font-size: 22px; }
.ds-article h4,.ds-article-home h4 { font-size: 18px; }
.ds-article h5,.ds-article-home h5 { font-size: 15px; }
.ds-article h6,.ds-article-home h6 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }

/* Lists */
.ds-article ul:not([class]),
.ds-article-home ul:not([class]) {
    list-style: disc;
    padding-left: 1.6em;
    margin-bottom: 1em;
}
.ds-article ol:not([class]),
.ds-article-home ol:not([class]) {
    list-style: decimal;
    padding-left: 1.6em;
    margin-bottom: 1em;
}
.ds-article ul:not([class]) li,
.ds-article ol:not([class]) li,
.ds-article-home ul:not([class]) li,
.ds-article-home ol:not([class]) li {
    list-style: inherit;
    padding: 0;
    margin: 0 0 0.25em 0;
}
/* Links */
.ds-article a, .ds-article-home a {
    color: #fec544;
    text-decoration: underline;
    transition: color 0.2s;
}
.ds-article a:hover, .ds-article-home a:hover { color: #fdfeff; }

/* iFrames */
.ds-article iframe, .ds-article-home iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 500px;
    display: block;
    border: none;
    margin: 1.5em 0;
}
@media (max-width: 767px) {
    .ds-article iframe, .ds-article-home iframe { height: 280px; }
}

/* ── Tables: desktop = normal flow; tablet+mobile = horizontal scroll ── */
.ds-table-scroll {
    width: 100%;
    margin: 1.5em 0;
    border-radius: 4px;
}
@media (max-width: 991px) {
    .ds-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ds-table-scroll table { min-width: max-content; }
}

article table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
}
article table th {
    background: #fec544;
    color: #070d1b;
    padding: 11px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}
article table td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    vertical-align: top;
    color: #a9adb8;
}
article table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
article table tbody tr:hover td { background: rgba(255,255,255,0.06); }
/* Tablet + mobile: scrollable table with nowrap so columns don't crush */
@media (max-width: 991px) {
    article table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    article table th,
    article table td { white-space: nowrap; }
}
@media (max-width: 767px) {
    article table th,
    article table td { padding: 8px 12px; }
}

/* ── ToC shortcode ────────────────────────────────────────────── */
.ds-toc {
    background: rgba(255,255,255,0.04);
    border-left: 3px solid #fec544;
    padding: 16px 20px;
    margin-bottom: 28px;
    border-radius: 4px;
}
.ds-toc-toggle {
    background: none;
    border: none;
    padding: 0; margin: 0;
    font: inherit;
    color: #fdfeff;
    text-align: left;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Remove the browser focus ring when clicked with a pointer; keep it for
   keyboard navigation so the element remains accessible.               */
.ds-toc-toggle:focus:not(:focus-visible) { outline: none; }
.ds-toc-toggle::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 0.2s ease;
}
.ds-toc.is-open .ds-toc-toggle::after { transform: rotate(180deg); }
.ds-toc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    margin-top: 0;
}
.ds-toc.is-open .ds-toc-body { max-height: 3000px; margin-top: 10px; }
.ds-toc-body ul { margin: 0; padding-left: 0; list-style: none; }
.ds-toc-body ul ul { padding-left: 14px; margin-top: 4px; }
.ds-toc-body li { margin-bottom: 4px; font-size: 14px; }
.ds-toc-body a { color: #a9adb8; text-decoration: none; }
.ds-toc-body a:hover { color: #fec544; text-decoration: underline; }

/* ── FAQ accordion ────────────────────────────────────────────── */
.ds-faq-wrapper { margin-top: 2.5rem; }
.ds-faq-title { font-size: 22px; font-weight: 700; color: #fdfeff; margin-bottom: 1.2rem; }
.ds-accordion-box {
    list-style: none;
    padding: 0; margin: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.ds-accordion { border-bottom: 1px solid rgba(255,255,255,0.1); }
.ds-acc-btn {
    padding: 18px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #fdfeff;
    user-select: none;
}
.ds-acc-icon { flex-shrink: 0; font-size: 12px; color: #fec544; transition: transform 0.3s ease; }
.ds-accordion.is-open .ds-acc-icon { transform: rotate(180deg); }
.ds-acc-content {
    display: none;
    padding-bottom: 18px;
    font-size: 15px;
    line-height: 1.75;
    color: #a9adb8;
}
.ds-accordion.is-open .ds-acc-content { display: block; }

/* ── Section page: child card grid ───────────────────────────── */
.ds-card {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    height: 100%;
    background: rgba(255,255,255,0.03);
    transition: border-color 0.2s, transform 0.2s;
}
.ds-card:hover {
    border-color: #fec544;
    transform: translateY(-2px);
}
.ds-card-inner { padding: 24px; }
.ds-card-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.ds-card-title a { color: #fdfeff; text-decoration: none; }
.ds-card-title a:hover { color: #fec544; }
.ds-card-divider { width: 40px; height: 2px; background: #fec544; margin-bottom: 12px; }
.ds-card-desc { font-size: 14px; color: #a9adb8; line-height: 1.7; margin-bottom: 16px; }
.ds-card-btn { font-size: 13px; }

/* ── 404 page ─────────────────────────────────────────────────── */
/* flex:1 fills the full remaining viewport height (ds-page-main is a
   flex column). justify-content:center then truly centres the block
   vertically. padding-top:80px reserves space for the fixed header so
   the text is never hidden behind it.                                */
.ds-error-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 20px 40px;
    text-align: center;
}
.ds-error-code { font-size: 48px; font-weight: 800; color: #fdfeff; margin-bottom: 16px; }
.ds-error-text { font-size: 18px; color: #a9adb8; margin-bottom: 32px; }
@media (max-width: 767px) {
    .ds-error-area { padding: 80px 20px 40px; }
    .ds-error-code { font-size: 32px; }
}

/* ── Contact page additions ───────────────────────────────────── */
/* Davis's st-dark-bg + native st-contact-* classes handle most styling.
   These fill gaps not covered by style.css.                           */
.ds-contact-section {
    padding: 70px 0 90px;
}
/* Address as map link — inherits contact-info item style, no underline */
.ds-contact-info .ds-address-link {
    color: #a9adb8;
    text-decoration: none;
    transition: color 0.2s;
}
.ds-contact-info .ds-address-link:hover { color: #fec544; }

/* ── Footer ───────────────────────────────────────────────────── */
.ds-footer {
    background: #070d1b;
    color: rgba(255,255,255,0.55);
    padding: 50px 0 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}
/* Logo + disclaimer wrapper */
.ds-footer-disclaimer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ds-footer-logo img {
    max-width: 120px;
    height: auto;
}
.ds-footer-disclaimer-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;
}
@media (max-width: 767px) {
    .ds-footer-disclaimer-blocks { grid-template-columns: 1fr; }
}
.ds-disclaimer-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
}
.ds-disclaimer-text {
    font-size: 12px;
    line-height: 1.65;
    color: rgba(255,255,255,0.4);
    margin: 0;
}
.ds-disclaimer-text strong { color: rgba(255,255,255,0.7); }
/* Footer nav links */
.ds-footer-links {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ds-footer-links ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px 20px;
}
.ds-footer-links ul li a {
    color: rgba(255,255,255,0.55);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}
.ds-footer-links ul li a:hover { color: #fec544; }
/* Bottom bar */
.ds-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 0;
}
.ds-copyright { font-size: 14px; color: rgba(255,255,255,0.35); }
.ds-trust-logos {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ds-trust-logos img {
    height: 22px; width: auto;
    object-fit: contain;
    opacity: 0.5;
    filter: grayscale(100%);
    transition: opacity 0.25s, filter 0.25s;
    max-width: none;
}
.ds-trust-logos img:hover { opacity: 1; filter: grayscale(0%); }
@media (max-width: 767px) {
    .ds-footer-bottom { flex-direction: column; align-items: flex-start; }
}