/* ============================================
   Base theme - shared across every tenant now (this repo used to be
   ginas-real-hair.com's own dedicated codebase - see FIXES_APPLIED.md's
   "product variants + generic storefront" round). The actual per-tenant
   colors/heading font are injected as a CSS custom-property override in
   templates/base.html, sourced from app/theme_content/<tenant>.json -
   this file's :root block below is just the fallback/default values
   (still Gina's own palette, since that's what was here first and it's
   a sane-looking default), used only if that override somehow fails to
   load. Every rule below should keep referencing var(--primary)/
   var(--accent)/etc., never a hardcoded color, so any tenant's palette
   flows through correctly.
   ============================================ */
:root {
    --primary: #B8860B;       /* dark goldenrod */
    --accent: #D4AF37;        /* metallic gold */
    --secondary: #000000;
    --danger: #C62828;
    --warning: #E0A800;
    --bg: #0D0D0D;
    --surface: #1A1A1A;
    --text: #F5F0E1;
    --text-on-primary: #000000;
    /* Added for the light/dark-theme split (see FIXES_APPLIED.md Round
       187) - a theme's actual link-text color and muted/secondary-text
       color can differ from --accent, since --accent (gold) reads fine
       on a dark background but fails contrast outright on a light one.
       Fallback values here match this file's existing Gina's-palette
       fallback convention above - real per-tenant values come from
       templates/base.html's override, sourced from theme_content/<tenant>.json. */
    --link-color: #D4AF37;
    --muted-text: #a89f8c;
    /* Added Round 188 - see the rgba(212, 175, 55, ...) rules further down
       in this file; they used to hardcode Gina's gold as a literal RGB
       triplet since CSS can't split a hex custom property into rgba()
       components on its own. */
    --accent-rgb: 212, 175, 55;
    --link-color-rgb: 212, 175, 55;

    /* Bootstrap's own "theme color" variables - .text-primary,
       .btn-outline-primary, .border-primary, focus rings, etc. all
       derive from these, and were never touched before now, so they
       were still rendering Bootstrap's stock blue regardless of every
       other change above. Only overriding --bs-primary/--bs-link-* here
       deliberately - --bs-success/--bs-danger/--bs-warning/--bs-info are
       left alone since shared/alerts.html's flash messages use those
       classes semantically (a "success" flash should still read as
       success, not gold) - see FIXES_APPLIED.md Round 51. */
    --bs-primary: #B8860B;
    --bs-primary-rgb: 184, 134, 11;
    --bs-link-color: #D4AF37;
    --bs-link-color-rgb: var(--link-color-rgb);
    --bs-link-hover-color: #B8860B;
    --bs-link-hover-color-rgb: 184, 134, 11;
}

/* Ensure full-page layout */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Page container to push footer to bottom */
#page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#content-wrap {
    flex: 1;
}

/* Typography */
body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--bg);
    color: var(--text);
}

/* Headings */
h1, h2, h3 {
    font-family: 'Lora', serif;
    font-weight: bold;
    color: var(--text);
}

/* Links */
a {
    text-decoration: none;
    color: var(--link-color);
}

a:hover {
    color: var(--primary);
}

/* Buttons */
.btn {
    border-radius: 5px;
}

/* Primary Button - gradient gold, matching use_gradient_buttons in the
   POS theme config */
.btn-primary {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border: none;
    color: var(--text-on-primary);
}

.btn-primary:hover {
    background: linear-gradient(90deg, var(--accent), var(--primary));
    color: var(--text-on-primary);
}

/* Navbar */
.navbar {
    padding: 10px 15px;
    background-color: var(--secondary);
}

.navbar-brand img {
    max-width: 80px;
    height: auto;
}

/* Navbar spacing */
.navbar-nav .nav-link {
    padding: 8px 12px;
    font-size: 14px;
    white-space: nowrap;
    /* 2026-08-27 - was var(--text), the same bug already found and
       fixed for footer text (see footer's own comment below): --text is
       tuned to contrast with --bg (the page body), not --secondary
       (this navbar's own background - .navbar above), and nothing
       enforces those two stay coordinated. default.json's
       secondary_color (#222222) and text_color (#212529) are both
       near-black, so every nav link's text went invisible against the
       navbar for any tenant still on the default theme - only icons
       (styled separately via Bootstrap's navbar-dark/light toggler
       logic) stayed visible. --text-on-secondary already exists for
       exactly this (added for the footer fix); just wasn't applied
       here too. */
    color: var(--text-on-secondary);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--link-color);
}

.navbar-nav {
    display: flex;
    flex-wrap: nowrap;
}

/* Fixing menu overflow issue */
@media (max-width: 992px) {
    .navbar-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
}

