/*
 * Shell styles for the rebuilt home app: the header, the footer, the cookie
 * banner and the document pages (privacy, terms, support) that layouts/plain
 * renders. Bootstrap 5.3.8 plus theme.css come first; only what Bootstrap
 * does not already give us is written here, per the Bootstrap-utilities-first
 * convention.
 *
 * Sections: base · header · footer · cookie banner · document page · video embed
 */

/* ── Base ───────────────────────────────────────────────────────────────── */

body {
    /* Sticky footer: the shell is a column, the main region takes the slack,
       so a short page still pins its footer to the bottom of the viewport. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--spheyas-surface);
    -webkit-font-smoothing: antialiased;
}

.site-main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

/* A page shorter than the viewport would otherwise end its last band mid-screen
   and leave bare white above the footer. Only the last band grows — stretching
   every child would blow the tinted page head of a content page up to a third of
   the viewport. */
.site-main > :last-child {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--spheyas-font-heading);
    font-weight: 700;
    line-height: var(--spheyas-leading-tight);
    letter-spacing: -0.01em;
}

/* Focus visible for keyboard users only — Bootstrap's ring, brand coloured */
:focus-visible {
    outline: 2px solid var(--spheyas-blue);
    outline-offset: 2px;
}

/* Motion is opt-out across the whole app, declared once here rather than in
   each component that animates. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Header ─────────────────────────────────────────────────────────────────
   Minimal bar for the document pages: the mark, and a way back to the site.
   The marketing navbar is a separate partial and does not share this. */

.site-header {
    border-bottom: 1px solid var(--spheyas-border);
    background-color: var(--spheyas-surface);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spheyas-space-4);
    min-height: 68px;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
}

.site-header__logo img {
    width: 180px;
    height: 40px;
}

/* Full-size logo and the back link crowd each other on a narrow phone */
@media (max-width: 575.98px) {
    .site-header__logo img {
        width: 140px;
        height: 31px;
    }
}

.site-header__back {
    color: var(--spheyas-ink-muted);
    font-size: var(--spheyas-text-sm);
    text-decoration: none;
    transition: color var(--spheyas-transition-fast);
}

.site-header__back:hover,
.site-header__back:focus {
    color: var(--spheyas-blue-dark);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
    flex-shrink: 0;
    padding: var(--spheyas-space-6) 0;
    border-top: 1px solid var(--spheyas-border);
    background-color: var(--spheyas-surface-sunken);
    color: var(--spheyas-ink-muted);
    font-size: var(--spheyas-text-sm);
}

.site-footer a {
    color: var(--spheyas-ink-muted);
    text-decoration: none;
    transition: color var(--spheyas-transition-fast);
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--spheyas-blue-dark);
    text-decoration: underline;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spheyas-space-2) var(--spheyas-space-5);
}

/* ── Cookie consent ─────────────────────────────────────────────────────────
   Was three copies of the same inline styles across the layouts; the styling
   lives here now and the markup is a partial.

   A blocking dialog rather than a dismissible strip: the choice is made before
   the page is usable, so no measurable pageview happens in an ambiguous consent
   state. Deliberately above Bootstrap's modal z-index — nothing on the site
   should ever paint over the consent choice. */

.cookie-consent {
    position: fixed;
    inset: 0;
    z-index: 1080; /* over Bootstrap's $zindex-modal (1055) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spheyas-space-4);
    background-color: rgba(15, 23, 20, 0.72);
    /* Progressive: unsupported browsers simply get the flat scrim above. */
    backdrop-filter: blur(3px);
    animation: cookie-consent-fade 0.18s ease-out;
}

.cookie-consent[hidden] {
    display: none; /* [hidden] alone loses to display:flex */
}

.cookie-consent-dialog {
    width: 100%;
    max-width: 32rem;
    max-height: calc(100vh - var(--spheyas-space-8));
    overflow-y: auto;
    padding: clamp(1.5rem, 1rem + 2.5vw, 2.25rem);
    border-radius: var(--spheyas-radius-lg);
    background-color: var(--spheyas-surface, #fff);
    box-shadow: var(--spheyas-shadow-lg);
    animation: cookie-consent-rise 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.cookie-consent-title {
    margin-bottom: var(--spheyas-space-2);
    font-size: var(--spheyas-text-xl);
}

.cookie-consent-body {
    margin-bottom: var(--spheyas-space-4);
    color: var(--spheyas-ink-muted);
    font-size: var(--spheyas-text-sm);
}

.cookie-consent-body p:last-child {
    margin-bottom: 0;
}

/* Accept sits first in the DOM so it takes focus and the Enter key; the visual
   order is reversed on wider screens to put the primary action on the right. */
.cookie-consent-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spheyas-space-2);
}

