@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

/* Liens dans les titres des sections 1 et 6 : blancs, sans soulignement, soulignés au hover */
.section-1 h1 a, .section-1 h2 a, .section-1 h3 a, .section-1 h4 a, .section-1 h5 a, .section-1 h6 a,
.section-6 h1 a, .section-6 h2 a, .section-6 h3 a, .section-6 h4 a, .section-6 h5 a, .section-6 h6 a {
  color: #fff !important;
  text-decoration: none;
}
.section-1 h1 a:hover, .section-1 h2 a:hover, .section-1 h3 a:hover, .section-1 h4 a:hover, .section-1 h5 a:hover, .section-1 h6 a:hover,
.section-1 h1 a:focus, .section-1 h2 a:focus, .section-1 h3 a:focus, .section-1 h4 a:focus, .section-1 h5 a:focus, .section-1 h6 a:focus,
.section-6 h1 a:hover, .section-6 h2 a:hover, .section-6 h3 a:hover, .section-6 h4 a:hover, .section-6 h5 a:hover, .section-6 h6 a:hover,
.section-6 h1 a:focus, .section-6 h2 a:focus, .section-6 h3 a:focus, .section-6 h4 a:focus, .section-6 h5 a:focus, .section-6 h6 a:focus {
  text-decoration: underline;
}
/* Liens dans les titres : noirs, sans soulignement, soulignés au hover */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: #000 !important;
  text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus {
  text-decoration: underline;
}
/* Section 2: liens de titre de contenu (field--name-node-title) en #222222, hover idem */
.section-2 .field--name-node-title a {
  color: #000 !important;
  text-decoration: none;
}
.section-2 .field--name-node-title a:hover,
.section-2 .field--name-node-title a:focus {
  color: #000 !important;
  text-decoration: underline;
}
/* Theme CSS variables: define brand colors and common tokens used throughout the stylesheet.
   Restoring these fixes missing var(--rit-*) usages (e.g. --rit-yellow). */
:root {
  --rit-yellow: #feff01;         /* brand yellow (user requested bright yellow) */
  --rit-red: #e60000;            /* primary action red used for .more-link buttons */
  --rit-dark: #222222;           /* dark text color used on light/yellow backgrounds */
  --rit-green-accent: #198754;   /* green accent for primary-like actions */
  --player-height: 80px;         /* default player height used in offcanvas padding calc */
}