/* Footer */
footer {
    background: var(--secondary);
    /* Was var(--text) - that's tuned to contrast with --bg (the page's
       main background), not --secondary (the footer's own background),
       and nothing enforces those two stay coordinated. default.json sets
       secondary_color #222222 and text_color #212529 - both near-black,
       independently reasonable choices (text_color reads fine on its
       #FFFFFF bg_color) that happen to collide here, making every
       footer link/credit line unreadable for any self-serve tenant still
       on the default theme. --text-on-secondary is a dedicated pair,
       same convention as the existing --text-on-primary (buttons). */
    color: var(--text-on-secondary);
    padding: 20px 0;
    text-align: center;
}

footer a {
    color: var(--text-on-secondary);
}

footer a:hover {
    color: var(--link-color);
}

.footer-astranite-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.footer-astranite-link img {
    border-radius: 3px;
}

/* Blog Page - card-based list + single-post view (redesigned 2026-08-23,
   SF-004). Reuses the .gallery-grid .card look (rounded corners +
   dark-mode shadow) instead of inventing a second visual language, and
   pulls every color from the shared theme vars above so this still
   renders correctly per-tenant (annettez-clozet's palette isn't gold). */
.blog-heading-underline {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2px;
}

.post-card {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--surface);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
    margin-bottom: 24px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.5);
}

/* Thumbnail - post.img_url was being captured on create/edit but never
   actually rendered anywhere (list or single-post view). This is the
   fix: a fixed-width media column that falls back to a plain icon tile
   (not a broken-image glyph) when a post has no image set. */
.post-card-media {
    flex: 0 0 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--accent-rgb), 0.06);
    min-height: 180px;
}

.post-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card-media-empty i {
    font-size: 2.5rem;
    color: rgba(var(--accent-rgb), 0.4);
}

.post-card-body {
    flex: 1 1 320px;
    padding: 22px 24px;
    min-width: 0;
}

.post-card-title {
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.post-card-title-link {
    color: var(--text);
}

.post-card-title-link:hover .post-card-title {
    color: var(--link-color);
}

.post-card-subtitle {
    color: var(--muted-text);
    font-style: italic;
    margin-bottom: 10px;
}

.post-card-excerpt {
    color: var(--text);
    opacity: 0.85;
    margin-bottom: 14px;
}

.post-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.15);
    padding-top: 10px;
}

.post-card-date {
    color: var(--muted-text);
    font-size: 0.85rem;
}

/* Edit/delete toolbar - replaces the old bare "✘ 🖋️" emoji pair with
   Font Awesome icons (already loaded site-wide via base.html) that get
   a real hover state instead of sitting unstyled under the date. */
.post-card-actions {
    display: flex;
    gap: 14px;
}

.post-card-actions a,
.post-card-actions button {
    background: none;
    border: none;
    padding: 0;
    color: var(--muted-text);
    font-size: 0.95rem;
    line-height: 1;
    transition: color 0.15s ease;
}

.post-card-actions a:hover,
.post-card-actions button:hover {
    color: var(--accent);
}

@media (max-width: 576px) {
    .post-card {
        flex-direction: column;
    }
    .post-card-media {
        flex-basis: auto;
        height: 180px;
        width: 100%;
    }
}

/* Generic "back to list" link - shared by the blog post page and the
   product detail page below, rather than each having its own
   identically-styled class. */
.back-link {
    display: inline-flex;
    align-items: center;
    color: var(--muted-text);
    font-size: 0.9rem;
}

.back-link:hover {
    color: var(--accent);
}

/* Single-post view */
.post-banner img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
}

.post-title-main {
    margin-top: 4px;
}

.post-subtitle-main {
    color: var(--muted-text);
    font-style: italic;
    font-weight: normal;
}

.meta {
    color: var(--muted-text);
    font-size: 0.9rem;
}

/* CKEditor's saved body is block-level HTML (h3/p/etc.) - it used to be
   wrapped in a literal <p>...</p> in post.html, which is invalid HTML
   (a <p> can't contain a heading or another <p>, so browsers silently
   close it early) and gave every post the exact same tight, un-styled
   line-height regardless of length. .post-body is a plain <div> instead,
   styled directly. */
.post-body {
    line-height: 1.7;
}

.post-body p {
    margin-bottom: 1rem;
}

.post-body h3 {
    margin-top: 1.8rem;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
}

/* Product detail page - shop.html's cards had no click-through at all
   before this (no product page existed), so "Add to Cart" from the
   grid was the only interaction. Reuses the same card/shadow language
   as .post-card/.gallery-grid .card. */
.product-detail-media {
    background-color: var(--surface);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

.product-detail-media img {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
}

.product-detail-media-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--muted-text);
    padding: 60px 0;
}

.product-detail-media-empty i {
    font-size: 2.5rem;
    color: rgba(var(--accent-rgb), 0.4);
}

.product-detail-category {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    color: var(--accent);
    margin-bottom: 6px;
}

.product-detail-title {
    margin-bottom: 10px;
}

