/*
Theme Name: TT4 OBC
Theme URI: https://ontariobiodiversitycouncil.ca/
Description: Child theme for Twenty Twenty-Four styled to match the OBC reference look (teal top bar + dark tabbed nav).
Author: Kelly Klinck
Template: twentytwentyfour
Text Domain: tt4-obc
Version: 1.3.6
*/

/*
Changelog:
1.3.6 - In-page menu restyled: plain text links separated by bullets, in
        place of the rounded pill buttons. The sticky menu bar is now light
        blue with no border, so it reads as part of the blue title band
        until the page scrolls.
1.3.5 - Added .obc-stickynav: a white bar holding the in-page menu
        (.obc-jumpnav) that stays at the top of the window while the page
        scrolls, so every section is one click away from anywhere on the
        page. One menu per page, placed as the first block. In-page menu
        links get a dark outline so they show on white. Anchor targets
        now stop below the sticky bar.
1.3.4 - More page components, first used on En savoir plus and Qu'est-ce
        que la biodiversite: .obc-jumpnav (in-page menu), .obc-figure (big
        number), .obc-two-col (two-column list), .obc-tiles (labelled
        tiles), .obc-rows (headings separated by hairlines). Plain lists
        inside bands now get an indent and space between items. Links on
        the dark band are white. Anchor targets inside bands get a small
        scroll offset.
1.3.3 - Added reusable page components, first used on the Strategie de
        l'Ontario page: full-width bands (.obc-band + blue / tint / dark /
        divided / flush-top variants), .obc-narrow, .obc-card, .obc-label,
        .obc-statement, .obc-year, .obc-lead, .obc-numbered, .obc-photo,
        .obc-pullquote, .obc-cta, .obc-button. Markup lives in the page
        content; CSS only lives here.
1.3.2 - Footer: link list in the teal band is now stacked vertically.
        Qui sommes-nous? / Nous contacter are regular weight; the
        alternate-language link (English) is uppercase, bold and larger.
        Header: removed the left margin on the utility link divider (the
        flex gap already supplies that space, so it was doubled).
1.3.1 - Footer: link row now sits in a full-width teal band with the
        copyright / Suivez-nous bar in dark below it, like the original
        site (replaces the thin teal rule on top). Header: utility link
        divider now targets list items (li + li) instead of sibling
        anchors (a + a), which never matched the rendered markup.
1.3.0 - Added footer styling (.obc-footer). Markup lives in the Footer
        template part; CSS only lives here. Added :focus-visible alongside
        :hover on the utility links and main nav items so keyboard users
        get the same feedback as mouse users.
1.2.1 - Wrapped scroll-behavior: smooth in a prefers-reduced-motion media
        query, so visitors who've set their OS to reduce motion (often a
        vestibular/dizziness accommodation) get instant scroll instead.
1.2.0 - Added floating "back to top" button styling. Markup and scroll
        behavior are injected by a separate WPCode Lite snippet
        (obc-back-to-top), not this file -- CSS only lives here.
1.1.0 - Consolidated Site Editor Additional CSS into this file. Fixed nav
        dropdown rendering behind the carousel by moving the stacking-context
        fix to the header wrapper instead of .obc-navbar (raising .obc-navbar
        itself would have broken the logo/navbar overlap). Added carousel
        pagination styling. Replaced a hardcoded hex placeholder with the
        obc-dark preset color variable.
1.0.0 - Initial version.
*/

/* ===== Base / accessibility ===== */

/* Visible keyboard focus outline */
:where(.wp-site-blocks *:focus) {
  outline-width: 2px;
  outline-style: solid;
}

/* Smooth in-page anchor scrolling -- off for visitors who've set their OS
   to reduce motion (often a vestibular/dizziness accommodation) */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Offset anchor targets so a sticky/overlapping header doesn't cover them on jump */
.scroll-padding-4 {
  scroll-margin-top: 2em;
}

/* Utility: drop left padding on a button, e.g. when an icon sits to its left */
.button-no-left-padding a {
  padding: calc(.667em + 2px) calc(1.333em + 2px) calc(.667em + 2px) 0;
}


/* ===== OBC-like header + nav ===== */

/* Lift the whole header (logo + both bars) above the homepage carousel's
   own stacking context, so the nav dropdown renders on top of it.
   Deliberately NOT set on .obc-navbar itself -- see z-index note below. */
header.wp-block-template-part {
  margin-block-start: 0;
  position: relative;
  z-index: 10;
}

/* TOP TEAL BAND */
.obc-topbar {
  background: var(--wp--preset--color--obc-teal);
  padding: 22px 0 18px;
}

