/* Silver Memories Directory — Layout & Component Styles */

/* ── Public site wrapper ──────────────────────────────────── */
/* All brand typography and colour is scoped here. */

.sm-public-site {
    font-family: var(--font-body);
    color: var(--sm-ink);
    background-color: var(--sm-bg);
    font-size: var(--fs-base);
    line-height: 1.6;
    min-height: 100dvh;
}

.sm-public-site h1,
.sm-public-site h2,
.sm-public-site h3,
.sm-public-site h4,
.sm-public-site h5,
.sm-public-site h6,
.sm-public-site .display-heading {
    font-family: var(--font-display);
    color: var(--sm-teal);
    line-height: 1.2;
}

/* ── Public shell ─────────────────────────────────────────── */

.sm-site-header {
    background-color: var(--sm-teal);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 6px rgba(60,117,132,0.07);
}

.sm-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    gap: 1rem;
}

.sm-logo { height: 48px; width: auto; }

.sm-site-header--dense { padding: 0.5rem 0; }

.sm-header-brand {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-decoration: none;
}

.sm-logo-compact { height: 64px; width: auto; }

.sm-header-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.2rem;
    font-weight: 400;
    font-style: normal;
    color: var(--sm-paper);
    line-height: 1.2;
}

.sm-header-italic {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: normal !important;
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--sm-paper);
}

.sm-nav-links {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.sm-nav-links a {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--sm-paper);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: background-color 0.15s;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.sm-nav-links a:hover { background-color: rgba(255,255,255,0.10); }
.sm-nav-links a.active { color: #fff; font-weight: 700; background-color: rgba(255,255,255,0.15); }

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

.sm-site-footer {
    background-color: var(--sm-teal);
    color: var(--sm-paper);
    padding: 3rem 0 1.5rem;
    margin-top: 4rem;
}

/* Home page background */
main:has(.sm-home-hero) {
    background-color: var(--sm-bg);
}

/* Footer sits flush against the last home section */
main:has(.sm-home-hero) + .sm-site-footer {
    margin-top: 0;
}

.sm-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.sm-footer-logo { height: 72px; width: auto; }

.sm-footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.sm-footer-cols h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--sm-aqua-tint);
    margin-bottom: 0.75rem;
}

.sm-footer-cols a,
.sm-footer-cols p {
    color: rgba(255,255,255,0.80);
    font-size: var(--fs-sm);
    text-decoration: none;
    display: block;
    margin-bottom: 0.4rem;
}

.sm-footer-cols a:hover { color: var(--sm-paper); text-decoration: underline; }

/* Attribution line — sized to match the copyright strip */
.sm-footer-cols p.sm-footer-fineprint { font-size: var(--fs-xs); }

/* Inline footer link */
.sm-footer-cols .sm-footer-link-inline {
    display: inline;
    margin-bottom: 0;
    text-decoration: underline;
}

.sm-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 1.25rem;
    font-size: var(--fs-xs);
    color: rgba(255,255,255,0.60);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Page wrapper ─────────────────────────────────────────── */