.product-detail-price {
    font-size: 1.5rem;
    color: var(--accent);
    font-weight: bold;
    margin-bottom: 18px;
}

.product-detail-description {
    line-height: 1.7;
    color: var(--text);
    opacity: 0.9;
}

.product-trust-signals li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted-text);
    font-size: 0.9rem;
    padding: 6px 0;
}

.product-trust-signals i {
    color: var(--accent);
    width: 1.2em;
    text-align: center;
}

.product-detail-rating {
    margin-bottom: 4px;
}

/* Admin dashboard tiles - matches the .post-card/.gallery-grid .card
   hover-lift language instead of Bootstrap's bare default .card. */
.admin-tile {
    background-color: var(--surface);
    border: none;
    border-radius: 10px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.45);
}

.admin-tile-icon {
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 10px;
    display: block;
}

.admin-tile .fw-bold {
    color: var(--text);
}

/* Contact Page */
.contact-section {
    text-align: center;
}

.contact-form {
    background: var(--surface);
    padding: 40px 0;
    color: var(--text);
}

/* Form inputs */
.form-floating input,
.form-floating textarea {
    border-radius: 5px;
}

/* Gallery */
.gallery-grid .card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
    background-color: var(--surface);
}

.gallery-grid img {
    max-height: 250px;
    object-fit: cover;
}

.gallery-carousel img,
.gallery-carousel video {
    max-width: 75%;
    display: block;
    margin: auto;
}

/* Registration Page */
.register-section {
    text-align: center;
}

.flashes {
    list-style: none;
    padding: 10px;
}

.flashes li {
    color: var(--danger);
    font-weight: bold;
}

/* Page Headers */
.masthead {
    background-size: cover;
    background-position: center;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.page-heading h1 {
    font-size: 32px;
    font-weight: bold;
}

/* Blog Post Form */
.post-form {
    padding: 50px 0;
}

.post-form .container {
    max-width: 800px;
}

.carousel-inner video{
    width: 80%;
    max-height: 600px;
    object-fit:contain;
}

.carousel-inner img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
}

.scroll-container {
  max-height: 600px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* static/admin.css or inside <style> tag */
body.admin-context {
  padding-top: 60px;  /* Adjust based on your navbar height */
}

.back-glow {
  border-radius: 8px;
  background-color: var(--surface);
  color: var(--text);
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease-in-out;
}

.back-glow:hover {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color: var(--text-on-primary);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.4);
  text-decoration: none;
}

.thank-you-page {
    text-align: center;
    padding: 4rem 2rem;
}
.thank-you-actions a {
    margin: 1rem;
}

.card-fields-hidden {
  display: none;
}

#stripeNotice {
  font-size: 0.95rem;
  padding: 1rem;
  background-color: var(--surface);
  border-left: 4px solid var(--accent);
  color: var(--text);
  margin-top: 1rem;
}

.list-group-item span {
  font-weight: 500;
}

.fw-bold.fs-5 {
  margin-top: 1.5rem;
}

button.btn-success {
  padding: 0.75rem;
  font-size: 1.1rem;
}

 .intl-phone-container {
    display: flex;
    gap: 8px;
  }

  #countryCodeSelector {
    max-width: 170px;
  }

  input[type="tel"] {
    letter-spacing: 1px;
  }

  @media (max-width: 768px) {
    .intl-phone-container {
      flex-direction: column;
    }

    #countryCodeSelector {
      max-width: 100%;
    }
  }


  .map-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}
.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media (max-width: 576px) {
    .map-responsive {
        padding-bottom: 75%;
    }
}

/* ============================================
   Bootstrap 5 dark-theme overrides
   ============================================
   Bootstrap's default components (cards, tables, form controls, modals,
   dropdowns) assume a light theme - just flipping the page background
   above isn't enough on its own, they'd still render as white boxes
   floating on a dark page. Same class of bug the POS app hit on its own
   Inventory/Reports screens when it first went dark (see
   tanzanite_store_management/FIXES_APPLIED.md Round 6/7) - fixing it
   here up front instead of leaving it to surface page by page. */

.card {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid #2e2e2e;
}

.card-header, .card-footer {
    background-color: var(--surface);
    border-color: #2e2e2e;
}

.table {
    color: var(--text);
    border-color: #2e2e2e;
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--text);
    border-bottom-color: #2e2e2e;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(var(--accent-rgb), 0.06);
    color: var(--text);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(var(--accent-rgb), 0.12);
    color: var(--text);
}

.form-control, .form-select {
    background-color: var(--surface);
    border-color: #3a3a3a;
    color: var(--text);
}

.form-control:focus, .form-select:focus {
    background-color: var(--surface);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.25);
}

.form-control::placeholder {
    color: #8a8a8a;
}