/* Align logo left + utility right, vertically centered */
.obc-topbar .wp-block-columns {
  align-items: center;
  justify-content: space-between;
}

.obc-topbar .wp-block-column:first-child {
  justify-content: flex-start;
}

.obc-topbar .wp-block-column:last-child {
  justify-content: flex-end;
}

/* --- Logo overlap + left anchor (robust) --- */

/* Allow overlap (some block wrappers can clip) */
.obc-topbar,
.obc-topbar .wp-block-columns,
.obc-topbar .wp-block-column,
.obc-navbar {
  overflow: visible;
}

/* z-index: 1, NOT 100 -- this only needs to sit below the logo (z-index: 5)
   so the logo overlaps the dark bar. The carousel stacking fix lives on
   header.wp-block-template-part above, not here. */
.obc-navbar {
  position: relative;
  z-index: 1;
}

/* Target Site Logo OR Image block used for the logo */
.obc-topbar .wp-block-site-logo,
.obc-topbar .wp-block-image {
  position: relative;
  z-index: 5;

  /* Move it left + down into the dark bar */
  transform: translate(-8px, 42px);
}

/* Optional: subtle nudge left to match legacy header spacing */
/*
.obc-topbar .wp-block-site-logo {
  margin-left: -10px;
}
*/

/* Logo container -- PNG already includes shape */
.obc-logo-card {
  display: inline-block;
  background: none;
  padding: 0;
  transform: none;
  box-shadow: none;
}

/* Top right utility links (uppercase, spaced like legacy site) */
.obc-utility {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-end;

  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.obc-utility a {
  color: rgba(0,0,0,.55);
  text-decoration: none;
}

.obc-utility a:hover,
.obc-utility a:focus-visible {
  text-decoration: underline;
}

/* Divider between top utility links. The links render as list items, so
   this targets li + li (the earlier a + a version never matched).
   No margin-left: the space before the line comes from the list's own gap;
   padding-left spaces the line from the link after it. */
.obc-utility li + li {
  position: relative;
  padding-left: 16px;
}

.obc-utility li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(0,0,0,0.7);
}


/* DARK NAV BAR */
.obc-navbar {
  background: var(--wp--preset--color--obc-dark);
  border-top: 2px solid rgba(255,255,255,.25);
  border-bottom: 2px solid rgba(255,255,255,.25);
}

.obc-navbar .wp-block-navigation__container {
  gap: 0;
}

/* Main nav items: Title Case, calmer weight */
.obc-navbar .wp-block-navigation-item__content {
  color: #fff !important;
  text-decoration: none;
  padding: 14px 18px;
  display: block;

  text-transform: none;     /* keep Title Case */
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
}

/* Divider lines between tabs */
.obc-navbar .wp-block-navigation-item {
  border-left: 2px solid rgba(255,255,255,.3);
}

.obc-navbar .wp-block-navigation-item:first-child {
  border-left: none;
}

/* Hover + keyboard focus */
.obc-navbar .wp-block-navigation-item__content:hover,
.obc-navbar .wp-block-navigation-item__content:focus-visible {
  background: rgba(255,255,255,.12);
}


/* ===== Homepage carousel / pagination ===== */
/* Carousel Slider Block for Gutenberg (wp-block-cb-carousel-v2). Several
   rules below need !important -- confirmed in DevTools that the plugin's
   own CSS matches or beats these on specificity; not added defensively. */

/* Larger pagination dots */
.wp-block-cb-carousel-v2 {
  --wp--custom--carousel-block--pagination-bullet-size: 15px;
}

/* Move pagination under the text column (33.333% matches the slide's text
   column flex-basis, so the dots sit under the text, not the image) */
.wp-block-cb-carousel-v2 .cb-pagination {
  left: auto;
  right: 0;
  width: 33.333%;
  bottom: 50px !important; /* plugin default: -35px, loses on specificity */
}

.wp-block-cb-carousel-v2 .cb-pagination.swiper-pagination-horizontal {
  justify-content: flex-start !important; /* flex container -- text-align has no effect here */
}

/* Square-ish outlined dots, hollow until active (matches old site) */
.wp-block-cb-carousel-v2 .cb-pagination-bullet {
  background-color: transparent !important;
  border: 2px solid var(--wp--preset--color--obc-dark);
  border-radius: 4px !important;
}

.wp-block-cb-carousel-v2 .cb-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--wp--preset--color--obc-dark) !important;
}


/* ===== Back to top button ===== */
/* Button markup + scroll listener are injected via the obc-back-to-top
   WPCode Lite snippet (wp_footer hook). This is CSS only. */