.sm-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.sm-page-narrow {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* ── Homepage: transparent header, fades to glass on scroll ── */

body:has(.sm-home-hero) .sm-site-header {
    position: fixed;
    width: 100%;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}

body:has(.sm-home-hero).header-scrolled .sm-site-header {
    background: rgba(60, 117, 132, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

body:has(.sm-home-hero) .sm-home-hero {
    min-height: 100vh;
}

body:has(.sm-home-hero) .sm-home-hero-content {
    padding-top: 10rem;
}

/* ── Home hero — full-viewport, solid image over teal ─────────── */

.sm-home-hero {
    position: relative;
    min-height: calc(100vh - 72px);
    background-color: var(--sm-teal);
    background-image: url('/brand/entertainer2.png');
    background-position: center 30%;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
}

.sm-home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(30, 65, 75, 0.72) 0%,
        rgba(30, 65, 75, 0.35) 55%,
        transparent 100%
    );
    z-index: 0;
}

.sm-home-hero-content {
    position: relative;
    z-index: 1;
    text-align: left;
    padding: 3rem 3rem 5rem 4rem;
    max-width: 720px;
    width: 100%;
}

.sm-home-hero-content .sm-home-title {
    color: var(--sm-paper);
    /* "Silver Memories" measures ~6.9em in Playfair Display, and this content box allows
       720px less 7rem of padding = 608px. At the old 5.5rem cap that came to ~605px — inside
       the box by 3px, so any fallback to Georgia would break the line and render the title as
       three rows ("Silver" / "Memories" / "Entertainment"). The old 3rem floor was just as tight
       at 375px. Both ends pulled in for headroom; pre-rebrand the longest line was one word. */
    font-size: clamp(2.25rem, 7.5vw, 5rem);
    line-height: 1.05;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
    outline: none;
}

.sm-home-sub {
    color: rgba(255,255,255,0.88);
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    max-width: 560px;
    margin: 0 0 2.5rem;
    line-height: 1.6;
    text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* ── Legacy hero (used on other pages if needed) ──────────── */

.sm-hero {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 24px 24px;
    min-height: 480px;
    display: flex;
    align-items: flex-end;
    background-color: var(--sm-teal);
}

.sm-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

.sm-hero-content {
    position: relative;
    padding: 3rem 2rem 3.5rem;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.sm-hero-eyebrow {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sm-aqua-tint);
    margin-bottom: 0.75rem;
}

.sm-hero h1 {
    color: var(--sm-paper);
    font-size: clamp(2rem, 5vw, 3.25rem);
    margin-bottom: 1rem;
}

.sm-hero p {
    color: rgba(255,255,255,0.88);
    font-size: 1.125rem;
    margin-bottom: 2rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.sm-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.btn-sm-primary-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sm-paper);
    background-color: var(--sm-coral);
    border: 2px solid var(--sm-coral);
    border-radius: var(--radius-pill);
    padding: 0.85rem 2.25rem;
    min-height: 52px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    line-height: 1;
}

.btn-sm-primary-hero:hover {
    background-color: var(--sm-orange);
    border-color: var(--sm-orange);
    color: var(--sm-paper);
    text-decoration: none;
}

.btn-sm-outline-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sm-paper);
    background-color: transparent;
    border: 2px solid var(--sm-paper);
    border-radius: var(--radius-pill);
    padding: 0.85rem 2.25rem;
    min-height: 52px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
    line-height: 1;
}

.btn-sm-outline-hero:hover {
    background-color: rgba(255,255,255,0.12);
    color: var(--sm-paper);
    text-decoration: none;
}

/* ── Homepage: below-fold sections ───────────────────────── */

.sm-home-about {
    background-color: var(--sm-paper);
    padding: 5rem 0 4rem;
}

.sm-home-about .sm-home-section-heading {
    margin-bottom: 1.5rem;
}

.sm-home-about-text {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    font-size: var(--fs-base);
    color: var(--sm-ink-soft);
    line-height: 1.75;
}

.sm-home-how-it-works {
    background-color: var(--sm-sand-light);
    padding: 5rem 0 4rem;
}

.sm-home-section-heading {
    text-align: center;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    color: var(--sm-teal);
    margin-bottom: 3rem;
}

.sm-home-steps {
    display: grid;
    /* card · arrow · card · arrow · card */
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 1rem;
}

.sm-home-step-arrow {
    align-self: center;
    color: var(--sm-teal);
    opacity: 0.45;
}

.sm-home-step-arrow svg {
    display: block;
    width: 34px;
    height: 26px;
}

