/* ── CIRCL brand foundation ─────────────────────────────────────────────
   Single source of truth for brand tokens + the self-hosted brand typeface.
   Loaded by every head (portals, funnel, marketing, auth, error pages) via
   versioned_asset('brand/circl.css'). Page-specific layers (assets/css/custom.css
   for the portals, steps/css/questionnaire.css for the funnel, assets/style.css
   for the legacy landing page) build on these variables — don't hardcode brand
   colours elsewhere. Palette + type spec: CIRCL Brand Guide (pp. 25–26).       */

@font-face {
    font-family: 'Zalando Sans SemiExpanded';
    src: url('fonts/ZalandoSansSemiExpanded-wght.ttf') format('truetype-variations'),
         url('fonts/ZalandoSansSemiExpanded-wght.ttf') format('truetype');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Zalando Sans SemiExpanded';
    src: url('fonts/ZalandoSansSemiExpanded-Italic-wght.ttf') format('truetype-variations'),
         url('fonts/ZalandoSansSemiExpanded-Italic-wght.ttf') format('truetype');
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Palette */
    --circl-black:       #0b131e;   /* primary ink, primary CTA */
    --circl-black-deep:  #081417;   /* dark surfaces */
    --circl-burgundy:    #371815;   /* dark-gradient end, hover on black */
    --circl-light-blue:  #e4f0f6;   /* soft accent surface */
    --circl-grey:        #f1f2f0;   /* page ground */
    --circl-light-grey:  #f7f7f7;   /* alt surface */
    --circl-white:       #ffffff;
    --circl-lemon:       #fffcab;   /* energy accent, secondary CTA */

    /* Derived */
    --circl-ink:         var(--circl-black);
    --circl-ink-muted:   #4b5563;
    --circl-ink-subtle:  #6b7280;
    --circl-line:        #dfe3e6;
    --circl-black-hover: #1e2a36;
    --circl-lemon-hover: #fff58a;
    --circl-light-blue-hover: #d3e6f0;
    --circl-danger:      #b42318;
    --circl-success:     #1f7a4d;

    /* Gradients (brand guide "light" / "dark" gradients) */
    --circl-gradient-light: linear-gradient(160deg, #e4f0f6 0%, #f1f2f0 100%);
    --circl-gradient-dark:  linear-gradient(135deg, #0b131e 0%, #0b131e 55%, #371815 100%);

    /* Type */
    --circl-font: 'Zalando Sans SemiExpanded', 'Helvetica Neue', Arial, sans-serif;
    --circl-tracking-tight: -0.02em;   /* headlines/body: tracking -30 */
    --circl-tracking-caps:   0.1em;    /* uppercase descriptors: tracking 100 */

    /* Shape */
    --circl-radius-card: 16px;
    --circl-radius-input: 10px;
    --circl-radius-pill: 999px;
    --circl-shadow-card: 0 1px 2px rgba(11, 19, 30, .04), 0 8px 24px rgba(11, 19, 30, .06);
}

/* Utility classes shared by the hand-written pages (funnel, auth, marketing). */
.circl-font { font-family: var(--circl-font) !important; }
.circl-eyebrow {
    font-family: var(--circl-font);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: var(--circl-tracking-caps);
    text-transform: uppercase;
    color: var(--circl-ink-muted);
}
.circl-headline {
    font-family: var(--circl-font);
    font-weight: 500;
    letter-spacing: var(--circl-tracking-tight);
    line-height: 1.05;
    color: var(--circl-ink);
}
.circl-btn,
.circl-btn-secondary,
.circl-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--circl-font);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: var(--circl-tracking-tight);
    line-height: 1;
    padding: 14px 26px;
    border-radius: var(--circl-radius-pill);
    border: 2px solid transparent;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.circl-btn { background: var(--circl-black); color: var(--circl-white) !important; border-color: var(--circl-black); }
.circl-btn:hover, .circl-btn:focus { background: var(--circl-black-hover); border-color: var(--circl-black-hover); color: var(--circl-white) !important; }
.circl-btn-secondary { background: var(--circl-lemon); color: var(--circl-black) !important; border-color: var(--circl-lemon); }
.circl-btn-secondary:hover, .circl-btn-secondary:focus { background: var(--circl-lemon-hover); border-color: var(--circl-lemon-hover); }
.circl-btn-outline { background: transparent; color: var(--circl-black) !important; border-color: var(--circl-black); }
.circl-btn-outline:hover, .circl-btn-outline:focus { background: var(--circl-black); color: var(--circl-white) !important; }
.circl-btn-outline.on-dark { color: var(--circl-white) !important; border-color: var(--circl-white); }
.circl-btn-outline.on-dark:hover { background: var(--circl-white); color: var(--circl-black) !important; }
/* The brand's "+" bubble that sits at the end of a primary CTA pill */
.circl-btn .plus {
    display: inline-grid;
    place-items: center;
    width: 22px; height: 22px;
    margin: -6px -12px -6px 4px;
    border-radius: 50%;
    background: var(--circl-white);
    color: var(--circl-black);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
}
.circl-card {
    background: var(--circl-white);
    border-radius: var(--circl-radius-card);
    box-shadow: var(--circl-shadow-card);
}
.circl-surface-dark {
    background: var(--circl-gradient-dark);
    color: var(--circl-white);
}
.circl-surface-light { background: var(--circl-gradient-light); }
/* Logo super-graphic: the mark as a faint, oversized background element */
.circl-supergraphic { position: relative; overflow: hidden; isolation: isolate; }
.circl-supergraphic::before {
    content: '';
    position: absolute;
    right: -12%;
    top: -20%;
    width: 70%;
    aspect-ratio: 242.79 / 236.84;
    background: url('logo/circl-mark-black.svg') no-repeat center / contain;
    opacity: .05;
    pointer-events: none;
    z-index: -1;
}
.circl-surface-dark.circl-supergraphic::before { background-image: url('logo/circl-mark-white.svg'); }

/* ── Transition mark ────────────────────────────────────────────────────
   The rebrand is recent, so every on-screen brand lockup carries a quiet
   "Formerly Higeia" line. Patients signed up under the old name and need to
   recognise the portal, the funnel and the sender without having to think
   about it.

   Two deliveries, same look:

   1. A ::after on the element that WRAPS the logo. The same lockup repeats
      ~90 times across the four portal headers (each with dark/light and
      sm/lg variants), the login cards and the funnel header; one rule covers
      every one of them, and removing the line later is deleting this block
      rather than unpicking 90 edits.
   2. A real .circl-formerly element, for the handful of places where the
      logo is a sibling of the page content rather than wrapped (error
      pages, the SMS consult link) and a ::after would
      land at the bottom of the card instead of under the mark.

   .logo-sm is deliberately excluded: that is the collapsed-sidebar mark,
   where there is no room for a second line. .auth-logo is excluded too --
   the login and forgot-password pages stack it ABOVE a card that already
   contains a .logo-lg, so tagging both would print the line twice on one
   screen. The in-card lockup is the primary one and carries it.

   Email cannot use pseudo-elements at all — Outlook's Word renderer drops
   them, and external stylesheets with them — so mail carries inline-styled
   markup instead; see brand_formerly_html() in app/Helpers/helpers.php.
   This block and that helper come out together once the old name has
   stopped meaning anything to patients.

   NZ never shows it (Higeia never traded there): partials/brand-css switches
   this block off on NZ hosts, and brand_formerly_html() returns nothing for
   an NZ recipient. */
.logo-lg,
.higeia-logo,
.dc-brand,
.mobile-topbar-left > a {
    display: block;
}

.logo-lg::after,
.higeia-logo::after,
.dc-brand::after,
.mobile-topbar-left > a::after {
    content: 'Formerly Higeia';
}

.logo-lg::after,
.higeia-logo::after,
.dc-brand::after,
.mobile-topbar-left > a::after,
.circl-formerly {
    display: block;
    margin-top: 5px;
    font-family: var(--circl-font);
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--circl-ink-subtle);
    white-space: nowrap;
}