.obc-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000; /* intentionally above header (10) -- floating UI control, not page content */

  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;

  background: var(--wp--preset--color--obc-dark);
  color: #fff;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* .is-visible is toggled by the snippet's scroll listener */
.obc-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.obc-back-to-top:hover,
.obc-back-to-top:focus-visible {
  background: var(--wp--preset--color--obc-teal);
}

@media (prefers-reduced-motion: reduce) {
  .obc-back-to-top {
    transition: opacity 0.2s ease, visibility 0.2s;
    transform: none;
  }
}


/* ===== Page components ===== */
/* Reusable building blocks for content pages. Each is a class added in the
   block's Advanced > Additional CSS class(es) field. First used on the
   Strategie de l'Ontario page.

   Structure: a page is a stack of full-width Group blocks (.obc-band).
   Inside a band, blocks sit in the 760px content column unless they are
   set to Wide width (1100px). */

:root {
  --obc-light-blue: #93ced6; /* light blue panel color -- no preset exists */
  --obc-tint: #eef7f8;       /* pale version of the light blue, for bands */
  --obc-rule: #cfd8d3;       /* hairline divider on white */
}

/* --- Bands --- */
/* .wp-block-group is in the selector on purpose: it outranks WordPress's
   own block-gap margin rule, so bands butt up against each other. */
.wp-block-group.obc-band {
  margin-block: 0;
  padding: 4.5rem 1.5rem;
}

.wp-block-group.obc-band--blue {
  background: var(--obc-light-blue);
  color: var(--wp--preset--color--obc-dark);
}

.wp-block-group.obc-band--tint {
  background: var(--obc-tint);
}

.wp-block-group.obc-band--dark {
  background: var(--wp--preset--color--obc-dark);
  color: #fff;
}

/* No top padding: for a band that continues the one above it */
.wp-block-group.obc-band--flush-top {
  padding-top: 0;
}

/* Continues the band above, separated by a hairline */
.wp-block-group.obc-band--divided {
  padding-top: 0;
}

.obc-band--divided > .alignwide {
  border-top: 1px solid var(--obc-rule);
  padding-top: 3.5rem;
}

/* Headings inside bands */
.obc-band :is(h1, h2, h3) {
  color: var(--wp--preset--color--obc-dark);
}

.obc-band h1 {
  font-size: clamp(2rem, 5vw, 2.875rem);
  line-height: 1.15;
}

.obc-band h2 {
  font-size: 1.875rem;
  line-height: 1.25;
}

.obc-band--dark :is(h1, h2, h3) {
  color: #fff;
}

/* --- Narrow: a Wide-width group whose contents stay left-aligned at
   reading width, instead of centered in the content column --- */
.obc-narrow > * {
  max-width: var(--wp--style--global--content-size, 760px);
}

/* Space between the cards row and the group that follows it */
.obc-band > .wp-block-columns + .obc-narrow {
  margin-top: 3.5rem;
}

.obc-band--dark > .wp-block-columns + .obc-narrow {
  margin-top: 2rem;
}