.sm-home-step-card {
    background: var(--sm-paper);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 2.25rem 1.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sm-home-step-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--sm-aqua-tint);
    color: var(--sm-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.sm-home-step-icon svg {
    width: 26px;
    height: 26px;
}

.sm-home-step-card h3 {
    font-size: 1.1rem;
    color: var(--sm-teal);
    margin-bottom: 0.6rem;
}

.sm-home-step-card p {
    font-size: var(--fs-base);
    color: var(--sm-ink-soft);
    line-height: 1.6;
    max-width: 260px;
    margin: 0 auto;
}

.sm-home-entertainer-cta {
    background-color: var(--sm-teal);
    padding: 5rem 0 4rem;
}

.sm-home-entertainer-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

/* Takes the whole row minus the button, so the heading gets the ~950px it needs
   to stay on one line. The reading measure lives on the paragraph below. */
.sm-home-entertainer-cta-copy {
    flex: 1 1 30rem;
}

.sm-home-entertainer-cta-inner h2 {
    color: var(--sm-paper);
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin-bottom: 0.6rem;
    /* Only bites once the row is too narrow for one line — then it splits evenly
       instead of leaving a stub on the second line. */
    text-wrap: balance;
}

.sm-home-entertainer-cta-inner p {
    color: rgba(255,255,255,0.82);
    font-size: 1rem;
    /* Wide enough to hold this copy to two lines, narrow enough to stay readable. */
    max-width: 45rem;
    margin: 0;
    line-height: 1.6;
    /* Keeps the last line from ending on a single orphaned word. */
    text-wrap: pretty;
}

/* ── Directory grid ───────────────────────────────────────── */

.sm-search-bar {
    background: var(--sm-paper);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.sm-search-bar .sm-field { flex: 1; min-width: 160px; }
/* Search field labels — same tier as .sm-form-label */
.sm-search-bar .sm-field label, .sm-search-bar .sm-field-label { font-weight: 600; font-size: var(--fs-base); margin-bottom: 0.3rem; display: block; color: var(--sm-ink-soft); }
.sm-search-bar .sm-field-hint { font-size: var(--fs-sm); line-height: 1.5; color: var(--sm-ink-soft); margin: 0.4rem 0 0; }
/* Aligns the Search button with the inputs; tracks the label font-size above. */
.sm-search-bar .sm-search-action { padding-top: 1.75rem; }

/* Voluntary-bookings checkbox filter */
.sm-search-bar .sm-search-check { min-width: 230px; }
.sm-search-bar .sm-search-check label {
    display: flex;
    align-items: center;
    min-height: 2.97rem;
    box-sizing: border-box;
    gap: 0.5rem;
    margin-bottom: 0;
    cursor: pointer;
}
.sm-search-bar .sm-search-check input {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    accent-color: var(--sm-teal);
}

.sm-entertainer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.sm-entertainer-card {
    background: var(--sm-paper);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}

.sm-entertainer-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

/* Square on purpose. Uploads skew portrait — phone photos of a performer, promo headshots —
   and a fixed pixel height against a fluid grid column made the crop drift from 1.4:1 to
   nearly 3:1 across breakpoints. A 1:1 window is constant and keeps ~75% of a 3:4 portrait
   in frame where the old 220px box kept 45%. */
.sm-card-img-wrap {
    aspect-ratio: 1 / 1;
    /* Safety valve for the narrow band (~640-672px) where auto-fill can fit neither two
       300px columns nor the 1fr rule below 640, and one card spans the full width. Never
       engages at normal column widths (368px at desktop, 342px on a phone). */
    max-height: 460px;
    overflow: hidden;
    background-color: var(--sm-aqua-tint);
}

/* The image is wrapped in a link — block it out so it fills the square box. */
.sm-card-img-wrap a {
    display: block;
    height: 100%;
}

.sm-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sm-card-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* The square image gives the card enough visual mass to carry a bigger name; at 1.15rem it
   read as a caption under the photo rather than the heading of a listing. */
.sm-card-body h3 {
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
    color: var(--sm-teal);
}

.sm-card-location {
    font-size: var(--fs-sm);
    color: var(--sm-ink-soft);
    margin-bottom: 0.6rem;
}

.sm-card-location svg { vertical-align: -2px; margin-right: 3px; }

.sm-card-types { margin-bottom: 1rem; flex: 1; }

.sm-card-footer {
    padding-top: 1rem;
    border-top: 1px solid var(--sm-sand-light);
}

/* Name/location on the left, "From $X" price on the right */
.sm-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.sm-card-heading-text { min-width: 0; }

.sm-card-fee {
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
    font-size: var(--fs-sm);
    line-height: 1.2;
    color: var(--sm-ink-soft);
}

/* Deliberately a step below the name (1.4rem) rather than matching it. Results are ordered by
   fee, so the price has to stay prominent — but it shouldn't compete with the name for the
   first read. The teal Playfair name against this ink sans price separates them further. */
.sm-card-fee strong {
    display: block;
    font-size: 1.25rem;
    color: var(--sm-ink);
}

/* ── Directory pagination ─────────────────────────────────── */

.sm-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 2.5rem;
}

.sm-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px square is the WCAG 2.1 AA target size — these sit close together on a phone. */
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.85rem;
    border: 1px solid var(--sm-sand);
    border-radius: var(--radius-pill);
    background: var(--sm-paper);
    color: var(--sm-teal);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.sm-page-link:hover {
    background: var(--sm-sand-light);
    color: var(--sm-teal);
    text-decoration: none;
}

.sm-page-link--current,
.sm-page-link--current:hover {
    background: var(--sm-teal);
    border-color: var(--sm-teal);
    color: var(--sm-paper);
}

/* Rendered as a span, not a disabled link — there is no previous page to point at. */
.sm-page-link--disabled {
    color: var(--sm-ink-soft);
    opacity: 0.45;
    background: transparent;
}

.sm-page-gap {
    padding: 0 0.25rem;
    color: var(--sm-ink-soft);
}

/* ── Profile page ─────────────────────────────────────────── */

.sm-profile-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    align-items: start;
}

