/* Cookie consent banner — Digital Specialist landing.
   See compliance/landing-plan.md. Consent-first: no analytics loads until opt-in. */
/* A fixed bottom overlay must NOT steal space from the page.
   .ds-cc is position:fixed, so it paints over the document instead of taking room in
   it: at 375x812 it covered the hero's "ANDROID APP" button completely (elementFromPoint
   at its centre returned div.ds-cc__inner — this is the real cause of the "the Google
   Play link doesn't work" report), and it sat on the footer nav, which lives at maximum
   scroll and therefore had no scroll relief at all — including "Cookie settings", the
   one control that reopens this banner.
   While the banner is up, js/cookie-consent.js measures it and reserves exactly its
   height at the bottom of the document, so every element can be scrolled clear of it.
   The class goes on .site-footer (dark, and the last block on every page, so the
   reserved strip is invisible) and is removed the moment consent is given.
   Making the banner SHORTER is not a fix and was verified not to be one. */
.ds-cc-offset {
    padding-bottom: var(--ds-cc-height, 0px);
}

.ds-cc {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: rgba(20, 22, 30, .97);
    color: #fff;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .35);
    font-family: 'Heebo', Arial, sans-serif;
    animation: ds-cc-in .25s ease-out;
}

@keyframes ds-cc-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.ds-cc__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ds-cc__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    flex: 1 1 320px;
    color: #e8eaf0;
}

.ds-cc__link { color: #fff; text-decoration: underline; }

.ds-cc__actions { display: flex; gap: 10px; flex: 0 0 auto; }

/* Reject and Accept are the same size — refusal must be as easy as acceptance. */
.ds-cc__btn {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    min-width: 120px;
    min-height: 44px;
}

.ds-cc__btn--accept { background: #5b6ee1; color: #fff; }
.ds-cc__btn--accept:hover { background: #4a5cd0; }
.ds-cc__btn--reject { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.ds-cc__btn--reject:hover { background: rgba(255, 255, 255, .12); }

/* Mobile footprint.
   The banner is position:fixed at the bottom, so every pixel of it hides page content —
   at 16px/20px padding, 14px/1.5 text and a 16px gap it measured 188px, i.e. 23% of a
   375x812 screen, and sat on top of the footer. Trimming the chrome (not the wording)
   brings it to roughly 130px / 16%: tighter padding, one notch smaller type, a tighter
   line-height and a smaller gap. Deliberately NOT reduced: the 44px minimum button height
   (touch target) and the Reject/Accept parity — both buttons keep sharing one .ds-cc__btn
   rule, so refusal stays exactly as easy and as prominent as acceptance.
   Note: no viewport-fit=cover / env(safe-area-inset-*) here — analysed and rejected. */
@media (max-width: 640px) {
    .ds-cc__inner {
        flex-direction: column;
        align-items: stretch;
        /* 28px, not 10px, at the bottom. In an edge-to-edge Android webview the bottom
           48px of the viewport is under the three-button navigation bar; with 10px the
           44px Accept/Reject buttons ended 10px from the edge, leaving 6px of tappable
           height above that band. 28px puts their top edge 72px up, restoring the 24px
           of clearance the banner had before it was trimmed.
           This costs 18px of banner height, which is now free: the .ds-cc-offset rule
           above reserves the banner's height in the document, so extra chrome no longer
           hides page content. Still no viewport-fit=cover / env(safe-area-inset-*) —
           that was analysed and deliberately rejected. */
        padding: 10px 14px 28px;
        gap: 10px;
    }
    /* In the column layout the base `flex: 1 1 320px` would reserve a 320px-tall
       text block (empty space below the text) — a large gap before the buttons.
       Reset to content height so the actions sit right under the text. */
    .ds-cc__text { flex: 0 0 auto; font-size: 13px; line-height: 1.4; }
    .ds-cc__actions { justify-content: stretch; }
    /* One rule for both buttons: same size, same weight, same row.
       line-height is set explicitly because the global stylesheet gives every <button>
       line-height:30px, which inflated the control to 56px even though min-height is 44. */
    .ds-cc__btn { flex: 1; min-width: 0; padding: 10px 12px; font-size: 13px; line-height: 1.2; }
}