/* --- Title band pieces --- */
.obc-year {
  width: fit-content;
  background: #fff;
  color: var(--wp--preset--color--obc-dark);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.obc-lead {
  font-size: 1.1875rem;
}

/* --- Cards: class goes on a Column block --- */
.wp-block-column.obc-card {
  background: #fff;
  color: var(--wp--preset--color--obc-text);
  border-radius: 12px;
  padding: 2.25rem;
}

.obc-band--dark .obc-card :is(h1, h2, h3) {
  color: var(--wp--preset--color--obc-dark);
}

.obc-card h2 {
  font-size: 1.625rem;
}

/* Small uppercase label above a statement */
.obc-label {
  margin: 0;
  color: var(--wp--preset--color--obc-dark);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Large-type key sentence */
.obc-statement {
  color: var(--wp--preset--color--obc-dark);
  font-size: 1.5rem;
  line-height: 1.4;
}

/* --- Numbered list: class goes on an ordered List block --- */
/* Dark numeral on a teal circle. Teal numerals on white would fail
   contrast (about 2.4:1); dark on teal is about 4.4:1, fine at this size. */
.wp-block-list.obc-numbered {
  list-style: none;
  counter-reset: obc-num;
  margin-left: 0;
  padding-left: 0;
}

.wp-block-list.obc-numbered > li {
  counter-increment: obc-num;
  position: relative;
  min-height: 2.75rem;
  padding: 0.5rem 0 0 4rem;
  margin-bottom: 1.25rem;
}

.wp-block-list.obc-numbered > li::before {
  content: counter(obc-num);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--wp--preset--color--obc-teal);
  color: var(--wp--preset--color--obc-dark);
  font-size: 1.25rem;
  font-weight: 700;
}

/* --- Photo: class goes on an Image block --- */
.obc-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* --- Pull quote: class goes on a Quote block --- */
.wp-block-quote.obc-pullquote {
  border: 0;
  background: none;
  padding: 0;
}

.wp-block-quote.obc-pullquote::before {
  content: "";
  display: block;
  width: 72px;
  height: 6px;
  margin-bottom: 1.5rem;
  border-radius: 3px;
  background: var(--wp--preset--color--obc-teal);
}

.wp-block-quote.obc-pullquote p {
  color: var(--wp--preset--color--obc-dark);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-style: normal;
  line-height: 1.45;
}

.wp-block-quote.obc-pullquote cite {
  display: block;
  margin-top: 1.5rem;
  color: var(--wp--preset--color--obc-dark);
  font-style: normal;
  font-weight: 700;
}

/* --- Call-to-action panel: class goes on a Wide-width Group --- */
.wp-block-group.obc-cta {
  background: var(--obc-light-blue);
  color: var(--wp--preset--color--obc-dark);
  border-radius: 16px;
  padding: 3.5rem 2rem;
  text-align: center;
}

.obc-cta .wp-block-buttons {
  justify-content: center;
}

/* --- Button: class goes on a Button block --- */
.wp-block-button.obc-button .wp-block-button__link {
  background: var(--wp--preset--color--obc-dark);
  color: #fff;
  border-radius: 4px;
  padding: 0.875rem 1.625rem;
  font-weight: 600;
  text-decoration: none;
}

.wp-block-button.obc-button .wp-block-button__link:hover,
.wp-block-button.obc-button .wp-block-button__link:focus-visible {
  background: #000;
  color: #fff;
}

@media (max-width: 600px) {
  .wp-block-group.obc-band {
    padding: 3rem 1rem;
  }

  .wp-block-group.obc-band--flush-top,
  .wp-block-group.obc-band--divided {
    padding-top: 0;
  }

  .wp-block-column.obc-card {
    padding: 1.5rem;
  }

  .wp-block-group.obc-cta {
    padding: 2.5rem 1.25rem;
  }

  .obc-statement {
    font-size: 1.25rem;
  }
}


/* --- 1.3.4 additions --- */

/* Anchor targets inside bands: stop below the sticky menu bar (about
   4rem tall) and, when logged in, the WordPress admin bar */
.obc-band [id] {
  scroll-margin-top: calc(5rem + var(--wp-admin--admin-bar--height, 0px));
}

.obc-band h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Links on the dark band (not inside its white cards) */
.obc-band--dark a {
  color: #fff;
}

.obc-band--dark .obc-card a {
  color: var(--wp--preset--color--obc-text);
}

/* Plain lists inside bands: indent and space between items */
.obc-band .wp-block-list:not(.obc-numbered, .obc-jumpnav, .obc-tiles) {
  padding-left: 1.25rem;
}

.obc-band .wp-block-list:not(.obc-numbered, .obc-jumpnav, .obc-tiles) > li + li {
  margin-top: 0.5rem;
}

/* --- In-page menu: class goes on a List block of anchor links --- */
/* Plain text links with a bullet between them. The bullet trails each
   item (not the last), so a wrapped row never starts with one. */
.wp-block-list.obc-jumpnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.obc-jumpnav > li {
  display: flex;
  align-items: center;
  margin: 0;
}

.obc-jumpnav > li:not(:last-child)::after {
  content: "\2022"; /* bullet */
  margin: 0 0.75rem;
  color: var(--wp--preset--color--obc-dark);
}

/* min-height keeps each link a comfortable tap target */
.obc-jumpnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--wp--preset--color--obc-dark);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.obc-jumpnav a:hover,
.obc-jumpnav a:focus-visible {
  text-decoration: underline;
}

/* --- Sticky menu bar: class goes on a Full-width Group that holds one
   .obc-jumpnav list. It must be the FIRST block on the page, at the top
   level (not inside a band), or it has nothing to stick within. --- */
/* Light blue, no border: sitting directly above a blue title band it reads
   as part of that band until the page scrolls.
   z-index 5: above page content, below the header (10) so the main nav
   dropdowns open over it. */
.wp-block-group.obc-stickynav {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 5;
  margin-block: 0;
  padding: 0.25rem 1.5rem;
  background: var(--obc-light-blue);
}