/* Entertainer name on the left, "From $X" price across from it on the right */
.sm-profile-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.sm-profile-fee {
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
    font-size: var(--fs-sm);
    line-height: 1.2;
    color: var(--sm-ink-soft);
    padding-top: 0.35rem;
}

.sm-profile-fee strong {
    display: block;
    font-size: 1.75rem;
    color: var(--sm-teal); /* matches the name colour */
}

.sm-profile-gallery {
    border-radius: var(--radius-card);
    overflow: hidden;
    background-color: var(--sm-aqua-tint);
    margin-bottom: 1.5rem;
}

/* The profile is the one page where the photo is the point, so it is contained rather than
   cropped — whatever doesn't fill the box letterboxes onto the gallery's aqua tint. The box
   keeps a fixed ratio so swapping thumbnails doesn't jump the page; because nothing is ever
   cropped, changing that ratio at a breakpoint only moves the surround, not the subject.
   Deliberately no object-position here: under `contain` it would shove a pillarboxed portrait
   against one edge instead of centring it (see Profile.razor). */
.sm-profile-gallery-primary {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    display: block;
}

.sm-profile-gallery-thumbs {
    display: flex;
    gap: 8px;
    padding: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.sm-profile-gallery-thumbs img {
    height: 80px;
    width: 110px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    scroll-snap-align: start;
    opacity: 0.75;
    transition: opacity 0.15s;
}

.sm-profile-gallery-thumbs img:hover,
.sm-profile-gallery-thumbs img.active { opacity: 1; }

.sm-profile-sidebar {
    background: var(--sm-paper);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    position: sticky;
    top: 80px;
}

.sm-profile-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.sm-profile-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    font-size: var(--fs-base);
}

.sm-profile-contact-item a { color: var(--sm-teal); word-break: break-all; }

.sm-social-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.75rem; }
.sm-social-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sm-teal);
    background-color: transparent;
    border: 2px solid var(--sm-teal);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.1rem;
    min-height: 40px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    line-height: 1;
}
.sm-social-links a svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.sm-social-links a:hover,
.sm-social-links a:focus-visible {
    background-color: var(--sm-teal);
    color: var(--sm-paper);
    box-shadow: 0 0 0 3px rgba(60, 117, 132, 0.3);
    text-decoration: none;
}

/* ── Register flow ────────────────────────────────────────── */

.sm-register-steps {
    display: flex;
    gap: 0;
    margin-bottom: 2.5rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--sm-sand-light);
}

.sm-step {
    flex: 1;
    text-align: center;
    padding: 0.6rem 0.5rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--sm-ink-soft);
    font-family: var(--font-body);
}

.sm-step.active {
    background-color: var(--sm-teal);
    color: var(--sm-paper);
}

.sm-step.done {
    background-color: var(--sm-aqua);
    color: var(--sm-teal);
}

/* Two fields on one line (first/last name); single column on phones. */
.sm-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 480px) {
    .sm-form-row-2 { grid-template-columns: 1fr; }
}

/* ── Act section progress ─────────────────────────────────── */

.sm-act-section-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.sm-act-section-item {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.sm-act-section-done {
    color: var(--sm-teal);
    font-weight: 600;
}

.sm-act-section-active {
    color: var(--sm-ink);
    font-weight: 700;
}

.sm-act-section-upcoming {
    color: var(--sm-ink-soft);
    font-weight: 400;
}

.sm-act-section-check {
    width: 15px;
    height: 15px;
    fill: var(--sm-teal);
    stroke: white;
    flex-shrink: 0;
}

.sm-act-section-sep {
    color: var(--sm-ink-soft);
    font-size: var(--fs-xs);
    line-height: 1;
    flex-shrink: 0;
}

.sm-act-progress-bar {
    height: 5px;
    background: var(--sm-sand-light);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.sm-act-progress-fill {
    height: 100%;
    background: var(--sm-teal);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* ── Service range slider ─────────────────────────────────── */

.sm-service-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2.2rem;
    background: transparent;
    outline: none;
    padding: 0;
    margin: 0;
    display: block;
    cursor: pointer;
}

.sm-service-range::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
    border: none;
}

.sm-service-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--sm-teal);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    margin-top: calc((4px - 2.2rem) / 2);
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.sm-service-range:hover::-webkit-slider-thumb,
.sm-service-range:focus::-webkit-slider-thumb {
    box-shadow: 0 3px 12px rgba(58,118,132,0.4);
}