/* Offcanvas header (top bar) uses the requested brand yellow */
.offcanvas.offcanvas-start.d-lg-none .offcanvas-header {
  background: #feff01; /* user requested */
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.offcanvas.offcanvas-start.d-lg-none .offcanvas-body {
  /* Use the bright yellow requested for the offcanvas body */
  background-color: #feff01 !important;
  color: var(--rit-dark) !important;
  padding-top: 0.75rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: calc(var(--player-height, 80px) + 1rem);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
/* Ensure the mobile offcanvas never appears on large/desktop viewports.
   Bootstrap's `d-lg-none` should hide it, but force it via CSS to avoid
   z-index/positioning showing it in front of the horizontal menu. */
@media (min-width: 992px) {
  .offcanvas.d-lg-none {
    /* Force it out of flow and make it inert on desktop to avoid
       any z-index or JS toggling showing it above the horizontal menu. */
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    position: static !important;
    opacity: 0 !important;
    z-index: 0 !important;
  }
  /* Also hide any offcanvas backdrop on desktop if present. */
  .offcanvas-backdrop {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  /* Extra defensive rule: ensure offcanvas panels used for mobile can't overlap
     the header/nav by lowering their z-index and making them non-interactive. */
  .offcanvas.offcanvas-start.d-lg-none,
  .offcanvas.offcanvas-end.d-lg-none {
    z-index: 0 !important;
    pointer-events: none !important;
  }
  /* Hide the mobile-only navbar toggler on desktop explicitly. This
     ensures the hamburger button does not appear beside the horizontal menu.
  */
  .navbar-toggler.d-lg-none {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* Also hide any navbar toggler shown on large screens (defensive): */
  .navbar-toggler.d-none.d-lg-block,
  .navbar-toggler.d-lg-block,
  .navbar-toggler {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* Radio Intertropicale theme overrides based on Bootstrap5 */

/* Example: change body background and base font */
.more-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: var(--rit-red);
  color: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  transition: background-color 150ms ease, transform 80ms ease, box-shadow 150ms ease;
}
.more-link a:hover,
.more-link a:focus {
  background: #b30000; /* slightly darker red on hover/focus */
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  outline: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.more-link a:focus-visible {
  /* visible focus ring for keyboard users */
  box-shadow: 0 0 0 4px rgba(216,0,0,0.12), 0 6px 18px rgba(0,0,0,0.06);
}
.more-link a:active {
  transform: translateY(0);
}

/* Example: change body background and base font */
body {
  background-color: #ffffff;
  color: #222222;
  font-family: 'Roboto Condensed', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial;
}

/* Set global font stack: Inter for body, Montserrat for headings, with sensible fallbacks. */
body {
  font-family: 'Roboto Condensed', 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', 'Roboto Condensed', 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Full-bleed header using the logo yellow. The header in templates
   uses .site-header and contains a .container; we paint the full
   width background on the header element and keep the inner
   container layout intact. */
.site-header {
  background: var(--rit-yellow);
  color: var(--rit-dark);
  width: 100%;
  padding-top: 0.5rem;   /* reduced from larger defaults */
  padding-bottom: 0.5rem;
}

/* Ensure header links and navbar contrast well on yellow */
.site-header a,
.site-header .navbar-nav .nav-link {
  color: var(--rit-dark) !important;
}

/* If the branding/logo is an image with transparency, ensure spacing */
.site-header .branding,
.site-header .navbar-brand {
  display: flex;
  align-items: center;
}

/* Make the logo image scale to fit the available branding column */
.site-header .navbar-brand img,
.site-header .branding img {
  /* Use explicit height to override Bootstrap's .navbar img height setting
     (Bootstrap sets height via variables in _navbar.scss). */
  height: 80px;
  max-height: 80px;
  width: auto;
  display: block;
}

/* Ensure logo scales down on small screens */
@media (max-width: 576px) {
  .site-header .navbar-brand img,
  .site-header .branding img {
    height: 56px;
    max-height: 56px;
  }
}

/* Small tweak: use green for buttons/primary actions where appropriate */
.btn-rit-primary,
.btn-rit {
  background-color: var(--rit-green-accent);
  color: #fff;
  border-color: rgba(0,0,0,0.08);
}

/* Footer contrast adjustment (optional) */
.site-footer {
  background: var(--rit-dark);
  color: #fff;
}

/* Footer social/app links styling: white icons and labels, stacked on small screens */
/* Footer block titles: add a little more vertical breathing room */
.footer-social-title,
.footer-apps-title {
  color: #fff;
  font-weight: 700;
  display: block; /* ensure titles are visible when present */
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

/* Shared token for footer icon size to guarantee perfect circles across
   breakpoints. Change only the variable values below to resize both the
   clickable area and the visible circle. */
:root {
  --footer-icon-size: 48px; /* desktop/default size */
  --footer-icon-mobile-size: 48px; /* mobile size (keep same for consistent circles) */
}

.footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--footer-icon-size);
  height: var(--footer-icon-size);
  min-width: var(--footer-icon-size);
  min-height: var(--footer-icon-size);
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  filter: none;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  background-color: transparent;
  box-sizing: border-box;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
/* Default placeholder icons using simple shapes (themes can replace with real sprites/svg) */
.footer-icon-facebook { background-image: url('https://cdn.simpleicons.org/facebook/FFFFFF'); }
.footer-icon-instagram { background-image: url('https://cdn.simpleicons.org/instagram/FFFFFF'); }
.footer-icon-x { background-image: url('https://cdn.simpleicons.org/x/FFFFFF'); }
.footer-icon-whatsapp { background-image: url('https://cdn.simpleicons.org/whatsapp/FFFFFF'); }
.footer-icon-youtube { background-image: url('https://cdn.simpleicons.org/youtube/FFFFFF'); }
.footer-icon-tiktok { background-image: url('https://cdn.simpleicons.org/tiktok/FFFFFF'); }
.footer-icon-rss { background-image: url('https://cdn.simpleicons.org/rss/FFFFFF'); }
.footer-icon-linkedin { background-image: url('https://cdn.simpleicons.org/linkedin/FFFFFF'); }
.footer-icon-telegram { background-image: url('https://cdn.simpleicons.org/telegram/FFFFFF'); }
.footer-icon-android { background-image: url('../images/icons/playstore.svg'); }
.footer-icon-ios { background-image: url('../images/icons/appstore.svg'); }
.icon_facebook { background-image: url('https://cdn.simpleicons.org/facebook/FFFFFF'); }
.icon_twitter { background-image: url('https://cdn.simpleicons.org/x/FFFFFF'); }
.icon_rss { background-image: url('https://cdn.simpleicons.org/rss/FFFFFF'); }
.icon_envelop { background-image: url('../images/icons/envelop.svg'); }
/* Ensure both naming conventions work: Twig outputs classes like `icon_<key>`
  while some CSS rules used `footer-icon-<key>`. Map the remaining icon_*
  names to the same SVG files so icons display consistently. */
.icon_instagram { background-image: url('../images/icons/instagram.svg'); }
.icon_whatsapp { background-image: url('../images/icons/whatsapp.svg'); }
.icon_youtube { background-image: url('../images/icons/youtube.svg'); }
.icon_tiktok { background-image: url('../images/icons/tiktok.svg'); }
.icon_telegram { background-image: url('../images/icons/telegram.svg'); }
.icon_linkedin { background-image: url('../images/icons/linkedin.svg'); }

.footer-label { color: #fff; }

/* Social links inline spacing: reduce gap by half and allow wrapping */
.footer-social ul { margin: 0; padding: 0; list-style: none; gap: 0.25rem; display: flex; flex-wrap: wrap; align-items: center; }
.footer-social-link {
  display: inline-flex;
  width: var(--footer-icon-size);
  height: var(--footer-icon-size);
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
}
.footer-social-link {
  margin: 5px; /* ensure 5px space around social icons */
}
.footer-social-link:hover,
.footer-social-link:focus {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 18px rgba(0,0,0,0.24);
}

/* Icon label overlay: hidden by default, shown on hover */
.footer-icon-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}
.footer-social-link { position: relative; display: inline-flex; }
.footer-social-link:hover .footer-icon-label,
.footer-social-link:focus .footer-icon-label {
  opacity: 1;
  transform: translateX(-50%) translateY(-48px);
}

/* App badges: use the provided images (larger rectangular badges)
   The .footer-app-badge element uses the same playstore/appstore SVGs as background.
   Size them slightly larger (approx 140x50) per request. */
.footer-app-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px; /* increased fixed height */
  padding: 0; /* img will provide padding if needed */
  border: none;
  background: transparent;
}
.footer-app-badge {
  margin: 5px; /* ensure 5px space around app badges */
}
.footer-app-img {
  height: 50px;
  width: auto; /* preserve aspect ratio */
  display: block;
}

/* Apps should use the same small gap as social icons */
.footer-apps ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 0.25rem; align-items: center; }

/* Ensure icons inside SVGs are filled white (fix invisible icons) */
.footer-icon path, .footer-icon circle, .footer-icon rect, .footer-icon polygon {
  fill: #fff !important;
}

@media (max-width: 767px) {
  /* Slightly smaller on mobile for better fit */
  .footer-app-badge { height: 46px; padding: 4px 10px; }
  /* make icons perfectly circular on mobile by using the shared mobile size */
  .footer-icon,
  .footer-social-link {
    width: var(--footer-icon-mobile-size);
    height: var(--footer-icon-mobile-size);
    min-width: var(--footer-icon-mobile-size);
    min-height: var(--footer-icon-mobile-size);
  }
}

/* Adjust the footer column layout: ensure left column (social/apps) is visually left and wider on md+ */
@media (min-width: 768px) {
  .region-footer .col-md-5 { max-width: 40%; }
  .region-footer .col-md-7 { max-width: 60%; }
}

@media (max-width: 767px) {
  .footer-social ul, .footer-apps ul {
    display: block;
  }
}

/* Footer blocks grid: when template falls back to a single rendered
   chunk (non-iterable), use CSS Grid to force a two-column layout on
   md+ while keeping a single column on small screens. This complements
   the Twig-based columns and ensures predictable 2-column behaviour. */
.footer-blocks-grid {
  display: block;
}
@media (min-width: 768px) {
  .footer-blocks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem; /* match Bootstrap g-3 spacing (approx) */
    align-items: start;
  }
  /* If blocks inside use .block wrapper, ensure they stretch and have spacing */
  .footer-blocks-grid .block {
    width: 100%;
  }
}

/* Override Bootstrap's .bg-light when applied to the header so our
   theme yellow is used even if templates include bg-light. Use
   higher specificity and !important to ensure it wins. */
.site-header.bg-light,
header.site-header.bg-light,
.site-header.bg-light .container {
  background: var(--rit-yellow);
  color: var(--rit-dark) !important;
}
.site-header.bg-light a,
.site-header.bg-light .navbar-nav .nav-link,
.site-header.bg-light .navbar-brand,
.site-header.bg-light .navbar-toggler {
  color: var(--rit-dark);
}

/* Mobile offcanvas bottom: make icons pop on yellow background */
.offcanvas .mobile-menu-bottom {
  border-color: rgba(0,0,0,0.15) !important;
}
.offcanvas .mobile-menu-footer {
  border-color: rgba(0,0,0,0.15) !important;
}
.offcanvas .mobile-menu-footer .navbar-nav .nav-link,
.offcanvas .mobile-menu-footer a {
  display: block;
  padding: .5rem 0;
  color: inherit;
  text-decoration: none;
}
.offcanvas .mobile-menu-footer .navbar-nav .nav-link:hover,
.offcanvas .mobile-menu-footer a:hover { text-decoration: underline; }
.offcanvas .mobile-menu-bottom .footer-icon,
.offcanvas .mobile-menu-bottom .footer-social-link {
  border-color: rgba(0,0,0,0.75) !important; /* darker ring for contrast on yellow */
}
/* Use dark variants of icons on the yellow offcanvas for strong contrast */
.offcanvas .mobile-menu-bottom .footer-icon.mobile-dark.icon_facebook { background-image: url('https://cdn.simpleicons.org/facebook/111111'); }
.offcanvas .mobile-menu-bottom .footer-icon.mobile-dark.icon_twitter { background-image: url('https://cdn.simpleicons.org/x/111111'); }
.offcanvas .mobile-menu-bottom .footer-icon.mobile-dark.icon_instagram { background-image: url('https://cdn.simpleicons.org/instagram/111111'); }
.offcanvas .mobile-menu-bottom .footer-icon.mobile-dark.icon_whatsapp { background-image: url('https://cdn.simpleicons.org/whatsapp/111111'); }
.offcanvas .mobile-menu-bottom .footer-icon.mobile-dark.icon_youtube { background-image: url('https://cdn.simpleicons.org/youtube/111111'); }
.offcanvas .mobile-menu-bottom .footer-icon.mobile-dark.icon_tiktok { background-image: url('https://cdn.simpleicons.org/tiktok/111111'); }
.offcanvas .mobile-menu-bottom .footer-icon.mobile-dark.icon_rss { background-image: url('https://cdn.simpleicons.org/rss/111111'); }
.offcanvas .mobile-menu-bottom .footer-icon.mobile-dark.icon_linkedin { background-image: url('https://cdn.simpleicons.org/linkedin/111111'); }
.offcanvas .mobile-menu-bottom .footer-icon.mobile-dark.icon_telegram { background-image: url('https://cdn.simpleicons.org/telegram/111111'); }

/* Titles in mobile sections */
.offcanvas .mobile-menu-bottom .mobile-section-title {
  color: #111;
}
/* Keep touch targets comfortable and spaced */
.offcanvas .mobile-menu-bottom .footer-social-link { margin: 6px; }
.offcanvas .mobile-menu-bottom .footer-app-badge { margin: 6px; }

/* Ensure transparency / logo spacing remains good */
.site-header .container { background: transparent; }

/* Section customization variables and defaults
   Each section (section-1 .. section-6) will inherit these defaults
   but you can override per-section using the --section-*-* variables.
*/
:root {
  /* section defaults */
  --section-bg: transparent;
  --section-text: #222222;
  --section-heading: var(--rit-dark);
  --section-padding-y: 1rem;
  --section-border: none; /* e.g. 1px solid rgba(0,0,0,0.08) */
  /* link defaults for sections */
  --section-link: #0d6efd; /* bootstrap primary-like */
  --section-link-hover: #0a58ca;
  /* default padding applied to blocks inside sections (top & bottom) */
  --section-block-padding-y: 2rem;
}

/* Base section styles applied to the custom sections we added */
.section-1,
.section-2,
.section-3,
.section-4,
.section-5,
.section-6,
.page-title-region {
  background: var(--section-bg);
  color: var(--section-text);
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  border-top: var(--section-border);
}

/* Apply consistent vertical padding to blocks (or block wrappers) inside each section.
   This keeps sections themselves gapless when empty, but gives contained content
   comfortable vertical spacing. The value can be overridden per-section by setting
   --section-block-padding-y on the section element or a containing block. */
.section-1 .container > *,
.section-2 .container > *,
.section-3 .container > *,
.section-4 .container > *,
.section-5 .container > *,
.section-6 .container > *,
.page-title-region .container > *,
.featured .container > *,
.hero .container > *,
.highlights .container > *,
.section-1 .container .row > .col > *,
.section-2 .container .row > .col > *,
.section-3 .container .row > .col > *,
.section-4 .container .row > .col > *,
.section-5 .container .row > .col > *,
.section-6 .container .row > .col > *,
.page-title-region .container .row > .col > *,
.featured .container .row > .col > *,
.hero .container .row > .col > *,
.highlights .container .row > .col > * {
  padding-top: var(--section-block-padding-y);
  padding-bottom: var(--section-block-padding-y);
}

/* Link styles inside sections use per-section variables */
.section-1 a, .section-2 a, .section-3 a, .section-4 a, .section-5 a, .section-6 a, .page-title-region a {
  color: var(--section-link);
  text-decoration: none;
}
.section-1 a:hover, .section-2 a:hover, .section-3 a:hover, .section-4 a:hover, .section-5 a:hover, .section-6 a:hover, .page-title-region a:hover,
.section-1 a:focus, .section-2 a:focus, .section-3 a:focus, .section-4 a:focus, .section-5 a:focus, .section-6 a:focus, .page-title-region a:focus {
  color: var(--section-link-hover);
  text-decoration: underline;
}

/* Some sections might prefer no underline; utility class to remove it */
.section--no-underline a { text-decoration: none; }


/* Per-section variables: allow easy overrides by setting these on body
   or in a higher specificity stylesheet (for example in a block class).
   Example usage in admin: add a block class that sets --section-bg.
*/
.section-1 { --section-bg: #001103; --section-text: #ffffff; --section-heading: #ffffff; --section-link: #ffffff; --section-link-hover: #ffffff; }
.section-2 { --section-bg: #f8f9fa; --section-text: #222222; --section-heading: var(--rit-dark); --section-link: #0d6efd; --section-link-hover: #0d6efd; }
.section-3 { --section-bg: transparent; --section-text: #222222; --section-heading: var(--rit-dark); }
.section-4 { --section-bg: transparent; --section-text: #222222; --section-heading: var(--rit-dark); }
.section-5 { --section-bg: transparent; --section-text: #222222; --section-heading: var(--rit-dark); }
.section-6 { --section-bg: #12314f; --section-text: #ffffff; --section-heading:  #ffffff; --section-link: #ffffff; --section-link-hover: #ffffff; }

/* Heading within a section (if blocks output h2/h3) get the heading color */
.section-1 h1, .section-1 h2, .section-1 h3,
.section-2 h1, .section-2 h2, .section-2 h3,
.section-3 h1, .section-3 h2, .section-3 h3,
.section-4 h1, .section-4 h2, .section-4 h3,
.section-5 h1, .section-5 h2, .section-5 h3,
.section-6 h1, .section-6 h2, .section-6 h3,
.page-title-region h1, .page-title-region h2, .page-title-region h3 {
  color: var(--section-heading);
}

/* Make block titles uppercase and weight 600 to match design preference.
   Target common Drupal patterns: .block__title, .block-title, and headings
   that often appear inside .block elements. Use text-transform + font-weight.
*/
.block__title,
.block-title,
.block .title,
.block .block__title,
/* Also style headings that are direct children of a block element so typical
   block titles like `<div class="block"> <h2>Title</h2> ...` are covered,
   while inner headings nested deeper are not affected. */
.block > h1,
.block > h2,
.block > h3 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

/* Ensure Views blocks inside the main content region have top padding */
.region-content .block-views {
  padding-top: 30px;
}

/* Utility modifier classes for spacing and borders */
.section--narrow { --section-padding-y: 0.5rem; }
.section--wide { --section-padding-y: 2rem; }
.section--bordered { --section-border: 1px solid rgba(0,0,0,0.06); }

/* Allow admin to set per-block style classes and these will work
   because the variables are resolved from the element's scope. */
.block--brand-bg { --section-bg: var(--rit-yellow); --section-text: var(--rit-dark); }

  /*
    Remove vertical spacing from all horizontal theme sections so they have
    zero top/bottom padding by default. This includes our custom sections
    and common horizontal regions. Also include selectors for classes
    starting with `py-` (some blocks/themes use such prefixes, e.g. `py-2`).
  */
.section-1,
.section-2,
.section-3,
.section-4,
.section-5,
.section-6,
.page-title-region,
.featured,
.hero,
.highlights,
.py-0,
.py-1,
.py-2,
.py-3,
.py-4,
.py-5 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Hide empty sections so they don't leave gaps. Use container:empty when
   the section wraps a .container. Also include fallbacks using :empty and
   :has() where available. Rely on !important so layout gaps are removed.
*/
.section-1 .container:empty,
.section-2 .container:empty,
.section-3 .container:empty,
.section-4 .container:empty,
.section-5 .container:empty,
.section-6 .container:empty,
.page-title-region .container:empty,
.featured .container:empty,
.hero .container:empty,
.highlights .container:empty,
.py-0:empty,
.py-1:empty,
.py-2:empty,
.py-3:empty,
.py-4:empty,
.py-5:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
}

/* If :has() is supported, hide the section element when its container has no children
   (handles cases where whitespace prevents :empty from matching). */
@supports (selector(:has(*))) {
  .section-1:has(.container:empty),
  .section-2:has(.container:empty),
  .section-3:has(.container:empty),
  .section-4:has(.container:empty),
  .section-5:has(.container:empty),
  .section-6:has(.container:empty),
  .page-title-region:has(.container:empty),
  .featured:has(.container:empty),
  .hero:has(.container:empty),
  .highlights:has(.container:empty) {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
  }
}

/* ------------------------------------------------------------------
   Headings inside block content (not block titles)
   The theme inherits from bootstrap5 (see rit_bs5.info.yml 'base theme').
   These selectors target common block/content wrappers (views, node fields,
   view-content, item-list...) so we reduce the font-size only for headings
   that are part of a block's inner content, not the block title itself.
   Placed here in `style.css` which loads after Bootstrap, so these rules win.
   ------------------------------------------------------------------ */
.block .view-content h2,
.block .field__item h2,
.block .content h2,
.block .node h2,
.block .grid__content h2,
.block .item-list h2,
.views-element-container .view h2 {
  font-size: 1.5rem; /* user requested */
  line-height: 1.2; /* tighter for larger headings */
  font-weight: 700;
  margin-top: 0.25rem;
  margin-bottom: 0.6rem;
}

.block .view-content h3,
.block .field__item h3,
.block .content h3,
.block .node h3,
.block .grid__content h3,
.block .item-list h3,
.views-element-container .view h3 {
  font-size: 1.25rem; /* user requested */
  line-height: 1.3; /* comfortable for subheadings */
  font-weight: 600;
  margin-top: 0.2rem;
  margin-bottom: 0.45rem;
}

/* Ensure we don't accidentally shrink the actual block title selectors defined earlier */
/* block title selectors above are intentionally unchanged; no override here */

/* Style .more-link a as a button so links wrapped like:
   <div class="more-link"><a href="...">Label</a></div>
   are displayed as primary buttons with accessible focus/hover states. */
.more-link {
  /* allow authors to place the link where they want; keep minimal spacing */
  margin-top: 0.5rem;
}
.more-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: var(--rit-red);
  color: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  transition: background-color 150ms ease, transform 80ms ease, box-shadow 150ms ease;
}
.more-link a:hover,
.more-link a:focus {
  background: #b30000; /* slightly darker red on hover/focus */
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  outline: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.more-link a:focus-visible {
  /* visible focus ring for keyboard users */
  box-shadow: 0 0 0 4px rgba(216,0,0,0.12), 0 6px 18px rgba(0,0,0,0.06);
}
.more-link a:active {
  transform: translateY(0);
}

/* Outline variant: if markup uses .more-link a.btn-outline (optional) */
.more-link a.btn-outline {
  background: transparent;
  color: var(--rit-green-accent);
  border-color: var(--rit-green-accent);
}

/* Make the button full-width on very small viewports when desired */
@media (max-width: 420px) {
  .more-link a {
    display: block;
    width: 100%;
  }
}

/* ------------------------------------------------------------------
  TODO: Removed broad contextual pointer-events override that blocked
  admin interactivity. If needed, reintroduce a narrower, scoped fix
  that does not affect the admin toolbar or global page controls.

  Narrow contextual-links fix
  ----------------------------
  The previous global approach was too broad and could interfere with
  the admin toolbar. Apply a narrow rule limited to contextual wrappers
  that appear inside Views output (common selectors like
  `.views-element-container`, `.view`, `.views-row`). This makes those
  wrappers non-interactive so they don't capture clicks on the underlying
  content, but re-enables interaction only for the trigger and the
  contextual-links themselves. Avoid using `!important` so this has less
  risk of clashing with other global UI rules.

  Test: verify the contextual trigger/button remains operable and that
  links/images in the view are clickable. If your theme uses other
  structures for contextual wrappers, we can extend selectors conservatively.
*/
.views-element-container .contextual,
.view .contextual,
.views-row .contextual,
.views-element-container .contextual-links-wrapper {
  pointer-events: none; /* don't let wrapper block underlying content */
}

/* Re-enable only for the actual trigger and the contextual-links so the
  menu remains usable. Keep z-index local and moderate. */
.views-element-container .contextual .trigger,
.views-element-container .contextual .contextual-links-trigger,
.views-element-container .contextual .contextual-links,
.views-element-container .contextual .contextual-links a {
  pointer-events: auto;
  z-index: 1400;
}

/* ------------------------------------------------------------------
   Rounded images for specific Views (field_image)
   Apply a 10px border-radius to images in the Views blocks listed by
   the admin. We include common Drupal class variants to be robust:
   - .view-<machine-name>
   - .view--<machine-name>
   - .field--name-field-image
   - .field--name-field_image

   If vous ajoutez d'autres vues, ajoutez simplement le nouveau
   `.view-<machine-name>` ou `.view--<machine-name>` à la liste ci-dessous.
   ------------------------------------------------------------------ */
/* Rounded images for selected Views (single rule).
  Add new view classes to the selector list (copy one of the three
  lines per view) to include more Views. This rule targets common
  field-image class variants used by Drupal's Views output. */
.view-programmes .field--name-field-image img,
.view-programmes .field--name-field_image img,
.view-programmes .views-field-field-image img,
.view-programmes-suivants .field--name-field-image img,
.view-programmes-suivants .field--name-field_image img,
.view-programmes-suivants .views-field-field-image img {
  border-radius: 10px;
  display: block;
  overflow: hidden;
}

/* Player error banner removed (notifications disabled) */

/* ------------------------------------------------------------------
   Views table column sizing utilities
   ---------------------------------------------------------------
   Usage:
   - On the view wrapper (for example `.view-<machine-name>`), define
     CSS variables for the columns you want to size, e.g.:

     .view-foo {
       --vt-col1: 120px; (or 30%)
       --vt-col2: 30%;   (use % or px for table widths)
     }

   - The rule below applies table-layout:fixed to Views tables and maps
     variables --vt-col1 .. --vt-col6 to the corresponding
     `th:nth-child()` / `td:nth-child()` widths. You can set any number
     of columns up to 6. If a variable is not set, the column keeps auto.

   Notes:
   - Use pixel values or percentages for predictable results.
   - After changing variables, clear caches if CSS is aggregated.
   ------------------------------------------------------------------ */
.view table.views-table,
.views-element-container table.views-table,
.view .views-table,
.view .table,
.views-element-container .table {
  table-layout: fixed; /* ensure width from th/td is respected */
  width: 100%;
  border-collapse: collapse;
}

/* Provide up to 6 configurable columns. Add more nth-child rules if needed. */
.view table.views-table th:nth-child(1),
.view table.table th:nth-child(1),
.views-element-container table.views-table th:nth-child(1),
.views-element-container table.table th:nth-child(1),
.view table.views-table td:nth-child(1),
.view table.table td:nth-child(1),
.views-element-container table.views-table td:nth-child(1),
.views-element-container table.table td:nth-child(1) { width: var(--vt-col1, auto); }
.view table.views-table th:nth-child(2),
.view table.table th:nth-child(2),
.views-element-container table.views-table th:nth-child(2),
.views-element-container table.table th:nth-child(2),
.view table.views-table td:nth-child(2),
.view table.table td:nth-child(2),
.views-element-container table.views-table td:nth-child(2),
.views-element-container table.table td:nth-child(2) { width: var(--vt-col2, auto); }
.view table.views-table th:nth-child(3),
.view table.table th:nth-child(3),
.views-element-container table.views-table th:nth-child(3),
.views-element-container table.table th:nth-child(3),
.view table.views-table td:nth-child(3),
.view table.table td:nth-child(3),
.views-element-container table.views-table td:nth-child(3),
.views-element-container table.table td:nth-child(3) { width: var(--vt-col3, auto); }
.view table.views-table th:nth-child(4),
.view table.table th:nth-child(4),
.views-element-container table.views-table th:nth-child(4),
.views-element-container table.table th:nth-child(4),
.view table.views-table td:nth-child(4),
.view table.table td:nth-child(4),
.views-element-container table.views-table td:nth-child(4),
.views-element-container table.table td:nth-child(4) { width: var(--vt-col4, auto); }
.view table.views-table th:nth-child(5),
.view table.table th:nth-child(5),
.views-element-container table.views-table th:nth-child(5),
.views-element-container table.table th:nth-child(5),
.view table.views-table td:nth-child(5),
.view table.table td:nth-child(5),
.views-element-container table.views-table td:nth-child(5),
.views-element-container table.table td:nth-child(5) { width: var(--vt-col5, auto); }
.view table.views-table th:nth-child(6),
.view table.table th:nth-child(6),
.views-element-container table.views-table th:nth-child(6),
.views-element-container table.table th:nth-child(6),
.view table.views-table td:nth-child(6),
.view table.table td:nth-child(6),
.views-element-container table.views-table td:nth-child(6),
.views-element-container table.table td:nth-child(6) { width: var(--vt-col6, auto); }

/* Optional: ensure overflow in cells is handled nicely when widths are constrained */
.view table.views-table td,
.view table.views-table th {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------
   Example defaults for the 'programmes' view (adapt as needed)
   - first column (time): narrow fixed width
   - second column (image): fixed width that matches thumbnail size
   - third column (title): flexible
*/
.view-programmes {
  --vt-col1: 80px;
  --vt-col2: 110px;
  --vt-col3: auto;
}

/* Ensure the image fits the column and is nicely centered */
.view-programmes td.views-field-field-image {
  text-align: center;
  vertical-align: middle;
}
.view-programmes td.views-field-field-image img {
  width: var(--vt-col2, 110px);
  height: auto;
  max-width: 100%;
  display: inline-block;
  border-radius: 10px; /* keep rounded thumbnails */
}




/* ---------------------------------------------------------------
   Logo sizing: force 100px height on all viewports (desktop/tablet/phone)
   Keep width auto to preserve aspect ratio.
--------------------------------------------------------------- */
.site-header .navbar-brand img,
.site-header .branding img {
  height: 100px !important;
  max-height: 100px !important;
  width: auto !important;
  display: block;
}

/* If there are any small-screen overrides elsewhere, ensure they don't
   reduce the logo below 100px by adding a final rule with high specificity. */
header.site-header .navbar-brand img,
header.site-header .branding img {
  height: 100px !important;
  max-height: 100px !important;
}

/* Main navigation: make links bold */
.navbar-nav .nav-link,
.navbar .nav-link {
  font-weight: 600;
}

/* Modern breadcrumb styling with home pictogram */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.35rem; /* slightly smaller padding without background */
  border-radius: 0.25rem;
  color: var(--rit-muted, #6c757d); /* lighter, muted text color */
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  background: transparent; /* removed background */
  border: none; /* removed contour */
  backdrop-filter: none;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: rgba(0,0,0,0.35);
  padding: 0 0.45rem;
}

/* Home pictogram via pseudo-element. Replace with SVG/BI if you prefer */
.breadcrumb .breadcrumb-item:first-child a::before {
  /* replace emoji with an inline SVG background (simple house without chimney)
     using currentColor so it matches the link color */
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.45rem;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Use mask so the icon can be colored via background-color (better cross-browser control)
     The SVG path is used as a mask; background-color defines the icon color. */
  background-color: var(--rit-muted, #6c757d);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3z'/></svg>") no-repeat center / contain;
}

.breadcrumb a {
  color: var(--rit-muted, #6c757d);
  text-decoration: none;
  font-weight: 600;
}
.breadcrumb a:hover,
.breadcrumb a:focus {
  text-decoration: underline;
  color: var(--rit-red, #c11);
}

/* Mobile menu home icon: reuse breadcrumb mask icon and align spacing
   to match other offcanvas menu items */
.nav-home-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: var(--rit-muted, #6c757d);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3z'/></svg>") no-repeat center / contain;
}

.nav-home-item .nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* match breadcrumb spacing */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; /* vertical spacing similar to other items */
}

/* Header live CTA (desktop) */
.header-live .btn-live,
.header-live--mobile-inline .btn-live,
.rit-header-live .btn-live {
  background: var(--rit-red, #c11);
  color: #fff;
  border: none;
  padding: 0.35rem 0.35rem;
  border-radius: 999px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  height: 44px; /* fixed control height */
  min-height: 44px;
  width: 120px;
  min-width: 120px;
  max-width: 120px;
}
.header-live .header-live-icon,
.header-live--mobile-inline .header-live-icon,
.rit-header-live .header-live-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0.35rem; /* internal padding for the svg */
  box-sizing: border-box !important;
  min-width: 34px;
  max-width: 34px;
  min-height: 34px;
  max-height: 34px;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 0 !important;
}
.header-live .header-live-icon svg,
.header-live--mobile-inline .header-live-icon svg,
.rit-header-live .header-live-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.header-live .header-live-text,
.header-live--mobile-inline .header-live-text,
.rit-header-live .header-live-text {
  line-height: 1;
  text-transform: uppercase;
}
.header-live .btn-live:focus, .header-live .btn-live:hover,
.header-live--mobile-inline .btn-live:focus, .header-live--mobile-inline .btn-live:hover,
.rit-header-live .btn-live:focus, .rit-header-live .btn-live:hover { opacity: 0.95; }

/* (styles consolidated above for .header-live, .header-live--mobile-inline, and .rit-header-live) */

/* Ensure header player SVG icons use the dark fill in all modes */
.header-live .header-live-icon svg path,
.header-live--mobile-inline .header-live-icon svg path,
.rit-header-live .header-live-icon svg path {
  fill: var(--rit-dark, #000) !important;
}

/* When header player is playing, keep icon dark (no red). Only the button background/size indicates state. */
.header-live .btn-live.btn-live--playing .header-live-icon svg path,
.header-live--mobile-inline .btn-live.btn-live--playing .header-live-icon svg path,
.rit-header-live .btn-live.btn-live--playing .header-live-icon svg path {
  fill: var(--rit-dark, #000) !important;
}

/* Desktop-only: ensure this area doesn't show on mobile (offcanvas has its own CTA) */
@media (max-width: 991.98px) {
  /* Hide any desktop-only header-live containers, but allow the
     explicit mobile inline variant to be visible next to the toggler. */
  .header-live { display: none !important; }
  .header-live.header-live--mobile-inline,
  .header-live--mobile-inline { display: inline-flex !important; }
  /* Ensure the inline mobile live control aligns nicely next to toggler */
  .header-live--mobile-inline { margin-left: 0.5rem; }
}

/* Modern compact mobile menu toggler */
@media (max-width: 991.98px) {
  .navbar-toggler {
    width: 44px; /* match phone button diameter */
    height: 44px;
    padding: 0;
    border-radius: 50%;
    /* darker background so button contrasts on yellow bars */
    background: rgba(0,0,0,0.32);
    border: 1px solid rgba(255,255,255,0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 160ms ease, transform 120ms ease, border-color 160ms ease, box-shadow 160ms ease;
  }
  .navbar-toggler:hover, .navbar-toggler:focus { box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
  /* Replace the bootstrap icon with a lightweight 3-bar glyph built from a single pseudo-element */
  .navbar-toggler .navbar-toggler-icon { background-image: none; width: 18px; height: 14px; position: relative; }
  .navbar-toggler .navbar-toggler-icon::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #fff; /* white bars on dark background */
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
  }
  .navbar-toggler:hover { background: rgba(0,0,0,0.44); transform: translateY(-1px); }
  .navbar-toggler:active { transform: translateY(0); }
  /* When the offcanvas/nav is open, Bootstrap usually adds .collapsed false/true or toggles aria-expanded.
     We add a visual morph to an 'X' when the toggler is expanded via [aria-expanded="true"] */
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: translateY(-50%) rotate(45deg);
    box-shadow: 0 0 0 #fff, 0 0 0 #fff;
  }
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after { /* create the second rotation */
    content: '';
    position: absolute;
    left: 0; right: 0; height: 2px; background: #fff; border-radius: 2px;
    top: 50%; transform: translateY(-50%) rotate(-45deg);
  }
}

/* Mobile-specific override: narrower button width */
@media (max-width: 991.98px) {
  .header-live .btn-live,
  .header-live--mobile-inline .btn-live,
  .rit-header-live .btn-live {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
  }
}

/* Inline mobile header live CTA next to the navbar toggler */
.header-live--mobile-inline { display: inline-flex; gap: 0.35rem; }
/* Mobile inline: ensure the button uses the red CTA background and the icon area has the requested padding */
.header-live--mobile-inline { display: inline-flex; gap: 0.35rem; }
.header-live--mobile-inline .header-live-text { font-weight: 700; font-size: 0.95rem; }
.header-live--mobile-inline .header-live-icon .icon-play { display: inline-block; }
.header-live--mobile-inline .header-live-icon .icon-stop { display: none; }
.header-live--mobile-inline .btn-live.btn-live--playing .header-live-icon .icon-play { display: none; }
.header-live--mobile-inline .btn-live.btn-live--playing .header-live-icon .icon-stop { display: inline-block; }

/* Ensure the mobile inline header live control retains the red background when playing */
.header-live--mobile-inline .btn-live.btn-live--playing {
  background: var(--rit-red, #c11) !important;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.header-live--mobile-inline .header-live-icon .icon-play,
.header-live--mobile-inline .header-live-icon .icon-stop {
  display: inline-block;
  fill: var(--rit-dark, #000) !important;
}
.header-live--mobile-inline .header-live-icon .icon-stop { display: none; }
.header-live--mobile-inline .btn-live.btn-live--playing .header-live-icon .icon-play { display: none; }
.header-live--mobile-inline .btn-live.btn-live--playing .header-live-icon .icon-stop { display: inline-block; }

/* Header CTA playing state: green background to indicate active playback */
.header-live .btn-live.btn-live--playing {
  /* Keep button red always; swap icon to stop square when playing */
  background: var(--rit-red, #c11) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Header icon color/visibility: play shown when not playing, stop when playing */
.header-live .header-live-icon svg { display: none; }
.header-live .header-live-icon .icon-play { display: inline-block; fill: var(--rit-dark, #000); }
.header-live .header-live-icon .icon-stop { display: none; fill: var(--rit-dark, #000); }
.header-live .btn-live.btn-live--playing .header-live-icon .icon-play { display: none; }
.header-live .btn-live.btn-live--playing .header-live-icon .icon-stop { display: inline-block; }

/* Bottom big play: always show a white circular button (like current hover). The playing state uses a subtle red accent behind the white icon.
   The button's icon is an inline SVG pair: .rit-icon-play (triangle) and .rit-icon-stop (square).
*/
.rit-player__play-circle {
  background: #fff; /* white as requested */
  /* default icon color: dark (triangle/square use currentColor) */
  color: var(--rit-dark, #000);
  border: 2px solid rgba(0,0,0,0.06);
  transition: background-color 180ms ease, border-color 180ms ease, transform 160ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 50%;
}
.rit-player__play-circle .rit-icon { width: 20px; height: 20px; display: inline-block; }
.rit-player__play-circle .rit-icon-play { display: inline-block; }
.rit-player__play-circle .rit-icon-stop { display: none; }

.rit-player__play-circle.rit-player__play--playing {
  background: #fff; /* remain white */
  border-color: rgba(0,0,0,0.08);
  /* No scale change on play — keep the original circle dimensions */
  transform: none;
}
.rit-player__play-circle.rit-player__play--playing .rit-icon-play { display: none; }
.rit-player__play-circle.rit-player__play--playing .rit-icon-stop { display: inline-block; }

/* Ensure icon colors use the button's color (red) so the square/triangle appear red */
.rit-player__play-circle .rit-icon path,
.rit-player__play-circle .rit-icon rect {
  /* Always dark icons for bottom player (use !important to override other rules) */
  fill: var(--rit-dark, #000) !important;
}

/* --------------------------------------------------------------
   Header Phone Dropdown
   -------------------------------------------------------------- */
.rit-header-phone-dropdown { position: relative; margin-right: 0; }
.btn-phone-toggle {
  background: #008001; /* updated phone dropdown green */
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms ease, transform 140ms ease, box-shadow 160ms ease, border-color 160ms ease;
  margin-right: 0; /* remove accidental spacing on some browsers */
}
.mobile-header-controls .btn-phone-toggle { margin-right: 0 !important; }
.btn-phone-toggle:hover, .btn-phone-toggle:focus { background: #006b01; box-shadow: 0 4px 14px rgba(0,0,0,0.35); border-color: rgba(0,0,0,0.4); }
.btn-phone-toggle:active { transform: scale(.95); }
.btn-phone-toggle .phone-icon { display: inline-flex; width: 22px; height: 22px; color: #fff; }

/* Dropdown menu styling */
.rit-header-phone-dropdown .dropdown-menu.phone-dropdown-menu { min-width: 230px; padding: .4rem .35rem; font-size: .9rem; background: #008001; color: #fff; border: 1px solid rgba(0,0,0,0.3); }
.rit-header-phone-dropdown .dropdown-menu.phone-dropdown-menu .dropdown-item { color: #fff; border-radius: 6px; padding: .45rem .55rem; }
.rit-header-phone-dropdown .dropdown-menu.phone-dropdown-menu .dropdown-item:hover, 
.rit-header-phone-dropdown .dropdown-menu.phone-dropdown-menu .dropdown-item:focus { background: rgba(0,0,0,0.15); color: #fff; }
.rit-header-phone-dropdown .dropdown-item { padding: .55rem 1rem; }
.rit-header-phone-dropdown .dropdown-item:hover, .rit-header-phone-dropdown .dropdown-item:focus { background: var(--rit-yellow); color: var(--rit-dark); }

/* Phone item icons: simple glyph circles that can be themed per type */
/* Phone dropdown items */
.phone-item-icon { width: 44px; height: 44px; border-radius: 50%; background: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; position: relative; color: #000; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); transition: transform 140ms ease, box-shadow 140ms ease; }
.phone-item--studio .phone-item-icon,
.phone-item--mobile .phone-item-icon,
.phone-item--whatsapp .phone-item-icon { background: #ffffff; }
/* WhatsApp icon should appear green inside white circle */
.phone-item--whatsapp .phone-item-icon svg path { fill: #25D366 !important; }
.phone-item-label { flex: 1 1 auto; }
.phone-item-number {
  font-weight: 600;
  color: #ffffff;
  font-size: 1.25rem;
  transition: color 140ms ease;
}
/* Interactive hover/focus feedback */
.phone-item:hover .phone-item-icon,
.phone-item:focus .phone-item-icon,
.dropdown-item:hover .phone-item-icon,
.dropdown-item:focus .phone-item-icon { 
  transform: translateY(-2px) scale(1.08); 
  box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 3px rgba(0,128,1,0.25);
  background: #f5f5f5;
}
.dropdown-item:hover .phone-item-number,
.dropdown-item:focus .phone-item-number { color: #ffffff; text-shadow: 0 0 2px rgba(0,0,0,0.2); }
/* Ensure inline SVGs inside phone icons adopt black color */
.phone-item-icon svg { width: 22px; height: 22px; display: block; }
.phone-item-icon svg path, .phone-item-icon svg rect, .phone-item-icon svg circle { fill: currentColor !important; }

/* Very small screens: place phone + menu on same line under the main header row */
@media (max-width: 575.98px) {
  .header-bar { row-gap: .5rem; }
  .mobile-header-controls { width: 100%; order: 10; justify-content: flex-end; }
  /* Ensure live + phone + menu share a single line below branding/nav when wrapping */
  .mobile-header-controls > * { flex: 0 0 auto; }
}

@media (max-width: 420px) {
  .btn-phone-toggle { width: 40px; height: 40px; }
  .btn-phone-toggle .phone-icon { width: 20px; height: 20px; }
  .rit-header-phone-dropdown .dropdown-menu { min-width: 240px; }
}

/* Match phone button vertical size to live button (44px) including padding; ensure alignment */
.header-live .btn-live, .btn-phone-toggle { vertical-align: middle; }
.btn-phone-toggle.btn-phone-round { width: 44px; height: 44px; }