/* Line the menu up with the Wide-width content below it */
.obc-stickynav > .wp-block-list.obc-jumpnav {
  max-width: var(--wp--style--global--wide-size, 1100px);
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  /* The admin bar is not fixed at this width, so stick to the very top */
  .wp-block-group.obc-stickynav {
    top: 0;
    padding-inline: 1rem;
  }

  /* One row that scrolls sideways, so the bar never eats the screen */
  .obc-stickynav > .wp-block-list.obc-jumpnav {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .obc-stickynav .obc-jumpnav > li {
    flex: 0 0 auto;
  }

  .obc-stickynav .obc-jumpnav a {
    white-space: nowrap;
  }
}

/* --- Big number: class goes on a Paragraph, with an .obc-label
   paragraph directly after it --- */
.obc-figure {
  margin: 0;
  color: var(--wp--preset--color--obc-dark);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
}

.obc-figure + .obc-label {
  margin-block-start: 0.375rem;
}

/* --- Two-column list: class goes on a List block --- */
.wp-block-list.obc-two-col {
  columns: 2;
  column-gap: 3rem;
}

.obc-two-col > li {
  break-inside: avoid;
}

/* --- Tiles: class goes on a List block; each item becomes a tile --- */
.wp-block-list.obc-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin-left: 0;
  padding: 0;
}

.obc-tiles > li {
  border: 1px solid currentColor;
  border-radius: 8px;
  padding: 0.625rem 1rem;
  font-weight: 600;
}

/* --- Rows: class goes on a Group; each h3 inside starts a new row --- */
.obc-rows > h3 {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--obc-rule);
}

@media (max-width: 600px) {
  .wp-block-list.obc-two-col {
    columns: 1;
  }
}


/* ===== Footer ===== */
/* Markup lives in the Footer template part: Group.obc-footer wrapping
   .obc-footer__top (teal link band) and .obc-footer__bottom (dark bar
   with copyright + Suivez-nous). This is CSS only. */

.obc-footer {
  background: var(--wp--preset--color--obc-dark);
  color: #fff;
  padding-bottom: 1.25rem;
}

/* Default footer links (dark bar): white, light blue on hover/focus.
   #93ced6 is the light blue panel color -- no preset variable exists for it */
.obc-footer a {
  color: #fff;
  text-decoration: none;
}

.obc-footer a:hover,
.obc-footer a:focus-visible {
  color: #93ced6;
  text-decoration: underline;
}

/* --- Teal link band --- */
/* The band itself is only as wide as the content column. The box-shadow +
   clip-path pair stretches its color to the viewport edges without
   changing the template part markup. */
.obc-footer .obc-footer__top {
  background: var(--wp--preset--color--obc-teal);
  box-shadow: 0 0 0 100vmax var(--wp--preset--color--obc-teal);
  clip-path: inset(0 -100vmax);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* Stacked link list: Qui sommes-nous? / Nous contacter / ENGLISH */
.obc-footer__top > .wp-block-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Dark text on teal, echoing the header's top bar */
.obc-footer .obc-footer__top a {
  color: var(--wp--preset--color--obc-dark);
  font-weight: 400;
}

/* Alternate-language link: uppercase, bold, larger. Matched two ways:
   by position (it is the last item in the list) and by its lang
   attribute, in case the editor strips one or the list gets reordered.
   If a link is ever added AFTER the language link, drop the
   li:last-child selector so the new link isn't styled this way. */
.obc-footer .obc-footer__top li:last-child a,
.obc-footer .obc-footer__top a[lang] {
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.obc-footer .obc-footer__top a:hover,
.obc-footer .obc-footer__top a:focus-visible {
  color: var(--wp--preset--color--obc-dark);
  text-decoration: underline;
}

/* --- Dark bottom bar: copyright left, Suivez-nous right --- */
/* margin-top: 0 cancels the block gap WordPress adds between the two
   groups, so no dark strip shows between the band and the bar's padding. */
.obc-footer .obc-footer__bottom {
  align-items: center;
  gap: 0.75rem 2rem;
  margin-top: 0;
  padding-top: 1.25rem;
  font-size: var(--wp--preset--font-size--small);
}

.obc-footer__bottom p {
  margin: 0;
}

.obc-footer__social {
  gap: 0.75rem;
}

.obc-footer__social p {
  font-weight: 600;
}

/* The back-to-top button occupies the 68px strip at the viewport's right
   edge (24px offset + 44px wide). Below ~1440px the footer content reaches
   into that strip, so pad the bottom bar to keep Suivez-nous clear of it.
   Wider than that, the content column stops short of the button anyway. */
@media (max-width: 1440px) {
  .obc-footer .obc-footer__bottom {
    padding-right: 4rem;
  }
}

@media (max-width: 600px) {
  .obc-footer .obc-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}