.sm-service-range::-moz-range-track {
    height: 4px;
    background: transparent;
    border: none;
}

.sm-service-range::-moz-range-thumb {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--sm-teal);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    box-sizing: border-box;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.sm-service-range:hover::-moz-range-thumb,
.sm-service-range:focus::-moz-range-thumb {
    box-shadow: 0 3px 12px rgba(58,118,132,0.4);
}

/* ── Table ────────────────────────────────────────────────── */

.sm-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sm-paper);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.sm-table th {
    background-color: var(--sm-aqua-tint);
    color: var(--sm-teal);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 2px solid var(--sm-aqua);
}

.sm-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--sm-sand-light);
    vertical-align: middle;
}

.sm-table tr:last-child td { border-bottom: none; }
.sm-table tr:hover td { background-color: rgba(171, 222, 222, 0.15); }

/* ── Modal ────────────────────────────────────────────────── */

.sm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.sm-modal {
    background: var(--sm-paper);
    border-radius: var(--radius-card);
    box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    max-width: 560px;
    width: 100%;
    padding: 2rem;
}

.sm-modal h2 {
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
}

/* One-time code entry (the SMS verification modal). Tracking and centring only — the size stays the
   base input size, like every other field, so nothing here sets a font-size on an input. */
.sm-code-input {
    max-width: 180px;
    letter-spacing: 0.3em;
    text-align: center;
    font-weight: 600;
}

/* ── Demo Turnstile widget ────────────────────────────────── */

.cf-widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fafafa;
    padding: 10px 14px;
    max-width: 300px;
    min-height: 64px;
    margin-bottom: 1rem;
}

.cf-widget-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cf-widget-clickable { cursor: pointer; }

.cf-check-box {
    width: 28px;
    height: 28px;
    border: 1.5px solid #9b9b9b;
    border-radius: 2px;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}

.cf-widget-clickable:hover .cf-check-box { border-color: #444; }

.cf-check-box--done {
    background: #31b447;
    border-color: #31b447;
    color: #fff;
    font-size: 1rem;
}

.cf-widget-label {
    font-size: 0.875rem;
    color: var(--sm-ink);
    font-family: var(--font-body);
}

.cf-spin-box {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cf-spin-ring {
    width: 24px;
    height: 24px;
    border: 2px solid #e0e0e0;
    border-top-color: #f38020;
    border-radius: 50%;
    animation: cf-spin 0.8s linear infinite;
}

@keyframes cf-spin { to { transform: rotate(360deg); } }

.cf-widget-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-left: 12px;
    flex-shrink: 0;
}

.cf-widget-brand-logo {
    font-size: 0.7rem;
    font-weight: 700;
    color: #f38020;
    letter-spacing: 0.02em;
    font-family: var(--font-body);
}

.cf-widget-brand-sub {
    font-size: 0.6rem;
    color: #aaa;
    font-family: var(--font-body);
}

/* ── Misc ─────────────────────────────────────────────────── */

.sm-page-section { margin-bottom: 3rem; }
.sm-section-title { margin-bottom: 1.5rem; }
.sm-divider { border: none; border-top: 1px solid var(--sm-sand); margin: 2rem 0; }

.sm-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--sm-ink-soft);
}

.sm-empty-state svg { color: var(--sm-aqua); margin-bottom: 1rem; }