/* INFRA-009 - Bootstrap's own .form-control:disabled/.form-select:disabled
   rule (background-color: var(--bs-secondary-bg), a light gray) beats the
   plain .form-control rule above on specificity (a class+pseudo-class
   beats a bare class, regardless of stylesheet load order) - none of the
   --bs-* variables it depends on are themed (base.html only sets
   --bs-primary/--bs-link-*), so every disabled input/select was silently
   falling through to Bootstrap's default light-gray box with this theme's
   own bright/dark --text color still applied on top of it (same
   near-unreadable "light-on-light" gap as the invisible-email-field bug
   that prompted this audit - no disabled .form-control currently ships
   live, but nothing stopped the next one from regressing into it).
   Re-pinned to the theme's own palette so a disabled field reads as
   muted/non-interactive without losing contrast on either tenant's
   palette. `readonly` isn't included here - Bootstrap has no
   `.form-control:read-only` override, so a readonly field already
   inherits the plain .form-control rule above correctly (see
   account/profile.html's read-only email field). */
.form-control:disabled, .form-select:disabled {
    background-color: var(--surface);
    border-color: #3a3a3a;
    color: var(--muted-text);
    opacity: 1;
}

.form-label, .form-check-label {
    color: var(--text);
}

.list-group-item {
    background-color: var(--surface);
    color: var(--text);
    border-color: #2e2e2e;
}

.modal-content {
    background-color: var(--surface);
    color: var(--text);
}

.modal-header, .modal-footer {
    border-color: #2e2e2e;
}

.dropdown-menu {
    background-color: var(--surface);
    border-color: #2e2e2e;
}

.dropdown-item {
    color: var(--text);
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(var(--accent-rgb), 0.15);
    color: var(--text);
}

/* Scoped to .navbar-dark specifically (not every .navbar) since Round
   187 - Annettez Clozet's navbar is now .navbar-light (light background,
   dark text/icons - see shared/navbar.html), and Bootstrap's own
   navbar-light toggler icon SVG is already the correct dark color for
   that case without inverting. Applying this filter unconditionally
   would have inverted it to a near-white icon on a light navbar -
   invisible, the same class of bug this filter was originally written
   to fix for the dark case. */
.navbar-dark .navbar-toggler-icon {
    filter: invert(1);
}

.badge.bg-light {
    color: #111;
    background-color: #f8f9fa !important;
}

.text-muted,
.form-text {
    /* .form-text is a separate Bootstrap class from .text-muted (they just look
       alike) - Bootstrap 5.2's .form-text hardcodes color: #6c757d directly in
       its compiled CSS rather than through a CSS variable, so it wasn't touched
       by anything above. #6c757d on our dark surface only clears ~3.7:1 contrast
       (fails WCAG AA for body-sized text), which is what made the phone-format
       hint on Contact/Checkout unreadable.

       Was a hardcoded #a89f8c literal (tuned only for the dark theme) until
       Round 187, when Annettez Clozet's theme switched to a light
       background - a warm-tan color picked to read against a near-black
       surface fails just as badly the other way against a light one. Now
       driven by --muted-text so each theme can supply its own value (see
       theme_content/<tenant>.json's muted_text_color, wired through
       templates/base.html) instead of one hardcoded color serving every
       tenant regardless of background. */
    color: var(--muted-text) !important;
}

/* ============================================
   .bg-light sections - the actual bug behind "text not visible, looks a
   bit yellow" on Contact/Home. Several sections across the site
   (index.html's gallery teaser, contact.html's entire form section,
   gallery.html, blog post comments) use Bootstrap's .bg-light utility
   for a subtle alternating-section rhythm - exactly like the site's
   original white/#f8f9fa alternation before Round 47. That utility was
   never touched, so it was still rendering its default near-white
   background, while the *text* inside those sections already inherits
   the theme's light cream (var(--text), #F5F0E1 - warm enough to read
   as "a bit yellow", which is exactly what was reported) from Round 47.
   Light cream text on a near-white background is very low contrast -
   effectively invisible in normal lighting. Mapped to --surface instead
   of --bg (not pure black) specifically to preserve that alternating
   rhythm as depth rather than flattening the whole site to one solid
   black expanse - see the design note in FIXES_APPLIED.md Round 51 on
   why full flat black everywhere was worth avoiding regardless of this
   bug. */
.bg-light {
    background-color: var(--surface) !important;
}

/* .bg-white is a distinct Bootstrap utility from .bg-light and was missed in the
   pass above - shop.html's whole product section uses it, which meant the "Our
   Products" heading (and any other text using the theme's cream var(--text)
   color) was rendering near-white-on-white, i.e. genuinely invisible, not just
   low-contrast. Same treatment as .bg-light for consistency. */
.bg-white {
    background-color: var(--surface) !important;
}

/* A little restrained gold, as requested - used sparingly (dividers and
   a subtle underline on section headings) rather than applied broadly,
   since overusing an accent color the way "warm luxury" brands only
   apply it in small doses is what keeps it feeling premium rather than
   gaudy. */
