@font-face {
    font-family: 'CMU Serif Roman';
    font-style: normal;
    font-weight: normal;
    src: local('CMU Serif Roman'), url('../fonts/cmunrm.woff'), format('woff');
    }

    @font-face {
    font-family: 'CMU Serif Bold';
    font-style: normal;
    font-weight: normal;
    src: local('CMU Serif Bold'), url('../fonts/cmunbx.woff'), format('woff');
    }

    @font-face {
    font-family: 'Sukar Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Sukar Regular'), url('../fonts/Sukar Regular.woff'), format('woff');
    }

    @font-face {
    font-family: 'Sukar Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Sukar Bold'), url('../fonts/Sukar Bold.woff'), format('woff');
    }

    @font-face {
    font-family: 'Sukar black';
    font-style: normal;
    font-weight: normal;
    src: local('Sukar black'), url('../fonts/Sukar Black.woff'), format('woff');
    }

    @font-face {
        font-family: 'Garet-Book';
        font-style: normal;
        font-weight: normal;
        src: local('Garet-Book'), url('../fonts/Garet-Book.woff') format('woff');
        }

    @font-face {
    font-family: 'Garet-Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('Garet-Heavy'), url('../fonts/Garet-Heavy.woff'), format('woff');
    }


button {
    background-color: rgba(96, 96, 96, 0.1);
    border: 1px solid #606060;
    line-height: 60%;
    padding: 0.25rem  0.45rem;
}

a:link, a:visited   {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Sukar Bold';
}

a:hover {
    text-decoration: none;
    color: #ccc;
}

div#navbar-01 * { 
    text-decoration: none;
    color: #ffffff;
    font-family: 'Sukar Bold';
} 

.body-link:link, .body-link:visited {
    text-decoration: none;
    color: #212529;
}

.body-link:hover {
    text-decoration: none;
    color: #000;
}

.button-link:link, .button-link:visited {
    text-decoration: none;
    /* darkened from #bfb4a4 for WCAG AA contrast (4.5:1) against the #fffaf4
       events-block background — was 1.97:1 */
    color: #81725b;
    font-family: 'Sukar Bold';
}
.button-link-mag:link, .button-link-mag:visited {
    text-decoration: none;
    /* darkened from #fff for WCAG AA contrast (4.5:1) against the #c1b2a9
       magazine-block background — was 2.06:1 */
    color: #474747;
    font-family: 'Sukar Bold';
}
.button-link-contact:link, .button-link-contact:visited {
    text-decoration: none;
    color: #212529;
    font-family: 'Sukar Bold';
}

.button-link:hover {
    text-decoration: none;
    /* darkened further from #726b62 — after the resting-state contrast fix
       above, the old hover color was too close to the new resting color
       (#81725b) to read as a hover change at all */
    color: #5a5040;
}

.button-link-mag:hover {
    text-decoration: none;
    /* darkened further than the resting-state fix (#474747) so hover still
       reads as a visible change — the first pass landed almost the same
       darkness as resting and the hover effect was imperceptible */
    color: #2b2b2b;
}

.navlogo {
    max-height: 40px;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

/* News/Magazine/Events/About/Contact were demoted from h1 to h2 for correct
   heading structure (WCAG 1.3.1) — they all carry .block-title, so sizing
   itself was already unaffected (.display-6 wins on specificity), but this
   preserves the negative top margin they got for free from the old bare
   h1{margin} rule below, which no longer matches them now they're h2. */
.block-title {
    margin: 0; /* 2026-10-13 dev test (Dave): was -2.5rem 0 0 0 */
}

/* "Digital Editions" / "BridalBiz" / the three Contact cards were demoted
   from h2 to h3 for correct heading structure — none of them carry a sizing
   class, so without this they'd shrink to the browser's default h3 size. */
h3 {
    font-size: 2rem;
}
body {
    font-family: 'Garet-Book';
}

/* ---------- Newsletter signup modal (#mcsignup) — matches the legal-popup
   visual language (dark header, gold serif title, blurred backdrop) instead
   of default Bootstrap modal styling. #mcsignup is the only modal on this
   site (verified 2026-09-07) — if a second modal is ever added, scope the
   .modal-backdrop rule below more narrowly then. ---------- */
/* Bootstrap darkens .modal-backdrop by animating the element's own `opacity`
   (0 -> var(--bs-backdrop-opacity), i.e. 0.5) — but backdrop-filter on the same
   element as a fractional opacity is unreliable in Chromium (the browser has
   to flatten the filtered result into an intermediate layer for the opacity
   blend, and the blur often drops out while the darkening still shows). Force
   the element to stay fully opaque and get the same 50% look from the
   background-color's own alpha channel instead, so the blur composites
   normally. */
.modal-backdrop.show {
    opacity: 1;
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#mcsignup .modal-content {
    border: none;
    border-radius: 4px;
    box-shadow: 0 24px 72px rgba(0, 0, 0, .28);
    overflow: hidden;
}

#mcsignup .modal-header {
    background: #1a1a1a;
    border-bottom: 1px solid #333;
    padding: 1.2rem 1.75rem;
    /* overflow:hidden on .modal-content alone can leave a 1px unclipped sliver
       at the top corners in Chromium; rounding the header itself removes the
       reliance on that clip being pixel-perfect. */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#mcsignup .modal-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .95rem;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #d4b896;
}