.sm-badge-pending {
    display: inline-block;
    background: var(--sm-yellow);
    color: var(--sm-ink);
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sm-badge-published {
    display: inline-block;
    background: rgba(135, 208, 208, 0.25);
    color: var(--sm-teal);
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 768px) {
    .sm-profile-layout { grid-template-columns: 1fr; }
    .sm-profile-sidebar { position: static; padding: 0; background: none; box-shadow: none; }
    /* Contact buttons float as a fixed bottom bar, side by side */
    .sm-profile-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        flex-direction: row;
        gap: 0.6rem;
        margin: 0;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        background: var(--sm-paper);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    }
    .sm-profile-actions .btn-sm-primary,
    .sm-profile-actions .btn-sm-outline { flex: 1; width: auto; padding-left: 0.75rem; padding-right: 0.75rem; }
    /* Clearance for the fixed contact bar */
    .sm-page:has(.sm-profile-layout) { padding-bottom: 0; }
    body:has(.sm-profile-actions) .sm-site-footer { padding-bottom: 5.5rem; }
    .sm-footer-cols { grid-template-columns: 1fr 1fr; }
    /* Hero shrinks to its content on mobile */
    body:has(.sm-home-hero) .sm-home-hero { min-height: auto; }
    body:has(.sm-home-hero) .sm-home-hero-content { padding-top: 5.5rem; }
    .sm-home-hero-content { padding: 3rem 1.5rem 4rem; }
    /* Stacked: arrows rotate to point down the column */
    .sm-home-steps { grid-template-columns: 1fr; gap: 0.75rem; }
    .sm-home-step-arrow { justify-self: center; }
    .sm-home-step-arrow svg { transform: rotate(90deg); width: 30px; height: 23px; }
    .sm-home-entertainer-cta-inner { flex-direction: column; text-align: center; }
    /* Stacked, the flex-basis would apply to height — drop it back to content size. */
    .sm-home-entertainer-cta-copy { flex: 0 1 auto; }
    .sm-home-entertainer-cta-inner p { margin: 0 auto; }
}

/* Dense header: shrink the brand title and logo */
@media (max-width: 900px) {
    .sm-site-header--dense .sm-header-title,
    .sm-site-header--dense .sm-header-italic { font-size: 1.6rem; }
    .sm-site-header--dense .sm-logo-compact { height: 48px; }
    .sm-site-header--dense .sm-nav-links a { padding: 0.5rem 0.55rem; }
}

@media (max-width: 640px) {
    .sm-entertainer-grid { grid-template-columns: 1fr; }
    /* Squarer box on a phone: at ~342px wide a 3:2 frame would pillarbox a portrait photo
       down to a sliver. Nothing is cropped either way — this only tightens the surround. */
    .sm-profile-gallery-primary { aspect-ratio: 1 / 1; }
    .sm-footer-cols { grid-template-columns: 1fr; }
    /* Mobile header is brand only — no nav links */
    .sm-nav-links { display: none; }
    .sm-nav-inner { padding: 0 1rem; }
    .sm-logo { height: 40px; }
    .sm-logo-compact { height: 48px; }
    .sm-header-brand { gap: 0.6rem; }
    .sm-header-title,
    .sm-header-italic,
    .sm-site-header--dense .sm-header-title,
    .sm-site-header--dense .sm-header-italic { font-size: 1.5rem; }
    .sm-hero-content { padding: 2rem 1.25rem 2.5rem; }
    .sm-search-bar { flex-direction: column; }
    .sm-search-bar .sm-field { min-width: 100%; }
    .sm-search-bar .sm-search-check { padding-top: 0; min-width: 100%; }
    .sm-search-bar .sm-search-action { padding-top: 0; width: 100%; }
    .sm-search-bar .sm-search-action .btn-sm-primary { width: 100%; }
    .sm-home-hero-content { padding: 2.5rem 1.25rem 4rem; text-align: center; }
    .sm-home-sub { margin-left: auto; margin-right: auto; }
    .sm-hero-actions { justify-content: center; }
}

/* Override Bootstrap defaults to use brand styles */
.form-control:focus { border-color: var(--sm-teal); box-shadow: 0 0 0 0.2rem rgba(60,117,132,0.2); }
.form-select:focus { border-color: var(--sm-teal); box-shadow: 0 0 0 0.2rem rgba(60,117,132,0.2); }

/* Blazor validation — keep in step with .sm-validation-msg in brand.css */
.validation-message { color: var(--sm-coral); font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; margin-top: 0.25rem; }
.field-validation-error { color: var(--sm-coral); font-size: var(--fs-sm); font-weight: 600; }
input.invalid, select.invalid, textarea.invalid,
input.modified.invalid, select.modified.invalid, textarea.modified.invalid { border-color: var(--sm-coral) !important; }