@media (min-width: 576px) {
    .cookie-consent-actions {
        flex-direction: row-reverse;
        justify-content: flex-start;
    }
}

@keyframes cookie-consent-fade {
    from { opacity: 0; }
}

@keyframes cookie-consent-rise {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-consent,
    .cookie-consent-dialog {
        animation: none;
    }
}

/* Set on <body> while the dialog is open so the page behind cannot be scrolled. */
.cookie-consent-open {
    overflow: hidden;
}

/* ── Cookie consent strip (landing layout) ──────────────────────────────────
   The non-blocking variant: a fixed bar at the foot of the viewport. The page
   behind stays fully usable — an ad visitor sees the offer they clicked, not a
   wall. Equal Accept/Decline buttons keep decline as easy as accept, which is
   what consent requires; blocking the page is not.

   Shares the [hidden] display rule and its element ids with the dialog, so the
   consent logic in the partial is the same code either way. */
.cookie-consent.cookie-consent-strip {
    inset: auto 0 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spheyas-space-3);
    padding: var(--spheyas-space-3) var(--spheyas-space-4);
    background-color: var(--spheyas-surface, #fff);
    border-top: 1px solid var(--spheyas-border);
    box-shadow: 0 -2px 12px rgb(0 0 0 / 0.08);
    animation: none;
    /* The dialog blurs what is behind its scrim; the strip is opaque, so the
       inherited blur buys nothing and only promotes a compositing layer. */
    backdrop-filter: none;
}

.cookie-consent-strip-body {
    flex: 1 1 16rem;
    margin: 0;
    color: var(--spheyas-ink-muted);
    font-size: var(--spheyas-text-sm);
}

/* The dialog's actions reverse (primary right); the strip reads left to right. */
.cookie-consent-strip-actions {
    flex-direction: row;
}

@media (min-width: 576px) {
    .cookie-consent-strip-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* ── Document page ──────────────────────────────────────────────────────────
   Privacy, terms and support: one long column of prose on a card. The measure
   is capped for readability rather than filling a 12-column row. */

.document-page {
    padding: var(--spheyas-space-7) 0;
    background-color: var(--spheyas-surface-sunken);
}

.document-card {
    padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    border: 1px solid var(--spheyas-border);
    border-radius: var(--spheyas-radius-lg);
    background-color: var(--spheyas-surface);
    box-shadow: var(--spheyas-shadow);
}

.document-title {
    margin-bottom: var(--spheyas-space-2);
    font-size: var(--spheyas-text-3xl);
}

.document-lead {
    margin-bottom: var(--spheyas-space-6);
    color: var(--spheyas-ink-muted);
    font-size: var(--spheyas-text-lg);
}

/* Body copy: element-level, because the legal text is plain markup with no
   classes to hang utilities off. */
.document-body {
    max-width: var(--spheyas-measure);
    line-height: var(--spheyas-leading-prose);
}

.document-body h2 {
    margin-top: var(--spheyas-space-7);
    margin-bottom: var(--spheyas-space-3);
    font-size: var(--spheyas-text-xl);
}

.document-body h3 {
    margin-top: var(--spheyas-space-5);
    margin-bottom: var(--spheyas-space-2);
    font-size: var(--spheyas-text-lg);
}

.document-body > h2:first-child,
.document-body > h3:first-child {
    margin-top: 0;
}

.document-body p,
.document-body ul,
.document-body ol {
    margin-bottom: var(--spheyas-space-4);
}

.document-body li + li {
    margin-top: var(--spheyas-space-1);
}

.document-body hr {
    margin: var(--spheyas-space-6) 0;
    border-top: 1px solid var(--spheyas-border);
    opacity: 1;
}

/* Section separator inside the support page, where each block is a question
   set rather than continuous prose */
.document-section + .document-section {
    margin-top: var(--spheyas-space-6);
    padding-top: var(--spheyas-space-6);
    border-top: 1px solid var(--spheyas-border);
}

/* The section already owns its top spacing through the rule above, so this
   heading opts out of the generic h2 margin */
.document-section__title {
    margin-top: 0;
    margin-bottom: var(--spheyas-space-4);
    font-size: var(--spheyas-text-xl);
}

/* Contact tiles at the head of the support page */
.contact-card {
    height: 100%;
    padding: var(--spheyas-space-5);
    border: 1px solid var(--spheyas-border);
    border-radius: var(--spheyas-radius);
    background-color: var(--spheyas-blue-tint-soft);
}

.contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--spheyas-space-3);
    border-radius: var(--spheyas-radius-pill);
    background-color: var(--spheyas-blue);
    color: #fff;
}