#mcsignup .btn-close {
    /* Bootstrap's default close icon is a dark SVG; invert it to read on the dark header */
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .7;
}

#mcsignup .btn-close:hover {
    opacity: 1;
}

#mcsignup .modal-body {
    background: #fff;
    padding: 1.75rem 2rem 2rem;
}

#mcsignup .modal-body p.lead {
    font-family: Georgia, 'Times New Roman', serif;
    color: #444;
}

#mcsignup .indicates-required,
#mcsignup .mc-field-group label,
#mcsignup .mc-field-group strong {
    font-family: 'Garet-Book', Helvetica, Arial, sans-serif;
    color: #2a2a2a;
}

#mcsignup #mc-embedded-subscribe {
    background: #bfb4a4;
    border: 1px solid #bfb4a4;
    color: #fff;
    font-family: 'Sukar Bold', Helvetica, Arial, sans-serif;
    padding: .5rem 1.5rem;
    border-radius: 3px;
    transition: background-color .2s ease, border-color .2s ease;
}

#mcsignup #mc-embedded-subscribe:hover {
    background: #a89a86;
    border-color: #a89a86;
}

#mcsignup .modal-footer {
    background: #fff;
    border-top: 1px solid #ede8e2;
    padding: 1rem 1.75rem 1.5rem;
}

#mcsignup .modal-footer .btn-secondary {
    background: transparent;
    border: 1px solid #bfb4a4;
    color: #212529;
    font-family: 'Sukar Bold', Helvetica, Arial, sans-serif;
}

#mcsignup .modal-footer .btn-secondary:hover {
    background: #bfb4a4;
    border-color: #bfb4a4;
    color: #fff;
}

/* ---------- #mcsignup form layout pass (2026-09-07) ----------
   Mailchimp's embed CSS sizes the form to fit-content and stacks every label
   above its input, which left the dialog lopsided (fields ended ~120px short
   of the right edge) and ~950px tall. Below: full-width form, label-in-front
   for the text inputs, radio options laid out in a row, centred section
   headings, and both actions on a single centred row. ---------- */
#mcsignup #mc_embed_signup {
    width: auto;
    background: transparent;
    font-family: 'Garet-Book', Helvetica, Arial, sans-serif;
}

/* uniform vertical rhythm between field groups */
#mcsignup #mc_embed_signup form {
    margin: 0;
}

#mcsignup #mc_embed_signup .mc-field-group {
    width: 100%;
    margin: 0 0 .85rem;
    padding: 0;
}

#mcsignup #mc_embed_signup .indicates-required {
    text-align: center;
    margin: 0 0 1.1rem;
    font-size: .85rem;
}

/* section headings for the radio groups, centred to match the buttons */
#mcsignup #mc_embed_signup .mc-field-group.input-group > strong {
    display: block;
    text-align: center;
    margin: 0 0 .5rem;
    font-weight: 600;
}

/* text fields: label in front of the input, sharing one row. flex-wrap so
   mc-validate.js's error message (a third child added after input, see
   .mce_inline_error below) drops to its own full-width line instead of
   squeezing into the same row as label+input. */
#mcsignup #mc_embed_signup .mc-field-group:not(.input-group) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

#mcsignup #mc_embed_signup .mc-field-group:not(.input-group) > label {
    flex: 0 0 38%;
    margin: 0;
    text-align: right;
}

#mcsignup #mc_embed_signup .mc-field-group:not(.input-group) > input {
    flex: 1 1 auto;
    width: auto;
    margin: 0;
}

/* mc-validate.js's per-field "This field is required." message — overrides
   Mailchimp's default red pill (classic-061523.css: 14px, background pill,
   inline-block next to the field) with small plain text on its own line
   below the field instead. flex:0 0 100% + order:3 forces it past the
   label/input pair onto the next flex line (parent has flex-wrap above).
   input.mce_inline_error's red border highlight is left as-is. */
#mcsignup #mc_embed_signup .mc-field-group div.mce_inline_error {
    flex: 0 0 100%;
    order: 3;
    margin: .2rem 0 0;
    /* Indent to the input's left edge so the message sits directly under the
       FIELD, not under the 38% label column at the far left. Mirrors the
       label's `flex: 0 0 38%` plus the field group's 1rem gap. padding (not
       margin) so it stays inside the flex:0 0 100% line — box-sizing is
       border-box globally via Bootstrap. No media query needed: the
       label/input split does not stack at any width in this file. */
    padding: 0 0 0 calc(38% + 1rem);
    background: none;
    border-radius: 0;
    font-size: .7rem;
    color: #c0392b;
}

