/*
 * Snäkineid — what the CMS needs on top of the design.
 *
 * style.css is the designer's stylesheet from the static demo, edited only as
 * its header says. Everything here exists because the site is assembled from
 * editable sections, uses core's accessibility panel and cookie banner, or
 * replaces an inline style the demo wrote into its HTML. Grouped by concern,
 * one banner each.
 */

/* ---- Inline styles of the demo, as classes ------------------------------ */
/* The demo set these with style="" on single elements; a section template
   prints the class instead, so the operator's choice of shape is one class. */
.ratio-5-4 { aspect-ratio: 5 / 4; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-1-1 { aspect-ratio: 1; }
.ratio-16-10 { aspect-ratio: 16 / 10; }
.founder-quote { line-height: 1.35; }
.founder-role { letter-spacing: .14em; }
.person-role { letter-spacing: .12em; }
.person-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sn-gold); }
.badge-pink { background: var(--sn-pink); color: var(--sn-black); }
.price-card.dark .price small { color: #a89c90; }
.cta-band .lead-sn { color: #d8cdc1; }
.calc-rule { border-color: rgba(201, 164, 92, .3); opacity: 1; }
.form-card-title { font-size: 2rem; }
.footer .brand .footer-logo { height: 46px; width: auto; }
.text-black-sn { color: var(--sn-black) !important; }

/* ---- Markup the CMS prints differently ---------------------------------- */
/* The calculator's area buttons are a <fieldset> with a <legend>, and its
   result's label a <span>: both wear the design's `.calc label`. */
.calc fieldset { border: 0; padding: 0; margin: 0; }
.calc legend, .calc .calc-label { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: #b9ada2; margin-bottom: .5rem; float: none; width: auto; }
/* Footer column headings are <h2>s for a sound heading order; they look like
   the design's <h5>. */
.footer .footer-heading { font-family: var(--sn-serif); color: #fff; font-size: 1.4rem; margin-bottom: 1.1rem; }
/* A gallery that continues the band above it: the design's small note. */
.gallery-note { color: var(--sn-muted); }
.bg-black-sn .gallery-note { color: #ada297; }
/* The testimonial card is a <figure> with a <blockquote>. */
.testimonial blockquote { margin: 0; }
/* The top bar and the menu bar are one <header> (the banner landmark). A
   sticky element sticks only inside its parent, so the header sticks instead
   of the menu bar, pulled up by the top bar's height (theme.js measures it
   into --sn-topbar-h): the top bar scrolls away and the menu bar stays, as
   in the design. Without the script the top bar simply stays too. */
.site-header { position: sticky; top: calc(-1 * var(--sn-topbar-h, 0px)); z-index: 1030; }
.site-header .sn-nav { position: relative; top: auto; }
/* A dropdown parent is a <button> (it goes nowhere); it keeps the link's look. */
.sn-nav button.nav-link { background: none; border: 0; }
/* The page hero's breadcrumb is a <nav>. */
.crumbs [aria-current="page"] { color: inherit; }
/* Core prints the operator's anchor before a section; the sticky menu would
   cover a heading scrolled to it. */
:root { --pc-header-offset: 90px; }
.pc-anchor { scroll-margin-top: var(--pc-header-offset); }

/* ---- Rich text an operator typed ---------------------------------------- */
.lead-sn a, .hero p.lead a, .page-hero p a { color: var(--sn-gold-2); }
.section:not(.bg-black-sn) .lead-sn a { color: var(--sn-gold-dark); }
.section-title strong, .hero h1 strong, .page-hero h1 strong { font-weight: 700; }
/* An italic word in a page hero is the gold italic of the homepage hero. */
.page-hero h1 em, .cta-band h2 em { font-style: italic; color: var(--sn-gold-2); }

/* ---- The inquiry form ---------------------------------------------------- */
.form-sn .invalid-feedback { font-size: .82rem; }
.form-success:focus { outline: none; }
.snakineid_form-status:empty { display: none; }

/* ---- Lightbox ------------------------------------------------------------ */
/* The dialog carries `hidden` while closed (theme.js), and Bootstrap's
   [hidden] rule is !important; `.open` is what shows it. */
.lb[hidden] { display: none !important; }
.lb button:focus-visible { outline: 2px solid var(--sn-gold-2); outline-offset: 3px; }

/* ---- Focus ---------------------------------------------------------------- */
/* The design styles no focus; every interactive element gets a visible one
   (WCAG 2.4.7), gold on the dark parts and dark gold on the light ones. */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sn-gold-dark); outline-offset: 3px; box-shadow: none;
}
.sn-nav a:focus-visible, .sn-nav button:focus-visible, .topbar a:focus-visible, .footer a:focus-visible, .footer button:focus-visible,
.bg-black-sn a:focus-visible, .hero a:focus-visible, .page-hero a:focus-visible, .cta-band a:focus-visible, .contact-tile a:focus-visible {
  outline-color: var(--sn-gold-2);
}
.zone-btns .btn-check:focus-visible + .btn { outline: 2px solid var(--sn-gold-2); outline-offset: 3px; }
.navbar-toggler:focus-visible { outline: 2px solid var(--sn-gold-2); }

/* ---- Header: core's accessibility toggle --------------------------------- */
/* Core's panel is driven by #accessibility-toggle; core's own stylesheet
   colours that id. This keeps the design's gold icon and the menu's type. */
.sn-nav #accessibility-toggle i { color: #e9cf86; }
.sn-nav #accessibility-toggle span { color: inherit !important; font-size: .9rem !important; font-weight: 400 !important; }

/* ---- Core's accessibility panel, in the design's colours ----------------- */
/* Core's panel is a black bar across the top with yellow switches; the
   design's is black and gold. */
.accessibility-controls { border-bottom: 1px solid rgba(233, 207, 134, .3) !important; font-family: var(--sn-sans); }
.accessibility-controls .form-check-input { border-color: rgba(233, 207, 134, .5); }
.accessibility-controls .form-check-input:checked { background-color: var(--sn-gold); border-color: var(--sn-gold); }
.accessibility-controls .form-check-input:focus { border-color: var(--sn-gold); box-shadow: 0 0 0 .25rem rgba(201, 164, 92, .3); }

/* ---- Core's high-contrast mode -------------------------------------------- */
/* Core paints every text yellow on black. The design's metallic gold is a
   gradient clipped to transparent text, which would stay invisible, so the
   gradient goes and the text takes core's colour; the light bands and white
   cards go black with it. */
body.a11y-contrast-high .gold-text, body.a11y-contrast-high .hero h1 em, body.a11y-contrast-high .stat .num,
body.a11y-contrast-high .price-card .price, body.a11y-contrast-high .calc-total, body.a11y-contrast-high .hero-card .big,
body.a11y-contrast-high .founder-sign, body.a11y-contrast-high .step .n, body.a11y-contrast-high .eyebrow,
body.a11y-contrast-high .bg-black-sn .section-title.text-white em {
  background: none !important; -webkit-text-fill-color: currentColor !important; -webkit-text-stroke: 0 !important;
}
body.a11y-contrast-high .bg-blush, body.a11y-contrast-high .bg-cream, body.a11y-contrast-high .section,
body.a11y-contrast-high .price-card, body.a11y-contrast-high .testimonial, body.a11y-contrast-high .form-card,
body.a11y-contrast-high .info-strip, body.a11y-contrast-high .chip, body.a11y-contrast-high .marquee {
  background: #000 !important; border: 1px solid #ff0 !important;
}
body.a11y-contrast-high .btn-gold { background: #ff0 !important; color: #000 !important; text-shadow: none; }
body.a11y-contrast-high .hero::before, body.a11y-contrast-high .page-hero::after { background: rgba(0, 0, 0, .9); }
html.js body.a11y-contrast-high .reveal { opacity: 1; transform: none; }

/* ---- Core's cookie banner (Silktide), in the design's colours ------------ */
/* consent.css declares the palette on #silktide-wrapper and every rule inside
   reads it, so re-declaring the values is the whole job. `html` in front of
   the id wins the specificity tie: consent.css loads after this file. The
   design's own banner was black with a gold edge and gold buttons. */
html #silktide-wrapper {
  --fontFamily: var(--sn-sans);
  --primaryColor: #c9a45c;
  --backgroundColor: #0f0d0c;
  --textColor: #e6dccf;
  --backdropBackgroundColor: rgba(15, 13, 12, .55);
  --cookieIconColor: #0f0d0c;
  --cookieIconBackgroundColor: #c9a45c;
  --boxShadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
html #silktide-wrapper .st-button { border-radius: 50rem; font-weight: 500; }
html #silktide-wrapper #silktide-banner .st-button:focus,
html #silktide-wrapper #silktide-modal .st-button:focus { border-radius: 50rem; }
html #silktide-wrapper #silktide-banner,
html #silktide-wrapper #silktide-modal { border-radius: var(--sn-radius); border: 1px solid rgba(233, 207, 134, .45); }
html #silktide-wrapper .st-button--primary { color: #1a1206; }
/* An OFF switch is painted in --textColor, nearly the gold of an ON one
   here; a muted grey keeps the two apart. */
html #silktide-wrapper #silktide-modal .switch__pill { background: #6b625b; }
html #silktide-wrapper #silktide-modal .switch input:checked + .switch__pill { background: var(--primaryColor); }