/* The portal sidebars come from the vendor theme, which puts line-height:70px
   on .logo-lg. The mark is 40px, so the inline image sits in a 70px line box
   with ~15px of half-leading underneath it, and the line lands 19px below the
   wordmark instead of tucked under it. Pulling the pseudo-element back up by
   10px closes that to an optical 5px, matching every other lockup.

   Done here rather than by fixing the line-height: that box also sets the
   sidebar header's height, and shrinking it moves the logo itself up 16px. */
/* Scoped to the sidebar's .logo anchor, which is where the 70px line box
   lives. The login and password pages print a bare .logo-lg inside a card
   with normal line-height, and there the pull would drag the line up into
   the wordmark. */
.logo .logo-lg::after {
    margin-top: -10px;
}

/* Left-aligned lockups (sidebar, mobile topbar) tuck the line under the
   wordmark, not under the mark: the "C" of CIRCL starts 27% of the way
   across the horizontal logo (x=148 of a 550-wide viewBox). Centred lockups
   (login cards) stay centred under the whole logo. The two img widths in
   play are 180px (sidebar) and 144px (mobile topbar). */
.logo .logo-lg::after {
    margin-left: 48px;
}
.mobile-topbar-left > a::after {
    margin-left: 39px;
}

/* Login and password cards print a bare .logo-lg inside .text-center with
   an inline <img>, which leaves descender space under the mark; the line
   then sits ~11px below instead of the 5px every other lockup gets. */
.card .logo-lg img {
    display: block;
    margin: 0 auto;
}
.card .logo-lg::after {
    margin-top: 4px;
}

/* Centred lockups keep the line centred with the mark. */
.higeia-logo::after,
.dc-brand::after,
.error-box .circl-formerly,
.card > .circl-formerly {
    text-align: center;
}

/* On a dark ground (white-knockout logo) the line has to lift off the black. */
.circl-surface-dark .logo-lg::after,
.circl-surface-dark .circl-formerly {
    color: #aab3bd;
}