.contact-card__title {
    margin-bottom: var(--spheyas-space-2);
    font-size: var(--spheyas-text-lg);
}

/* ── Product card ───────────────────────────────────────────────────────────
   The product picker. The whole card is the link, so the hit target is the tile
   rather than a button inside it. */

.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: var(--spheyas-space-6) var(--spheyas-space-5);
    border: 1px solid var(--spheyas-border);
    border-radius: var(--spheyas-radius-lg);
    background-color: var(--spheyas-surface);
    box-shadow: var(--spheyas-shadow-sm);
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition: transform var(--spheyas-transition), box-shadow var(--spheyas-transition), border-color var(--spheyas-transition);
}

.product-card:hover,
.product-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--spheyas-blue);
    box-shadow: var(--spheyas-shadow);
    color: inherit;
}

.product-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--spheyas-space-4);
    border-radius: var(--spheyas-radius-pill);
    background-color: var(--spheyas-blue-tint);
    color: var(--spheyas-blue-dark);
    font-size: var(--spheyas-text-lg);
}

.product-card__name {
    font-family: var(--spheyas-font-heading);
    font-size: var(--spheyas-text-xl);
    font-weight: 700;
}

.product-card__description {
    margin-top: var(--spheyas-space-2);
    color: var(--spheyas-ink-muted);
    font-size: var(--spheyas-text-sm);
}

.product-card__action {
    margin-top: var(--spheyas-space-4);
    color: var(--spheyas-blue-dark);
    font-weight: 600;
}

/* Question and answer pairs */
.faq-item + .faq-item {
    margin-top: var(--spheyas-space-5);
}

.faq-item__question {
    margin-bottom: var(--spheyas-space-2);
    font-size: var(--spheyas-text-base);
    font-weight: 700;
}

.faq-item__answer {
    margin-bottom: 0;
    color: var(--spheyas-ink-muted);
}

/* ── Video embed ────────────────────────────────────────────────────────────
   The click-to-play facade from home/templates/views/video.php. Here rather
   than in marketing.css because the support page renders one through
   layouts/plain, which loads this file and not that one.

   The wrapper owns the aspect ratio so the poster and the iframe that replaces
   it occupy exactly the same box — the swap on click must not move the page. */

.video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 52rem;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--spheyas-radius-lg);
    background-color: var(--spheyas-ink);
    box-shadow: var(--spheyas-shadow-lg);
}

/* Resets the button back to a bare frame around the poster */
.video-embed__trigger {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.video-embed__poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Lifts the play button off a busy frame without dimming it to the point
       the founder's face stops reading as a person */
    filter: brightness(0.92);
    transition: transform var(--spheyas-transition), filter var(--spheyas-transition);
}

.video-embed__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    /* translate before scale, so the hover growth happens about the centre */
    transform: translate(-50%, -50%);
    border-radius: var(--spheyas-radius-pill);
    background-color: var(--spheyas-blue);
    color: #fff;
    font-size: var(--spheyas-text-xl);
    /* The triangle's own whitespace sits to its left, so it reads off-centre
       in a circle unless it is nudged back */
    text-indent: 0.15em;
    box-shadow: var(--spheyas-shadow);
    transition: transform var(--spheyas-transition), background-color var(--spheyas-transition);
    pointer-events: none;
}

.video-embed__trigger:hover .video-embed__poster,
.video-embed__trigger:focus-visible .video-embed__poster {
    filter: brightness(1);
    transform: scale(1.02);
}

.video-embed__trigger:hover .video-embed__play,
.video-embed__trigger:focus-visible .video-embed__play {
    transform: translate(-50%, -50%) scale(1.08);
    background-color: var(--spheyas-blue-dark);
}

.video-embed__player {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .video-embed__poster,
    .video-embed__play {
        transition: none;
    }

    .video-embed__trigger:hover .video-embed__poster,
    .video-embed__trigger:focus-visible .video-embed__poster {
        transform: none;
    }

    .video-embed__trigger:hover .video-embed__play,
    .video-embed__trigger:focus-visible .video-embed__play {
        transform: translate(-50%, -50%);
    }
}