/* Provenance: Ported from germain_des_bois/frontend/static/styles.css. Literal port of site header and footer chrome styles with brand variable fallback tokenization. */

.site-footer {
  display: contents;
}

.desktop-site-header {
  display: none;
}

.mobile-site-header {
  width: min(100%, 880px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--chrome-edge, var(--glass-border, rgba(72, 111, 68, 0.24)));
  border-radius: 24px;
  background: var(--chrome-surface, rgba(8, 11, 8, 0.78));
  /* The theme's shadow, not the component's. A fixed 48px drop at 24 percent black is written for
     a dark page; on a light one the header looked carved out rather than lifted. The literal stays
     as the last resort for a theme that states none. */
  box-shadow: var(--component-shadow, 0 18px 48px rgba(0, 0, 0, 0.24));
  backdrop-filter: blur(18px);
}

.mobile-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
  grid-column: 1;
  grid-row: 1;
  color: var(--text-color, #f5f3ed);
  text-decoration: none;
}

.mobile-brand-logo {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

/* ONE BRAND, TWO GROUNDS.
 * Both files are server-rendered so switching data-theme never waits on a request or replaces
 * DOM. The explicit theme wins; with no explicit choice the same OS preference that chooses the
 * platform palette chooses the mark. A brand with only one file never receives these attributes
 * and keeps the ordinary rules above. */
:root [data-brand-logo-variant] {
  display: none;
}

:root[data-theme='light'] [data-brand-logo-variant='light'],
:root[data-theme='dark'] [data-brand-logo-variant='dark'],
:root:not([data-theme]) [data-brand-logo-variant='light'] {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) [data-brand-logo-variant='light'] {
    display: none;
  }

  :root:not([data-theme]) [data-brand-logo-variant='dark'] {
    display: block;
  }
}

/*
 * A composed tenant site publishes its Site Builder selection on the root, and
 * that remains the authority above.  Platform-hosted shared surfaces use the
 * DarkModeProvider instead: it publishes the viewer's resolved state on body
 * so a light selection still wins when the OS itself prefers dark.  This is a
 * shared brand-presentation bridge, not a Legal or App Wizards exception.
 */
:root:not([data-theme]) body[data-aw-theme='light'] [data-brand-logo-variant='light'],
:root:not([data-theme]) body[data-aw-theme='dark'] [data-brand-logo-variant='dark'] {
  display: block;
}

:root:not([data-theme]) body[data-aw-theme='light'] [data-brand-logo-variant='dark'],
:root:not([data-theme]) body[data-aw-theme='dark'] [data-brand-logo-variant='light'] {
  display: none;
}

