/* ==========================================================================
   Designer Flair - fonts, reset and base typography
   ========================================================================== */

/* Self-hosted variable fonts. One file covers the whole weight range, so the
   roman and italic files below are all the site needs. */
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/playfair-display-700.woff2") format("woff2");
}

@font-face {
    font-family: "Playfair Display";
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/playfair-display-700italic.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-400.woff2") format("woff2");
}

/* The wordmark script. These files are the italic cut, so they are declared as
   the normal style - the slant is built into the letterforms.

   Two faces, deliberately. The script is only ever used for the words
   "Designer Flair", so the second rule below is a cut-down file containing just
   those eleven letters - 6 KB instead of 45 KB. Because it declares a
   unicode-range, the browser downloads ONLY that file for the wordmark.

   The full file is declared first as a safety net: if the business name in
   BusinessInfo.cs ever changes to include other letters, the browser fetches
   the complete font automatically rather than rendering a broken mix of fonts.
   Order matters - the later rule wins for the characters it covers. */
@font-face {
    font-family: "Lobster Two";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/lobster-two-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Lobster Two";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/lobster-two-italic-subset.woff2") format("woff2");
    unicode-range: U+20, U+44, U+46, U+61, U+65, U+67, U+69, U+6C, U+6E, U+72-73;
}

/* ---- Reset ------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchored sections must clear the sticky header. */
    scroll-padding-top: var(--header-h);
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    background-color: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Nothing should ever scroll sideways. */
    overflow-x: hidden;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* <picture> only chooses which file the <img> inside it downloads - it should
   never become a box of its own. Left as a block it would sit between the image
   and its frame, and rules like ".hero__media img { height: 100% }" would
   resolve against the wrapper's auto height instead of the frame's, collapsing
   the photograph. display:contents removes it from the layout entirely, so
   every existing rule that targets a descendant img keeps working unchanged. */
picture {
    display: contents;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

ul[class],
ol[class] {
    list-style: none;
    padding: 0;
}

/* ---- Typography -------------------------------------------------------- */

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-heading);
    color: var(--ink);
    /* Wrap between words, and only break inside a word when a single word is
       genuinely wider than its container - never mid-word in normal copy. */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

p {
    max-width: 68ch;
}

a {
    color: inherit;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: .25em;
}

/* ---- Shared text utilities --------------------------------------------- */

.eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: var(--space-md);
}

.eyebrow--on-dark {
    color: var(--gold-light);
}

.lead {
    font-size: var(--fs-lead);
    color: var(--text-muted);
    line-height: 1.75;
}

.lead--on-dark {
    color: var(--text-on-dark);
}

/* The gold half of a headline, e.g. "with flair." */
.accent {
    color: var(--gold);
    font-style: italic;
}

.u-text-center {
    text-align: center;
}

.u-mx-auto {
    margin-inline: auto;
}

/* ---- Accessibility ------------------------------------------------------ */

.skip-link {
    position: absolute;
    left: var(--space-md);
    top: var(--space-md);
    z-index: 200;
    padding: .75rem 1.25rem;
    background: var(--ink);
    color: #fff;
    font-size: var(--fs-small);
    letter-spacing: var(--ls-nav);
    text-transform: uppercase;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus-visible {
    transform: translateY(0);
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

/* Headings and sections are given tabindex="-1" so focus can be moved to them
   programmatically (Blazor's FocusOnNavigate, and our own in-page scrolling).
   That is an announcement for screen readers, not a keyboard stop, so it must
   not draw a focus ring around the headline. */
:where(h1, h2, h3, section, main, div)[tabindex="-1"]:focus,
:where(h1, h2, h3, section, main, div)[tabindex="-1"]:focus-visible {
    outline: none;
}

/* Focus rings need to be visible on the black sections too. */
.section--dark :where(a, button, input, textarea, select):focus-visible,
.site-footer :where(a, button):focus-visible {
    outline-color: var(--gold-light);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- Loading state (before Blazor boots) --------------------------------
   There is no loading state any more, and so no styles here.

   index.html used to show a centred "Designer Flair / Loading..." card while
   the WebAssembly runtime downloaded. It now writes out the real announcement
   bar, header and hero as plain HTML instead, so the visitor sees the site
   itself within the first round trip rather than a placeholder. That markup
   reuses .announce, .site-header and .hero exactly as they are defined further
   down this stylesheet - which is the point, because it means the first paint
   and the Blazor render are styled by the same rules and cannot diverge.      */

/* Blazor's built-in error banner, restyled to match the site. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem 1.25rem;
    background: var(--ink);
    color: #fff;
    font-size: var(--fs-small);
    box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .5);
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    color: var(--gold-light);
    margin-left: 1rem;
    cursor: pointer;
}