hr {
    border-top: 1px solid rgba(var(--accent-rgb), 0.35);
    opacity: 1;
}

h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 0.5rem auto 0;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2px;
}

/* Show/hide password toggle (task #275) - the button js/passwordToggle.js
   injects next to every input[type="password"] on the page. .pw-toggle-wrap
   is the <span> it wraps the input in; padding-right on the input itself
   makes room so typed text never sits under the icon. Uses the theme's own
   --muted-text/--accent vars so it reads correctly on every tenant's
   palette, not just Gina's default dark theme. */
.pw-toggle-wrap {
    position: relative;
    display: block;
}

.pw-toggle-wrap input[type="password"],
.pw-toggle-wrap input[type="text"] {
    padding-right: 42px;
}

.pw-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    line-height: 0;
    cursor: pointer;
    color: var(--muted-text);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pw-toggle-btn:hover {
    color: var(--accent);
}


/* ============================================================
   SF-008 design follow-up (2026-09-14) - marketing-only tenant
   visual mode ("site-marketing" body class, set in base.html when
   g.tenant_site_type == 'marketing_only').

   Story: site_type_gate() (app/__init__.py) already blocks the shop/
   cart/checkout routes for a marketing_only tenant and navbar.html
   already hides the Shop/Cart links - but everything ELSE (hero CTA
   styling, section rhythm, card-grid density) still used the exact
   same e-commerce visual language as a full_store tenant. Owner's own
   framing: "We need a different home page and design for marketing
   only portal, can't look like normal stores." This block gives that
   class of site a distinct, editorial/brand-site rhythm on the
   homepage specifically (.page-blocks, see index.html) - generous
   section padding, alternating surface tone instead of a dense white
   card grid, a pill/outline CTA instead of a solid gradient "buy"
   button, numbered feature marks instead of icon badges - while still
   resolving every color from the tenant's own theme (--primary/
   --accent/--secondary/--surface/etc.), so it composes with a
   tenant's own branding instead of replacing it. Every rule here is
   scoped under .site-marketing and is a strict no-op for every
   full_store tenant (Gina's Real Hair, Annettez Clozet, Astrasoko
   platform itself).
   ============================================================ */

/* Editorial hero (hero.html's .hero-marketing class): bigger display
   type and more air above/below than the default store hero, which is
   tuned for a quick glance above a product grid, not to carry a whole
   page's first impression on its own. Scoped to --editorial
   specifically (not every flavor wants this exact type scale - bold
   uses its own, much larger one; corporate keeps the hero tighter and
   left-column-width instead of centered). */
.site-marketing--editorial .hero-marketing {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.site-marketing--editorial .hero-marketing h1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    letter-spacing: -0.02em;
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
}

.site-marketing--editorial .hero-marketing .lead {
    font-size: 1.15rem;
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
}

/* Pill/outline CTA - an invitation ("get in touch", "see our work"),
   not a "buy now" button. Still built from the tenant's own
   --primary/--text-on-primary tokens so it reads as their brand, not
   a generic gray default. */