.mobile-brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.mobile-brand-name {
  color: var(--text-color, #f5f3ed);
  font-size: var(--fs-label, 14px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mobile-brand-subtitle {
  /* THE TAGLINE IS BRAND, NOT BODY TEXT. The sign-in page has always painted it in the
     tenant's accent; the header and footer painted it in the body colour, so the same words
     were two different colours on the same site. */
  color: var(--accent-strong, var(--primary-accent-strong, var(--text-color, #f5f3ed)));
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mobile-header-actions {
  display: contents;
}

.mobile-header-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  grid-column: 1 / -1;
  grid-row: 2;
}

.mobile-header-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--chrome-edge-soft, var(--glass-border, rgba(82, 98, 80, 0.24)));
  background: var(--overlay-soft, rgba(255, 255, 255, 0.03));
  color: color-mix(in srgb, var(--text-color, #f5f3ed) 82%, transparent);
  font-size: 13px;
  font-weight: var(--weight-heading, 700);
  line-height: 1;
  text-decoration: none;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.mobile-header-links a.is-active {
  color: var(--chrome-contrast, #071007);
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-accent, #2c9833) 0%, var(--primary-accent-strong, #7ce268) 100%);
}

.mobile-header-links a:hover {
  color: var(--text-color, #f5f3ed);
  border-color: color-mix(in srgb, var(--primary-accent-strong, #7ce268) 28%, transparent);
}

.mobile-header-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
}

.desktop-brand,
.desktop-header-links {
  color: inherit;
}




.header-account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--chrome-edge-soft, var(--glass-border, rgba(82, 98, 80, 0.28)));
  background: var(--overlay-soft, rgba(255, 255, 255, 0.02));
  color: var(--text-muted, #c6c0b4);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.header-account-link:hover {
  color: var(--chrome-contrast, #071007);
  background: var(--primary-accent-strong, #7ce268);
  border-color: transparent;
}


/* THE PLATFORM'S ONE IMAGE GLYPH, painted in the reader's own colour.
 *
 * Vincent, 2026-09-08: the footer slot "dosen't look consistent with the other ones". It was the
 * FOURTH copy of this glyph and this wash - and the comment two rules down claimed it was already
 * "the same recipe as .aw-media-showcase__item--placeholder", which it was not. A sentence asserting
 * convergence is not convergence; that is the whole reason the gate now parses these files.
 *
 * The shape comes from designSystem/mediaSlot.css, which ships inside the served site shell, and the
 * COLOUR comes from the tenant. The old copy had `#d1d5db` baked into its strokes, so on a light
 * brand it was a pale glyph on a pale tile whatever the tile did. */
.hero-media-placeholder::after,
.site-footer-media::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  background-color: var(--text-muted, var(--text-color, currentColor));
  -webkit-mask-image: var(--aw-media-slot-glyph);
  mask-image: var(--aw-media-slot-glyph);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.32;
  pointer-events: none;
}

.gallery-page .mobile-site-header,
.gallery-page .public-weather-advisory-section {
  width: min(100%, 1480px);
}

.site-meta {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand brand"
    "feature feature"
    "contact contact"
    "legal legal"
    "social social"
    "copyright credit";
  align-items: center;
  gap: 18px 24px;
  margin-top: 14px;
  padding: 20px 6px 0;
  border-top: 1px solid var(--chrome-edge, var(--glass-border, rgba(72, 111, 68, 0.2)));
  color: color-mix(in srgb, var(--text-muted, #c6c0b4) 82%, transparent);
  font-size: var(--fs-hint, 12px);
  line-height: 1.5;
  text-align: left;
}

.site-footer-brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
  gap: 10px;
  color: var(--text-color, #f5f3ed);
  text-decoration: none;
}

.site-footer-logo {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.site-footer-brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.site-footer-brand-name {
  color: var(--text-color, #f5f3ed);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer-brand-subtitle {
  /* THE TAGLINE IS BRAND, NOT BODY TEXT. The sign-in page has always painted it in the
     tenant's accent; the header and footer painted it in the body colour, so the same words
     were two different colours on the same site. */
  color: var(--accent-strong, var(--primary-accent-strong, var(--text-color, #f5f3ed)));
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer-media {
  display: block;
  grid-area: feature;
  position: relative;
  overflow: hidden;
  width: min(100%, 220px);
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  border: 1px solid var(--chrome-edge, var(--glass-border, rgba(71, 112, 67, 0.28)));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary-accent-strong, #7ce268) 16%, transparent), transparent 46%),
    linear-gradient(160deg, var(--chrome-scrim, rgba(10, 16, 10, 0.98)), var(--chrome-panel, rgba(14, 21, 14, 0.92)));
  box-shadow:
    inset 0 1px 0 var(--overlay-soft, rgba(255, 255, 255, 0.04)),
    0 18px 36px rgba(0, 0, 0, 0.22);
}

.site-footer-media--filled {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* AN EMPTY SLOT, DRAWN THE WAY EVERY OTHER EMPTY SLOT ON THE PLATFORM IS DRAWN.
 *
 * Not "the same recipe as" - literally the same value. The base `.site-footer-media` above paints a
 * dark chrome scrim, which is right behind a photograph and wrong as an empty slot on a light brand;
 * this replaces it with `--aw-media-slot-fill`. The dashed edge is what carries the meaning: a slot
 * waiting to be filled rather than a card that failed to load. */
.site-footer-media--empty {
  border-style: dashed;
  border-color: var(--glass-border, var(--chrome-edge, rgba(127, 127, 127, 0.28)));
  background: var(--aw-media-slot-fill);
  box-shadow: none;
}

.site-footer-media-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-footer-media--filled::before,
.site-footer-media--filled::after {
  display: none;
}

.site-footer-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary-accent-strong, #7ce268) 8%, transparent), transparent 34%),
    linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--primary-accent-strong, #7ce268) 5%, transparent));
  pointer-events: none;
}

.site-footer-media::after {
  width: 64px;
  height: 64px;
}

.site-footer-section {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.site-footer-contact {
  grid-area: contact;
}

.site-footer-legal {
  grid-area: legal;
}

.site-footer-heading {
  margin: 0 0 2px;
  color: var(--primary-accent, #2c9833);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-footer-contact-item {
  display: grid;
  gap: 4px;
  margin: 0;
}

.site-footer-contact-item span {
  color: color-mix(in srgb, var(--text-muted, #c6c0b4) 68%, transparent);
  font-size: 11px;
  font-weight: var(--weight-heading, 700);
  line-height: 1.35;
}

.site-footer-link {
  color: var(--text-muted, #c6c0b4);
  font-size: 13px;
  font-weight: var(--weight-heading, 700);
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.18s ease;
}

.site-footer-link:hover {
  color: var(--text-color, #f5f3ed);
}

.site-footer-phone-link {
  display: inline;
}

.site-footer-call-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 46px;
  margin-top: 2px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-accent, #2c9833) 0%, var(--primary-accent-strong, #7ce268) 100%);
  color: var(--chrome-contrast, #071007);
  font-size: var(--fs-label, 14px);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent, #2a7828) 20%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.site-footer-call-button:hover {
  color: var(--chrome-contrast, #071007);
  transform: translateY(-1px);
  box-shadow: 0 16px 32px color-mix(in srgb, var(--accent, #2a7828) 24%, transparent);
}

.site-copyright,
.site-credit {
  margin: 0;
}

/* The theme switch shares the credit line rather than claiming a row of its own.
   It carries no grid-area, so it was auto-placed into an extra implicit row and stretched the
   footer vertically, leaving the switch stranded on the left under everything else. Wrapping the
   two in one item puts the switch beside "Powered by App Wizards", which is the only other thing
   on that line. A brand with a single configured theme renders no switch and the row simply holds
   the credit, exactly as before. */
.site-credit {
  grid-area: credit;
  justify-self: end;
  text-align: right;
}

.site-copyright {
  grid-area: copyright;
}

.cookie-settings-button,
.site-legal-link {
  color: var(--text-muted, #c6c0b4);
  font-size: var(--fs-label, 14px);
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.cookie-settings-button {
  justify-self: start;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.cookie-settings-button:hover,
.site-legal-link:hover {
  color: var(--text-color, #f5f3ed);
}

.site-legal-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
}

/* The theme switch belongs with the brand row's controls, not beside App Wizards' credit.
   The credit line is OUR attribution; a visitor control sitting next to it read as though the
   switch were part of the attribution. Here it sits with the social icons, which is where the
   other per-visitor affordances on this row already live. */
.site-footer-controls {
  grid-area: social;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
}

.social-links {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 2px 0 2px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-color, #f5f3ed);
  opacity: 0.86;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-link:hover {
  transform: translateY(-1px);
  opacity: 1;
}

.social-link.is-disabled {
  opacity: 0.42;
  cursor: default;
}

.social-link-icon {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* The glyph asset carries one fixed near-white fill, drawn for a dark site, so on a light one it
   all but disappears. A CSS mask over currentColor would take the tenant's own text colour and be
   the right answer; it is not available here, because the icons are served from the platform
   origin to a tenant host and browsers refuse a cross-origin mask-image, which made every icon
   vanish rather than merely fade. Inverting under the light theme is the honest compromise: a
   tenant whose light text is not near-black gets an approximation of their token rather than the
   token itself. Recorded here rather than left to be rediscovered. */
:root[data-theme='light'] .social-link-icon {
  filter: invert(1);
}

.site-credit {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  text-align: left;
}

.appwiz-brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.appwiz-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.appwiz-icon-image {
  display: block;
  width: 29px;
  height: 29px;
  object-fit: contain;
}

/* THE MARK HAS TO BE VISIBLE ON THE GROUND IT SITS ON.
   There is one App Wizards mark in the repo and it is the light one, so on a customer's light
   footer it was white on white: invisible, which is worse than absent since the credit reads as
   broken rather than as missing. Inverting a monochrome mark gives the dark one, keyed on the
   theme the page is actually using.

   STOPGAP, and marked as one: when a real dark asset exists, point at it and delete this. An
   inverted image is the right answer only while the mark stays monochrome. */
[data-theme='light'] .appwiz-icon-image,
:root[style*='color-scheme: light'] .appwiz-icon-image,
.theme-light .appwiz-icon-image {
  filter: invert(1);
}

.appwiz-name {
  font-weight: var(--weight-heading, 700);
  font-style: italic;
  color: var(--text-color, #f5f3ed);
}

.policy-toolbar .language-toggle {
  display: none;
}

.policy-back-link:focus-visible,
.policy-nav-link:focus-visible,
.policy-section a:focus-visible {
  outline: 2px solid var(--primary-accent-strong, #7ce268);
  outline-offset: 2px;
}

.policy-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--chrome-edge, var(--glass-border, rgba(72, 111, 68, 0.28)));
  background: var(--overlay-soft, rgba(255, 255, 255, 0.02));
  color: var(--text-muted, #c6c0b4);
  font-size: 13px;
  font-weight: var(--weight-heading, 700);
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.policy-nav-link:hover {
  color: var(--text-color, #f5f3ed);
  border-color: color-mix(in srgb, var(--primary-accent-strong, #7ce268) 30%, transparent);
}

.policy-nav-link.is-active {
  color: var(--chrome-contrast, #071007);
  border-color: color-mix(in srgb, var(--primary-accent-strong, #7ce268) 48%, transparent);
  background: linear-gradient(135deg, var(--primary-accent, #2c9833) 0%, var(--primary-accent-strong, #7ce268) 100%);
}

@media (min-width: 1120px) {
  .desktop-site-header {
    position: sticky;
    top: 18px;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(100%, 1480px);
    min-height: 72px;
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--chrome-edge, var(--glass-border, rgba(72, 111, 68, 0.26)));
    border-radius: 999px;
    background: var(--chrome-surface, rgba(8, 11, 8, 0.78));
    box-shadow: var(--component-shadow, 0 18px 48px rgba(0, 0, 0, 0.28));
    backdrop-filter: blur(22px);
  }

  .mobile-site-header {
    display: none;
  }

  .desktop-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
    color: var(--text-color, #f5f3ed);
    text-decoration: none;
  }

  .desktop-brand-logo {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
  }

  .desktop-brand-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .desktop-brand-name {
    color: var(--text-color, #f5f3ed);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .desktop-brand-subtitle {
    max-width: 360px;
    overflow: hidden;
    color: var(--accent-strong, var(--primary-accent-strong, var(--text-color, #f5f3ed)));
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .desktop-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .desktop-header-links {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--chrome-edge-soft, var(--glass-border, rgba(82, 98, 80, 0.24)));
    border-radius: 999px;
    background: var(--overlay-soft, rgba(255, 255, 255, 0.03));
  }

  .desktop-header-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--text-color, #f5f3ed) 82%, transparent);
    font-size: 13px;
    font-weight: var(--weight-heading, 700);
    line-height: 1;
    text-decoration: none;
    transition: color 0.18s ease, background-color 0.18s ease;
  }

  .desktop-header-links a:hover {
    color: var(--text-color, #f5f3ed);
    background: color-mix(in srgb, var(--primary-accent-strong, #7ce268) 8%, transparent);
  }

  .desktop-header-links a.is-active {
    color: var(--chrome-contrast, #071007);
    background: linear-gradient(135deg, var(--primary-accent, #2c9833) 0%, var(--primary-accent-strong, #7ce268) 100%);
  }

  .quote-status-page-card .site-meta {
    width: 100%;
    max-width: none;
    min-width: 0;
    grid-area: auto;
    justify-self: stretch;
    margin-top: 48px;
  }

  .site-meta {
    grid-area: meta;
    grid-template-columns: minmax(280px, 1fr) minmax(210px, 0.72fr) minmax(230px, 0.82fr) minmax(276px, 0.92fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "brand . . social"
      "feature contact legal ."
      "copyright . . credit";
    align-items: start;
    min-height: 238px;
    gap: 24px 52px;
    margin-top: 48px;
    padding: 34px 8px 4px;
    background:
      linear-gradient(180deg, var(--chrome-scrim, rgba(7, 11, 7, 0.98)), var(--chrome-scrim, rgba(7, 11, 7, 0.98))) padding-box;
  }

  .site-footer-brand {
    justify-self: start;
    align-self: start;
  }

  .site-footer-heading {
    margin-bottom: 6px;
  }

  .site-footer-media {
    display: block;
    justify-self: start;
    align-self: start;
  }

  .site-footer-contact-item {
    gap: 4px;
  }

  .site-footer-link {
    font-size: var(--fs-label, 14px);
  }

  .site-footer-phone-link {
    display: inline;
  }

  .site-footer-call-button {
    display: inline-flex;
    margin-top: 6px;
  }

  .site-footer-controls {
    align-self: start;
    justify-self: end;
    justify-content: flex-end;
  }

  .social-links {
    min-width: 0;
    max-width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0;
  }

  .cookie-settings-button {
    justify-self: flex-start;
    align-self: start;
    margin-top: 2px;
  }

  .site-legal-links {
    justify-content: flex-start;
    align-self: start;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 2px;
  }

  .site-copyright {
    justify-self: start;
    align-self: end;
    text-align: left;
  }

  .site-credit {
    min-width: 0;
    max-width: 100%;
    justify-self: end;
    align-self: end;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 0;
    text-align: right;
  }

  .policy-toolbar {
    display: none;
  }

  .policy-nav-link {
    justify-content: center;
    min-height: 42px;
    padding: 10px 14px;
    border-color: transparent;
    border-radius: 999px;
    background: transparent;
    text-align: center;
  }

  .policy-card .site-meta {
    grid-area: meta;
    margin-top: 52px;
  }
}

@media (min-width: 1120px) and (max-width: 1599px) {
  .site-meta {
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.82fr) minmax(240px, 0.92fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "brand social social"
      "feature contact legal"
      "copyright copyright credit";
    gap: 24px 28px;
    min-height: 0;
  }

  .site-footer-media {
    width: min(100%, 200px);
  }

  .site-footer-controls {
    justify-self: end;
    justify-content: flex-end;
  }

  .social-links {
    min-width: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 16px;
  }

  .site-credit {
    min-width: 0;
    max-width: 100%;
    justify-self: end;
    text-align: right;
    flex-wrap: wrap;
  }

  .policy-card .site-meta {
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.82fr) minmax(240px, 0.92fr);
    grid-template-areas:
      "brand social social"
      "feature contact legal"
      "copyright copyright credit";
  }
}

@media (max-width: 720px) {
  .site-meta {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "feature"
      "contact"
      "legal"
      "social"
      "copyright"
      "credit";
    align-items: flex-start;
    gap: 18px;
    padding-top: 20px;
  }

  .site-footer-media {
    width: min(100%, 220px);
    justify-self: start;
    align-self: start;
  }

  .site-footer-controls {
    justify-self: start;
    justify-content: flex-start;
  }

  .social-links {
    justify-content: flex-start;
    padding: 4px 0 0;
  }

  .site-credit {
    justify-content: flex-start;
    text-align: left;
  }

  .cookie-settings-button {
    justify-self: flex-start;
  }

  .site-legal-links {
    justify-content: flex-start;
    gap: 12px;
  }

  .policy-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .site-legal-links {
    gap: 6px 14px;
  }
}

/* The language toggle's rules are concatenated here from
   siteShell/languageToggle.css by the widget sync: ONE source, so the server-rendered
   chrome and the React surfaces can never drift. */

/* THE PAGE SHELL - ported from the reference site's own page and card rules
   (styles.css:51-57 for the page ground, :179-187 for the container, and the >=1120px
   override at :5006-5008 for the desktop width and padding).

   Renamed with an aw- prefix on purpose, against the usual copy-the-class-name rule: `.page`
   and `.card` are generic enough to collide with a customer's own stylesheet, and this file
   is served onto customer sites. Every VALUE below is copied; only the selector changed.

   Widths resolve from --page-max-width so a tenant sets its own measure in Site Builder; the
   literals are the reference site's, so an unconfigured tenant renders what it renders today. */
/* The reference site sets `* { box-sizing: border-box }` globally (styles.css:16-18) and
   every measurement below assumes it. Without it padding ADDS to width: the container
   measured 1509px against the reference's 1325px and overflowed a 1440px viewport
   horizontally. Scoped to the shell rather than applied globally, because this stylesheet
   loads onto customer pages that have their own reset. */
.aw-site,
.aw-site *,
.aw-site *::before,
.aw-site *::after {
  box-sizing: border-box;
}

.aw-site {
  min-height: 100vh;
  display: grid;
  place-items: center;
  gap: 18px;
  padding: 24px;
}

/* Desktop: the page aligns to the TOP and its gutter grows with the viewport
   (styles.css:4891-4897). Porting only the base rule left the shell centred vertically with
   a flat 24px gutter, which is a different page. */
@media (min-width: 1120px) {
  .aw-site {
    align-items: start;
    justify-items: center;
    gap: 22px;
    padding: 24px clamp(28px, 4vw, 64px) 38px;
  }
}

/* MOBILE PADDING LADDER, ported from the reference site (styles.css:7313-7325 and
   7489-7497). It is a token ladder, not a single value: the page, the shell, the card, a
   nested panel and a field each tighten at 640px and again at 380px. Porting only the page
   rule left the container 16px wider than the reference at 390px, which is exactly the kind
   of small compounding gap that reads as "close but not the same". */
@media (max-width: 640px) {
  .aw-site,
  .aw-site-container {
    --mobile-page-padding: 10px;
    --mobile-shell-padding: 14px;
    --mobile-card-padding: 14px;
    --mobile-nested-padding: 12px;
    --mobile-field-padding: 12px;
  }

  .aw-site {
    padding: 18px;
    padding-right: var(--mobile-page-padding);
    padding-left: var(--mobile-page-padding);
  }
}

@media (max-width: 380px) {
  .aw-site,
  .aw-site-container {
    --mobile-page-padding: 8px;
    --mobile-shell-padding: 12px;
    --mobile-card-padding: 12px;
    --mobile-nested-padding: 10px;
    --mobile-field-padding: 11px;
  }
}

.aw-site-container {
  width: min(100%, var(--page-max-width, 880px));
  padding: 30px 32px 26px;
  text-align: center;
}

/* `is-surface` is the card treatment. A tenant whose page is a flat band (no panel) simply
   does not set it, which is the difference between a landing page and a document page. */
.aw-site-container.is-surface {
  /* The page container has its OWN radius dial. Borrowing --component-radius made it follow
     the tenant's component radius (24px here) where the reference page container is 28px, so
     the shell rounded differently from the site it was copied from. A container is not a
     component: it is the page surface, and it earns its own knob. */
  border-radius: var(--page-container-radius, 28px);
  border: 1px solid var(--card-edge, var(--glass-border, rgba(31, 79, 34, 0.32)));
  background: var(--component-bg, #0a0d0a);
  box-shadow: var(--component-shadow, 0 24px 60px rgba(0, 0, 0, 0.38));
}

@media (min-width: 1120px) {
  .aw-site-container {
    width: min(100%, var(--page-max-width, 1480px));
    padding: clamp(34px, 4vw, 58px) clamp(34px, 4vw, 58px) 32px;
  }

  /* The desktop container is rounded more than the tablet one (styles.css:5018): the surface
     is larger, so the corner grows with it. A single radius across all widths looked right in
     isolation and wrong beside the real page. */
  .aw-site-container.is-surface {
    border-radius: var(--page-container-radius-desktop, 36px);
  }
}

/* The container's responsive padding, ported from the reference site
   (styles.css @720px: 24px 20px 30px, @640px: 16px 10px 18px with a 24px radius). These
   must come AFTER the base rule: my first attempt put a mobile value in an earlier media
   block and the later base rule won, so the container kept desktop padding on a phone while
   its WIDTH matched - a reminder that matching one measurement proves nothing about the
   next. */
@media (max-width: 720px) {
  .aw-site-container {
    padding: 24px 20px 30px;
  }
}

@media (max-width: 640px) {
  .aw-site-container {
    padding: 16px 10px 18px;
  }

  .aw-site-container.is-surface {
    border-radius: var(--page-container-radius-mobile, 24px);
  }
}

/* A FULL-SCREEN page: a surface that replaces the site rather than sitting inside it.
 *
 * A sign-in takeover is the clearest case. Rendered in the ordinary container it was inset
 * inside a card, under a nav bar and a weather advisory - a different product decision than
 * the customer made on their own site, where the same surface fills the screen with just the
 * brand, the choices, and a way out. */
.aw-site-container.is-fullscreen {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* The shell's own page padding must not inset a takeover either. */
.aw-site:has(> .aw-site-container.is-fullscreen) {
  padding: 0;
}

/* --- the primary and secondary button, site-wide (styles.css L3942-4020, L5497) ---
 *
 * Every module's call to action wears these two class names, and on a composed page nothing
 * defined them: the only `.submit-button` rules in the bundle were scoped inside the
 * catalogue surface, so an ops action or a route button outside it rendered as a bare blue
 * link. The primitive belongs to the SHELL, where every composed page already loads it, and
 * reads the tenant's Site Builder tokens with the reference's own literals as fallback.
 */
.secondary-button,
.submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: var(--button-radius, 999px);
  padding: 14px 24px;
  min-width: 220px;
  font: inherit;
  font-weight: var(--weight-heading, 700);
  line-height: var(--lh-label, 1.2);
  cursor: pointer;
  text-decoration: none;
}

.secondary-button {
  border: 1px solid var(--component-stroke, var(--glass-border, rgba(82, 98, 80, 0.34)));
  background: var(--input-bg, rgba(255, 255, 255, 0.02));
  color: var(--text-color, #f5f3ed);
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.secondary-button:hover,
.submit-button:hover {
  transform: translateY(-1px);
}

.submit-button {
  border: 1px solid transparent;
  background: linear-gradient(
    135deg,
    var(--accent, var(--primary-accent, #2b8c31)) 0%,
    var(--accent-strong, var(--primary-accent-strong, #7ce268)) 100%
  );
  color: var(--on-accent, #081208);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--accent, #2a7828) 18%, transparent);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.secondary-button:disabled,
.submit-button:disabled {
  opacity: 0.56;
  cursor: not-allowed;
  border-color: rgba(123, 133, 123, 0.2);
  color: rgba(245, 243, 237, 0.82);
  box-shadow: none;
  filter: saturate(0.65);
  transform: none;
  background: linear-gradient(135deg, rgba(67, 79, 67, 0.92) 0%, rgba(104, 117, 104, 0.92) 100%);
}

.secondary-button:focus-visible,
.submit-button:focus-visible {
  outline: 2px solid var(--accent-strong, #7ce268);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .secondary-button,
  .submit-button {
    width: 100%;
    min-width: 0;
  }
}

/* The UEM's own stylesheet now paints an opaque ground under its panel tint (see
 * Components/UserEngagementModal.css), so a composed page needs no override here. One rule,
 * one place - a second copy in the shell would only drift. */

/* THE LIGHT AND DARK SWITCH, in the footer.
   Offered only to brands that ship both palettes, so it never appears on a site with one look.
   Both glyphs are rendered and one is hidden per theme, which keeps the control the same size
   whichever way round the page is: a button that changes width when pressed reads as a glitch. */
.site-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--chrome-edge, var(--glass-border, rgba(127, 127, 127, 0.24)));
  background: transparent;
  color: var(--text-muted, rgba(127, 127, 127, 0.72));
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.site-theme-toggle:hover {
  color: var(--text-color, inherit);
  border-color: var(--primary-accent, currentColor);
  background: color-mix(in srgb, var(--primary-accent, currentColor) 10%, transparent);
}

.site-theme-toggle:focus-visible {
  outline: 2px solid var(--primary-accent, currentColor);
  outline-offset: 2px;
}

/* On a dark page, offer the sun (what you would switch TO). On a light page, the moon. */
.site-theme-toggle-icon {
  display: none;
}

:root[data-theme='dark'] .site-theme-toggle-icon--sun,
:root:not([data-theme='light']) .site-theme-toggle-icon--sun {
  display: inline;
}

:root[data-theme='light'] .site-theme-toggle-icon--sun {
  display: none;
}

:root[data-theme='light'] .site-theme-toggle-icon--moon {
  display: inline;
}

/* A composed page hosted inside an application that already paints its own content surface (App
   Wizards' storefront). It takes the same `aw-site-container` as a brand's site - the same inset,
   max width and mobile ladder - centred the way `.aw-site` centres it, without that shell's page
   gutter or full-height grid, which belong to a whole site rather than to one page. */
.aw-composed-page {
  display: grid;
  justify-items: center;
  width: 100%;
  box-sizing: border-box;
}
.aw-composed-page > .aw-site-container {
  box-sizing: border-box;
}

/* AN EMPTY MEDIA SLOT LOOKS THE SAME EVERYWHERE, AND FOLLOWS THE READER'S THEME.
 *
 * Vincent, 2026-09-08: "even these <span class="service-card-media"> ... feels darker in light mode
 * than other placeholder media tiles like <figure class="aw-media-showcase__item--placeholder">".
 *
 * He was comparing two surfaces that mean the identical thing - MEDIA GOES HERE, NOTHING IS HERE YET
 * - and they did not look alike, because by then THREE files had each drawn it:
 *
 *   the catalogue tile   accent gradient at FULL strength + a near-black scrim over it
 *   the media showcase   the accent mixed down to 16%/9% over the component ground, dashed edge
 *   the media bento      a third copy of the showcase's, written to match it by hand
 *
 * The showcase and the bento agreed only because I had copied one into the other, which is not
 * agreement, it is a coincidence with a maintenance schedule. The catalogue never got the copy, so it
 * kept a saturated fill that reads as a dark tile on a light theme - which is what he saw.
 *
 * So the appearance lives HERE, once, and the three surfaces consume it by name. They keep their own
 * geometry - a card top has no dashed edge, a standalone slot does - because that is genuinely
 * different. What is not different is the fill, the glyph and the colour, and those are now impossible
 * to drift.
 *
 * ── WHY THE GLYPH IS A MASK ────────────────────────────────────────────────────────────────────
 *
 * All three copies carried the same inline SVG with `#d1d5db` baked into its strokes: a fixed light
 * grey, chosen when every tenant had a dark ground. A background-image cannot read a token, so the
 * glyph could never follow a brand's theme however carefully the tile around it did. Painted through
 * a mask, the shape stays in the file and the COLOUR comes from the tenant, so a light brand gets a
 * dark glyph and a dark brand a light one, from the same nine lines.
 */

/* ── AND THE TOKENS REACH SURFACES THAT CANNOT WEAR THE CLASS ──────────────────────────────────
 *
 * The served site shell emits its footer media slot as chrome, from the backend, with no React
 * component and no `.aw-media-slot` ancestor to inherit from. Declaring the two values at `:root` as
 * well is what lets that surface consume the same authority instead of keeping the fourth copy it
 * had.
 *
 * Safe, and deliberately so: these are PLATFORM-PRIVATE values, not theme tokens - Site Builder does
 * not own them and no tenant block sets them, so nothing here can out-rank a brand's own palette.
 * And a custom property is substituted where it is USED, not where it is declared, so the wash still
 * resolves against whatever `--accent-strong` and `--component-bg` finally are on that page. The
 * class declaration stays alongside, so the primitive also works on its own in any scope.
 */
:root,
.aw-media-slot,
.aw-media-slot__icon {
  /* The shape only, in one place. No colour: `currentColor` is what a background-image could never
     be, and it is declared on the SLOT too so a surface drawing the glyph in a pseudo-element
     inherits it rather than carrying a fourth copy. */
  --aw-media-slot-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Crect x='9' y='14' width='46' height='36' rx='8' stroke='%23000' stroke-width='3'/%3E%3Ccircle cx='22' cy='25' r='4.5' fill='%23000'/%3E%3Cpath d='M18 44L29 32L36 39L42 31L50 44H18Z' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── THE FILL IS A TOKEN, NOT ONLY A RULE ──────────────────────────────────────────────────────
 *
 * MEASURED after the first attempt: the showcase placeholder still rendered its plain component
 * ground. `.aw-media-slot` and `.aw-media-showcase__item` are both one class, so the cascade was
 * decided by which stylesheet the bundler happened to emit last - and the catalogue tile, scoped
 * inside `.catalogue-selection-surface`, outranked the primitive outright.
 *
 * Winning that fight with a doubled class or an `!important` would make the primitive's authority
 * depend on a specificity arms race it can never finally win. A CUSTOM PROPERTY does not compete: it
 * INHERITS. So the value lives here once, and each surface applies it at whatever specificity its own
 * cascade demands. One authority for what the fill IS; three honest statements about where it goes.
 */
:root,
.aw-media-slot {
  /* Mixed down to a wash rather than laid on flat: this is a slot waiting for a photograph, and it
     must not compete with the brand's actual imagery once that arrives. */
  --aw-media-slot-fill:
    radial-gradient(circle at 30% 20%, var(--glass-border, rgba(127, 127, 127, 0.22)), transparent 62%),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent-strong, var(--accent, #7f7f7f)) 16%, transparent),
      color-mix(in srgb, var(--accent, #7f7f7f) 9%, transparent)
    ),
    var(--component-bg, var(--aw-surface-1, rgba(127, 127, 127, 0.06)));
}

/* Only the CLASS paints. `:root` above carries the value so any surface can reach it; painting the
   document with it would be a very different thing. */
.aw-media-slot {
  background: var(--aw-media-slot-fill);
}

/* THE ONE COPY OF THE IMAGE GLYPH. Every surface that draws an empty media slot points here. */
.aw-media-slot__icon {
  display: block;
  background-color: var(--text-muted, var(--text-color, currentColor));
  -webkit-mask-image: var(--aw-media-slot-glyph);
  mask-image: var(--aw-media-slot-glyph);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.42;
  pointer-events: none;
}

/* A browser with no mask support gets the shape in a fixed neutral rather than a blank square. It is
   the old behaviour, kept only where the better one is unavailable. */
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .aw-media-slot__icon {
    background-color: transparent;
    background-image: var(--aw-media-slot-glyph);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.3;
  }
}

/* THE language toggle's styles - ONE source for the server-rendered chrome AND every React
   surface (the auth form used to draw its own inline-styled control with hardcoded greys).
   Ported verbatim from the reference site's header toggle; only brand-variable values are
   tokenized. Imported by the LanguageToggle component, and concatenated into the served
   site-shell.css by the widget sync so the chrome gets the identical rules. */

/* THIS CONTROL PINS ITS OWN GEOMETRY, DELIBERATELY.
   It used to declare only what it wanted to look like and left font-size, height, line-height and
   display unset, which is fine on a tenant's served site (this stylesheet is all there is) and
   wrong inside an App Wizards app, where a global `button, .button` reset in App.css fills exactly
   those gaps from --control-height (48px) and --control-font-size (16px). The identical component
   and the identical stylesheet therefore rendered 55% taller with 20% larger type in the apps than
   on germaindesbois.ca. The values below are what the reference site renders, so pinning them
   changes nothing there and makes every other surface match it. */
.language-toggle {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--chrome-edge-soft, var(--glass-border, rgba(82, 98, 80, 0.28)));
  border-radius: 999px;
  background: var(--overlay-soft, rgba(255, 255, 255, 0.02));
  line-height: normal;
}

.language-button {
  /* `border`, `background` and `color` carry !important ONLY because the app-side reset marks
     those three !important, and !important beats specificity. Without it the selected language
     had the same background as the unselected one, so the control showed no selection at all. */
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  color: var(--text-muted, var(--text-color, currentColor)) !important;
  padding: 8px 14px;
  font-weight: var(--weight-heading, 700);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  /* The four the app reset would otherwise supply. 13.3333px is what the reference header
     renders, being the browser's own button size, and it is pinned in px so a host's root
     font-size cannot resize the control. */
  display: inline-block;
  height: auto;
  font-size: 13.3333px;
  line-height: normal;
}

/* BOTH TOKEN VOCABULARIES, AND NO BRAND COLOUR AS A FALLBACK.
   --primary-accent-strong and --chrome-contrast are what a tenant's site gateway emits;
   --accent-strong, --accent and --button-text-color are what the platform's own React apps define.
   Naming only the gateway's meant App Wizards resolved neither and fell through to the literal
   below, which was #7ce268: Germain Des Bois green, painted onto App Wizards' own header while
   GDB and Ad Solutions were correct. A hardcoded brand colour is not a fallback, it is one
   customer's paint leaking onto another's surface, so the last resort here is deliberately
   neutral and belongs to nobody. */
.language-button.is-active {
  color: var(--chrome-contrast, var(--on-accent, var(--button-text-color, #ffffff))) !important;
  background: var(
    --primary-accent-strong,
    var(--accent-strong, var(--accent, var(--primary-accent, rgba(127, 127, 127, 0.35))))
  ) !important;
}

/* A collapsed navigation rail still uses the SAME two-language control. Only its density
   changes; it does not fall back to a second one-button interaction or another state model. */
.language-toggle.is-compact {
  gap: 2px;
  padding: 3px;
}

.language-toggle.is-compact .language-button {
  padding: 6px 7px;
  font-size: 0.72rem;
}

.language-button:focus-visible,
.header-account-link:focus-visible,
.secondary-button:focus-visible,
.submit-button:focus-visible,
.cookie-link-button:focus-visible,
.cookie-settings-button:focus-visible,
.site-footer-call-button:focus-visible,
.site-footer-brand:focus-visible,
.site-footer-link:focus-visible,
.service-card-button:focus-visible,
.social-link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary-accent-strong, var(--accent-strong, var(--accent, currentColor)));
  outline-offset: 2px;
}

/* Screen-reader-only text. The chrome emits `sr-only` labels beside its social icons for
   assistive tech; with no rule for it the labels rendered as visible underlined text next to
   every icon. Standard clip pattern, kept here so the served chrome and the React surfaces
   share one definition. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* SITE ALERTS: the banner a tenant publishes across its whole site.
 *
 * Ported from the reference site's own alerts module (its .gdb-site-alerts containers and
 * .gdb-site-alert card), which had never existed platform-side: the alert DATA was already
 * served correctly by the platform and read identically on both hosts, but a platform-served
 * page had nowhere to render it, so a tenant's weather advisory simply never appeared.
 *
 * The base card is tokenized so every tenant's alerts follow its Site Builder theme. The
 * per-alert colours an author sets in the admin still win over these, which is how the
 * reference's advisory gets its own tint.
 */

.aw-site-alerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, var(--page-max-width, 880px));
  margin-left: auto;
  margin-right: auto;
}

/* An empty container must not reserve space, or every page gains a phantom gap under its
   header on the days a tenant publishes nothing. */
.aw-site-alerts:empty {
  display: none;
}

.aw-site-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--control-radius, 12px);
  background: var(--component-bg, rgba(127, 127, 127, 0.06));
  border: 1px solid var(--component-stroke, var(--glass-border, rgba(127, 127, 127, 0.22)));
  color: var(--text-color, inherit);
  box-shadow: var(--component-shadow, 0 8px 24px rgba(0, 0, 0, 0.28));
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

.aw-site-alert--warning { border-color: var(--warning-color, rgba(230, 180, 90, 0.3)); }
.aw-site-alert--error { border-color: var(--danger-color, rgba(230, 110, 110, 0.32)); }
.aw-site-alert--success { border-color: var(--success-color, rgba(120, 210, 150, 0.32)); }

.aw-site-alert__icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  opacity: 0.9;
  margin-top: 1px;
}

.aw-site-alert__icon svg { width: 22px; height: 22px; display: block; }
.aw-site-alert__body { flex: 1 1 auto; min-width: 0; }

.aw-site-alert__title {
  margin: 0 0 2px;
  font-weight: var(--weight-heading, 600);
  font-size: 0.95rem;
}

.aw-site-alert__msg {
  margin: 0;
  font-size: 0.9rem;
  line-height: var(--lh-body, 1.4);
  opacity: 0.92;
}

.aw-site-alert__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.aw-site-alert__cta {
  padding: 4px 10px;
  border: 1px solid var(--component-stroke, currentColor);
  border-radius: 8px;
  color: var(--accent-strong, var(--primary-accent, currentColor));
  font-size: 0.82rem;
  font-weight: var(--weight-heading, 600);
  white-space: nowrap;
  text-decoration: none;
}

.aw-site-alert__cta:hover { background: var(--accent-soft, transparent); }

.aw-site-alert__close {
  padding: 2px 4px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.aw-site-alert__close:hover { opacity: 1; }

@media (min-width: 1120px) {
  .aw-site-alerts { width: min(100%, var(--page-max-width-lg, 1480px)); }
}