/* radio groups keep the heading above, but the options run across */
#mcsignup .mc-field-group.input-group ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

#mcsignup #mc_embed_signup .mc-field-group.input-group li {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

#mcsignup #mc_embed_signup .mc-field-group.input-group label {
    margin: 0;
    font-weight: 400;
}

/* Subscribe + Close together on one centred row */
#mcsignup .mc-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    margin-top: 1.4rem;
    padding-top: 1.25rem;
    border-top: 1px solid #ede8e2;
}

#mcsignup .mc-actions #mc-embedded-subscribe {
    margin: 0;
}

#mcsignup .mc-actions .btn-secondary {
    background: transparent;
    border: 1px solid #bfb4a4;
    color: #212529;
    font-family: 'Sukar Bold', Helvetica, Arial, sans-serif;
}

#mcsignup .mc-actions .btn-secondary:hover {
    background: #bfb4a4;
    border-color: #bfb4a4;
    color: #fff;
}

/* Subscribe is an <input type=submit> and Close a <button>, so they pick up
   different default metrics (32px vs 38px tall) - match them explicitly so
   they sit level on the shared row. */
#mcsignup .mc-actions #mc-embedded-subscribe,
#mcsignup .mc-actions .btn-secondary {
    height: 40px;
    padding: 0 1.5rem;
    font-size: .95rem;
    line-height: 1;
    border-radius: 3px;
}

/* ---------- small footer (partials/_footer_small.twig) — every page except
   the homepage, which keeps its own large footer. Links left, icons right,
   both on one row; below 576px they stack, centred. ---------- */
.bb-footer-small {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    text-align: left;
    background-color: #fffaf4;
    border-top: 1px solid #ede8e2;
}

.bb-footer-small-links {
    margin-bottom: 0;
}

/* .sm-footer-icon-bar itself is tuned for the homepage's stacked, centred
   layout (top margin) — reset here since this is a single compact row. */
.bb-footer-small-icons {
    display: flex;
    gap: .5rem;
}

.bb-footer-small-icons.sm-footer-icon-bar a {
    margin-top: 0;
    margin-right: 0;
    color: #212529;
}

.bb-footer-small-icons.sm-footer-icon-bar a:hover {
    color: #000;
}

@media (max-width: 575.98px) {
    .bb-footer-small {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}





/* Hero text/photo layout (keep-out zone for the model's dress, stacked layout on mobile)
   lives in home_en.twig / home_de.twig; the old white mobile scrim was removed 2026-10-13. */

/* Mobile fix: .block-title's fixed -2.5rem top margin overshoots the smaller
   mobile top padding (pt-3=16px vs pt-md-5=48px on News/Magazine/About/Contact),
   pulling the heading up past its section. Scaled to match desktop's net +8px gap. */
@media (max-width: 767.98px) {
    .block-title {
        margin-top: 0; /* 2026-10-13 dev test (Dave): was -0.5rem */
    }
}

/* Fix: Magazine section cover photo does not render at all on mobile
   (dev.bridalbiz.eu homepage, screenshot-confirmed against desktop). The class
   carries background-image/min-height but is applied to an <a> tag, which is
   inline by default; a flex parent (d-md-flex, >=768px only) blockifies it for
   free on desktop, but below 768px the <a> reverts to inline and the
   background/min-height box collapses. Safe at every width: on desktop this is
   a no-op (already blockified by the flex parent), on mobile it restores the box. */
.poster-img-magazine {
    display: block;
}

/* Fix: with the Magazine photo now rendering on mobile (previous fix), the
   white "Magazine" heading collides with the tablet's own light-colored
   "BridalBiz" text inside the cover photo itself. Small opaque chip behind
   just the heading (not a full scrim like the hero) -- matches the existing
   news_latest_*.twig caption pattern (rgba(0,0,0,0.55) behind white text),
   guaranteed legible regardless of photo content behind it. Desktop untouched. */
@media (max-width: 767.98px) {
  .poster-img-magazine .my-3 {
    background-color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 4px;
  }
}

/* Fix: "Events" heading reads as belonging to the wrong neighbor on mobile --
   .block-bg-events's shared margin-bottom:4rem creates a large gap below the
   heading while the gap above it (tightened by the block-title fix) is small.
   Scoped to the #events heading wrapper only (an ID selector, so it cannot
   touch the class's OTHER usage on the first Events card column) and to
   mobile only -- checked first: at desktop, #events and the cards row below
   it are plain block siblings with zero other vertical spacing between them,
   so removing this margin at every width would leave the cards flush against
   the heading with no gap at all. Mobile-only avoids that regression. */
@media (max-width: 767.98px) {
  #events.block-bg-events {
    margin-bottom: 0;
  }
}