.site-marketing--editorial .btn-primary {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: 999px;
    padding: 0.65rem 1.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.site-marketing--editorial .btn-primary:hover {
    background: var(--primary);
    color: var(--text-on-primary);
}

/* Match the secondary CTA's shape to the pill primary above - caught on
   a rendered check where the two sat side by side with mismatched
   corner radii (pill vs the shared default's plain 6px rectangle). */
.site-marketing--editorial .btn-secondary-marketing {
    border-radius: 999px;
    padding: 0.65rem 1.75rem;
}

/* Navbar: more air and letter-spacing on nav links than the default
   store nav's tighter, denser list - reads closer to a small studio's
   header than a store's utility nav. */
.site-marketing .navbar {
    padding: 18px 15px;
}

.site-marketing .navbar-nav .nav-link {
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 12.5px;
    font-weight: 600;
}

/* Numbered feature marks (feature_grid.html's .feature-index) instead
   of the store's icon-in-circle badge language - "01 / 02 / 03: our
   services" reads editorial, not "free shipping / secure checkout /
   24h support". Plain serif stack (not the tenant's own heading font -
   styles.css is static, not template-rendered, so it can't read
   theme.heading_font_family) chosen purely for the decorative-numeral
   look; it's a mark, not body copy, so it doesn't need to match the
   tenant's chosen typeface. */
.site-marketing--editorial .feature-index {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    opacity: 0.55;
}

/* Alternate homepage-block background tone instead of the store's
   uniform white-with-cards rhythm - a plain, cheap way to give a
   block-builder page (hero/text/feature_grid/gallery, any order, any
   count - see index.html's page builder) a deliberate flow without
   touching the page builder itself. Scoped to .page-blocks (index.html
   only) so it never reaches about/contact/gallery/blog, which extend
   the same base.html but don't use this loop. contact_info.html
   renders bare <div>s, not <section>, so it's unaffected either way -
   nth-of-type only counts same-tag siblings.

   Opt-in per flavor (editorial + bento below), NOT a shared
   .site-marketing rule - originally written as one shared rule for
   every flavor, but a rendered check (SF-008 follow-up, 2026-09-14)
   against bold's dark ground and corporate's crisp white ground both
   showed a visibly wrong warm-beige cut into the page; only editorial's
   and bento's own light/warm palettes actually want this rhythm.
   Specificity note: this selector is more specific than Bootstrap's
   single-class .bg-light (used by gallery.html), so it correctly wins
   there too for a consistent alternating rhythm down the page, for
   whichever flavor opts in. */
.site-marketing--editorial .page-blocks > section:nth-of-type(even):not(.logo-strip-block):not(.stat-band-block),
.site-marketing--bento .page-blocks > section:nth-of-type(even):not(.logo-strip-block):not(.stat-band-block) {
    background-color: var(--surface);
}


/* ============================================================
   SF-008 follow-up (2026-09-14) - marketing_style multi-flavor system.

   Everything above this point (.site-marketing / .site-marketing--
   editorial) was the original single-flavor design. Owner's follow-up
   instruction after the first client (Kuvumbua, a market-research firm)
   turned out to need a fundamentally different visual language than the
   artisan/small-business case the original design was built around:
   "let's do our options A to D with the combination and design that is
   world class ... final product now."

   Shared rules below (.hero-cta-row, .btn-secondary-marketing,
   .feature-grid-row/.feature-grid-item base, .logo-strip-block,
   .stat-band-block) are DELIBERATELY NOT scoped under .site-marketing -
   a logo strip or a headline stat is a reasonable block for a
   full_store or non-marketing tenant to add too (BLOCK_TYPE_LABELS
   doesn't gate them to marketing_only either), so they get a sane
   default look everywhere, then each site-marketing--{flavor} block
   below restyles them to match its own visual language. */

/* Second CTA on a hero (hero.html's cta2_text/cta2_url) - a lower-
   commitment ask alongside the primary one. Plain, unstyled-flavor
   default (a simple outline button) so it looks intentional even on a
   full_store tenant or a marketing_only tenant who hasn't been
   switched off 'editorial' yet. */
.hero-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-secondary-marketing {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--border, #ccc);
    color: var(--text);
    border-radius: 6px;
    padding: 0.65rem 1.5rem;
    font-weight: 600;
    background: transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.btn-secondary-marketing:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Default logo strip - a plain, quiet trust bar. Text-chip fallback
   (logo_strip.html renders this when a logo has no logo_url yet - see
   that partial's own comment; no tenant has real client logos supplied
   as of this writing) styled as a neutral wordmark, not a broken-image
   box. */
.logo-strip-block {
    background: var(--surface);
}

.logo-strip-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-text);
    font-weight: 600;
}

.logo-strip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.logo-strip-img {
    height: 28px;
    max-width: 140px;
    object-fit: contain;
    opacity: 0.85;
    filter: grayscale(1);
}

.logo-strip-chip {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--muted-text);
    padding: 6px 4px;
    border-bottom: 2px solid var(--border, #ddd);
}

/* Default stat band - a simple centered callout in the tenant's own
   secondary/primary tokens. */
.stat-band-block {
    background: var(--secondary);
    color: var(--text-on-secondary);
}

.stat-band-figure {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--accent);
}

.stat-band-body {
    max-width: 52ch;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.9;
}

/* Shared feature-grid hooks (feature_grid.html's .feature-grid-row /
   .feature-grid-item) - Bootstrap's own .row/.col-md-4 do the layout by
   default; each flavor below overrides only what it needs to (bold
   turns the grid into a list, bento into tiles), never re-declaring the
   base grid. */
.feature-grid-item {
    text-align: center;
}


/* ============================================================
   FLAVOR: bold - dark, typography-led, oversized-headline. Built from
   the 2026 "type as the primary visual asset" + dark-mode-first design
   trend research (see SF-008's own ticket for sources). Biggest,
   explicitly-accepted tradeoff: this flavor locks the homepage to a
   dark ground regardless of the tenant's own light theme colors - their
   --accent still shows through as the one highlight color, so it still
   reads as THEIR site, just always in this one dark register.
   ============================================================ */
.site-marketing--bold {
    background: #141210;
    color: #f3efe6;
}

/* h1,h2,h3 { color: var(--text); } (base theme rule, top of this file)
   is a real per-element rule that beats inheriting this dark
   background's own light color - every section heading built from a
   page-builder block (feature_grid/gallery/text/contact_info all use
   h2) needs this, not just the hero's h1. Caught the same way as the
   hero h1 bug - rendering this flavor against a real theme and finding
   headings unreadable. */
.site-marketing--bold h1,
.site-marketing--bold h2,
.site-marketing--bold h3 {
    color: #f3efe6;
}

.site-marketing--bold .navbar {
    background: #141210 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-marketing--bold .navbar-nav .nav-link,
.site-marketing--bold .navbar-brand {
    color: #f3efe6 !important;
}

.site-marketing--bold .hero-marketing {
    padding-top: 5rem;
    padding-bottom: 3rem;
    max-width: 900px;
    margin: 0 auto;
    text-align: left !important;
}

.site-marketing--bold .hero-marketing h1 {
    /* h1, h2, h3 { color: var(--text); } (base theme rule, top of this
       file) is a real per-element rule, not just inherited body color -
       it wins regardless of this dark background unless overridden
       explicitly here. Caught by rendering this flavor against a real
       (light-text-token) theme and finding the headline unreadable. */
    color: #f3efe6;
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    font-weight: 700;
    max-width: 16ch;
    margin: 0 0 22px;
    text-align: left;
}

.site-marketing--bold .hero-marketing .lead {
    color: #c9c3b6;
    max-width: 50ch;
    margin: 0 0 22px;
    text-align: left;
    font-size: 16px;
}

.site-marketing--bold .hero-marketing .hero-cta-row {
    justify-content: flex-start;
}

/* Link-style CTA instead of button chrome - "an invitation," not "buy
   now," pushed even further than editorial's pill: no fill, no border,
   just an underlined link in the tenant's own accent color. */
.site-marketing--bold .btn-primary,
.site-marketing--bold .btn-secondary-marketing {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--accent) !important;
    border-radius: 0 !important;
    color: var(--accent) !important;
    padding: 0 0 3px !important;
    font-weight: 600;
}

.site-marketing--bold .btn-primary:hover,
.site-marketing--bold .btn-secondary-marketing:hover {
    opacity: 0.8;
}

/* Feature grid becomes a plain numbered list, not a card grid - matches
   the mockup's .feat-list treatment. Bootstrap's .row/.col-md-4 are
   neutralized here rather than removed from the template, so this stays
   a pure CSS override (no template branching needed per flavor). */
.site-marketing--bold .feature-grid-row {
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    max-width: 900px;
    margin: 2rem auto 0;
}

.site-marketing--bold .feature-grid-item {
    display: flex;
    align-items: baseline;
    gap: 20px;
    width: 100%;
    max-width: none;
    flex: none;
    text-align: left;
    padding: 20px 0;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-marketing--bold .feature-grid-item h4 {
    color: #f3efe6;
}

.site-marketing--bold .feature-grid-item p {
    color: #a49d8c !important;
}

.site-marketing--bold .feature-index {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    opacity: 1;
    flex-shrink: 0;
    width: 26px;
}

.site-marketing--bold .logo-strip-block,
.site-marketing--bold .stat-band-block {
    background: #1b1815;
}

.site-marketing--bold .logo-strip-label {
    color: #77705f;
}

.site-marketing--bold .logo-strip-chip {
    color: #c9c3b6;
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

.site-marketing--bold .logo-strip-img {
    filter: grayscale(1) invert(1);
}

.site-marketing--bold .stat-band-figure {
    color: var(--accent);
}

.site-marketing--bold .stat-band-body {
    color: #c9c3b6;
    opacity: 1;
}

.site-marketing--bold .footer,
.site-marketing--bold footer {
    color: #77705f;
}


/* ============================================================
   FLAVOR: bento - modular tiles for a few distinct offerings at a
   glance. Scoped down from the original mockup on purpose: a true
   mixed-cell bento (hero + brand mark + features + gallery + contact
   all sharing one grid) assumes a FIXED set/order of blocks, which
   doesn't generalize to the real page builder (any tenant can add any
   number of hero/text/feature_grid/gallery/contact_info/logo_strip/
   stat_band blocks, in any order). Implemented instead as a bento-style
   tile treatment on feature_grid specifically (the one block type
   that's naturally a repeated set of same-shaped items already) -
   hero/gallery/contact_info/logo_strip/stat_band stay standard
   full-width sections above and below it, styled to match (rounded
   cards, consistent radius) rather than forced into the same grid.
   ============================================================ */
/* Solid button, not the base theme's default gradient "buy now" CTA
   (.btn-primary at the top of this file) - caught on a rendered check:
   bento didn't have its own primary-button override at all, so it fell
   straight through to that store-gradient default, which is exactly
   the "still looks like a normal store" problem this whole flavor
   system exists to avoid. */
.site-marketing--bento .btn-primary {
    background: var(--primary);
    border: none;
    color: var(--text-on-primary);
    border-radius: 8px;
    font-weight: 600;
}

.site-marketing--bento .btn-primary:hover {
    background: var(--accent);
    color: var(--text-on-primary);
}

.site-marketing--bento .feature-grid-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 140px;
    gap: 14px;
    max-width: 960px;
    margin: 1.5rem auto 0;
}

.site-marketing--bento .feature-grid-item {
    grid-column: span 2;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2dccc);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    text-align: left;
}

.site-marketing--bento .feature-grid-item:first-child {
    grid-column: span 3;
    grid-row: span 2;
    background: linear-gradient(150deg, var(--card-bg, #fff), rgba(var(--accent-rgb, 0, 0, 0), 0.08));
}

.site-marketing--bento .feature-index {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent);
    opacity: 0.6;
    margin-bottom: 6px;
}

.site-marketing--bento .logo-strip-block,
.site-marketing--bento .stat-band-block {
    border-radius: 14px;
    max-width: 960px;
    margin: 1.5rem auto;
}

.site-marketing--bento .gallery-row .tile,
.site-marketing--bento img.gallery-img {
    border-radius: 14px;
}


/* ============================================================
   FLAVOR: corporate - "Insights & Trust." Built for the market-
   research/consulting flavor of marketing_only tenant (Kuvumbua) -
   grounded in real B2B research-firm patterns (Numerator's own live
   homepage, a design review of McKinsey/BCG/Bain-style consulting
   sites - see SF-008's own ticket for sources), not the artisan/small-
   business language the other three flavors share. Navy/white authority
   palette, restrained sans, numbered "Services" (feature_grid reused,
   not renamed - it's still the same block type/content shape), a
   client-logo trust strip and a dark stat callout.
   ============================================================ */
.site-marketing--corporate {
    background: #ffffff;
    color: #16212e;
}

.site-marketing--corporate .navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e6e9ee;
}

.site-marketing--corporate .navbar-brand,
.site-marketing--corporate .navbar-nav .nav-link {
    color: #16212e !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 13.5px !important;
}

.site-marketing--corporate .hero-marketing {
    text-align: left !important;
    max-width: 760px;
    margin: 0 auto;
    padding-top: 4rem;
    padding-bottom: 2.5rem;
}

.site-marketing--corporate .hero-marketing h1 {
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1.08;
    color: #0f2942;
    text-align: left;
    max-width: none;
    margin: 0 0 18px;
}

.site-marketing--corporate .hero-marketing .lead {
    color: #3d4a59;
    text-align: left;
    max-width: 56ch;
    margin: 0 0 26px;
}

.site-marketing--corporate .hero-marketing .hero-cta-row {
    justify-content: flex-start;
}

.site-marketing--corporate .btn-primary {
    background: #0f2942 !important;
    border: none !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 0.75rem 1.4rem !important;
    font-weight: 600;
}

.site-marketing--corporate .btn-primary:hover {
    background: #163c5c !important;
}

.site-marketing--corporate .btn-secondary-marketing {
    border: 1.5px solid #c3cbd6 !important;
    color: #0f2942 !important;
    border-radius: 6px !important;
}

/* "Services," numbered - same feature_grid content/markup as every
   other flavor, given a bordered card treatment and a blue numeral
   instead of the amber editorial mark or bold's plain inline one. */
.site-marketing--corporate .feature-grid-item {
    border: 1px solid #e6e9ee;
    border-radius: 10px;
    padding: 24px;
    text-align: left;
}

.site-marketing--corporate .feature-index {
    /* Plain serif stack, not the tenant's own heading font - styles.css
       is static, not template-rendered, so it can't read theme.
       heading_font_family, and nothing loads 'Fraunces' globally (only
       a tenant whose theme.google_font_import happens to name it would
       get it - Kuvumbua's doesn't). Same reasoning as editorial's own
       feature-index above. */
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #3d6bb0;
    opacity: 1;
}

.site-marketing--corporate .feature-grid-item h4 {
    color: #16212e;
    font-weight: 700;
}

.site-marketing--corporate .feature-grid-item p {
    color: #5c6774 !important;
}

.site-marketing--corporate .logo-strip-block {
    background: #f5f7fa;
    border-top: 1px solid #e6e9ee;
    border-bottom: 1px solid #e6e9ee;
}

.site-marketing--corporate .logo-strip-label {
    color: #8b96a3;
}

.site-marketing--corporate .logo-strip-chip {
    color: #5c6774;
    border-bottom-color: #d7dde4;
}

.site-marketing--corporate .stat-band-block {
    background: #0f2942;
}

.site-marketing--corporate .stat-band-figure {
    color: #8fb4e6;
}

.site-marketing--corporate .stat-band-body {
    color: #c3d2e6;
    opacity: 1;
}

@media (max-width: 720px) {
    .site-marketing--bento .feature-grid-row {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    .site-marketing--bento .feature-grid-item,
    .site-marketing--bento .feature-grid-item:first-child {
        grid-column: 1;
        grid-row: auto;
    }
    .site-marketing--bold .feature-grid-item {
        flex-direction: column;
        gap: 6px;
    }
}