/* 
 Theme Name:   ACBNR
 Theme URI:    
 Description:  Air Canada's Best New Restaurants
 Author:       Paul Stasiewich
 Dedication:   For my daughter, Eloise
 Author URI:   
 Template:     frost
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html



 /* == Add your own styles below this line ==
--------------------------------------------*/


/* START Header + Footer CSS */

html {
  overflow-y: scroll;
}

.header-banner {
  background-color: black;
}

/* Header-row Mobile override */
@media (max-width: 768px) {
  .header-row, .footer-group {
    padding: 20px !important; /* top, right, bottom, left all 20px */
  }
}

/* Default (desktop) */
.footer-logo-EN img,
.footer-logo-FR img {
  height: 9.5vh;
  max-height: 40px;
}

/* Footer logo column: remove block gap between children */
.footer-column-1 {
  display: flex;
  flex-direction: column;
  gap: 0 !important;      /* no inter-child spacing */
}

/* Make anchors compact; images block-level to remove baseline gap */
.footer-logo-EN,
.footer-logo-FR {
  display: inline-block;  /* only size to image */
  line-height: 0;         /* guards against stray line-height space */
  margin: 0;
  padding: 0;
}

.footer-logo-EN img,
.footer-logo-FR img {
  display: block;         /* removes inline baseline whitespace */
  height: 9.5vh;
  max-height: 40px;
  width: auto;
}

/* Ensure the parent column allows positioning */
.footer-arrow-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Absolutely position the link in the top-right */
.footer-arrow-link {
  position: absolute;
  right: 0;
  display: inline-block;
  padding: 0px; /* optional spacing from top/right edges */
}

/* Style the arrow itself */
.footer-arrow {
  width: 40px;
  height: auto;
  display: block;
}

.custom-line {
  width: 100%;
  max-width: 100%;
  height: 1px;
  background-color: white; /* Or use var(--wp--preset--color--neutral) */
  margin: 2rem 45px 0 45px; /* top margin optional, 45px left/right spacing */
}

/* END Header + Footer CSS */

/* START Navigation CSS */

.global-logo {
    display: inline-block;
    background-image: url('/wp-content/themes/ACBNR/img/logos/global-logo.svg');
    background-size: auto 100%;       /* Maintain aspect ratio */
    background-repeat: no-repeat;
    background-position: left center;
    height: 9.5vh;
    max-height: 40px;
    width: auto;                     /* Allows width to scale with image proportions */
    aspect-ratio: 1 / 1;              /* Optional: forces proportional scaling if needed */
    text-indent: -9999px;
    overflow: hidden;
  }

/* enRoute Custom Font */  
.logo-text {
  font-family: 'Poppins', sans-serif;
  text-transform: none !important;
  font-weight: 600;
  font-size: 4.5rem; /* adjust as needed */
  line-height: 1;
}  


/* ACBNR header font and logo */  
:root {
  --header-height: clamp(40px, 9.5vh, 80px);
}

.site-header {
  background-color: black;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  --scale: clamp(40px, 5vw, 65px);
}



.header-brand {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 1rem;

  /* Shared scale variable */
  --scale: clamp(40px, 5vw, 65px); /* Adjust min/max as needed */
}

/* Header brand takes up 70% of screen width on mobile */
@media (max-width: 768px) {
  .header-brand {
    max-width: 70vw;   /* cap container at 50% of viewport width */
  }

  .footer-logo-FR img {
  height: 9.5vh;
  max-height: 35px;
}

  .header-brand img {
    max-width: 100%;   /* image can shrink with container */
    height: auto;      /* keep aspect ratio */
  }
}

#home-page-button {
  display: none; /* optional if using screen readers only */
}

/* Hide nav and language switcher by default */
.wp-block-polylang-language-switcher,
nav[aria-label="Navigation Bar"],
nav[aria-label="Navigation Bar FR"] {
  display: none;
}

.language-switcher-desktop a {
  font-size: 13px !important;
  letter-spacing: 2px;
}


/* Show Language Switcher only on desktop */
@media (min-width: 1200px) {
  .wp-block-polylang-language-switcher {
    display: flex;
    gap: 6px;
  }
}

/* Show Navigation Bar only on mobile */
@media (max-width: 1199px) {
  nav[aria-label="Navigation Bar"],
  nav[aria-label="Navigation Bar FR"] {
    display: flex;
  }

  /* Show Language Switcher inside mobile menu */
  #modal-1-content .wp-block-polylang-language-switcher,
  #modal-2-content .wp-block-polylang-language-switcher {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
  }
}

/* Show EN nav only on English pages (lang="en-CA") on mobile */
@media (max-width: 1199px) {
  html[lang="en-CA"] nav[aria-label="Navigation Bar"] {
    display: flex !important;
  }
  html[lang="en-CA"] nav[aria-label="Navigation Bar FR"] {
    display: none !important;
  }
}

/* Show FR nav only on English pages (lang="en-CA") on mobile */
@media (max-width: 1199px) {
  html[lang="fr-CA"] nav[aria-label="Navigation Bar"] {
    display: none !important;
  }
  html[lang="fr-CA"] nav[aria-label="Navigation Bar FR"] {
    display: flex !important;
  }
}

/* Hide desktop switcher and nav by default */
.language-switcher-desktop,
.language-switcher-desktop-home,
nav[aria-label="Navigation Bar"],
nav[aria-label="Navigation Bar FR"] {
  display: none;
}

/* Show Language Switcher on desktop */
@media (min-width: 1200px) {
  .language-switcher-desktop,
  .language-switcher-desktop-home {
    display: flex;
    gap: 6px;
  }
}

/* Show Navigation Bar only on mobile */
@media (max-width: 1199px) {
  nav[aria-label="Navigation Bar"],
  nav[aria-label="Navigation Bar FR"] {
    display: flex;
  }
}

/* Desktop: white links + slash */
@media (min-width: 1200px) {
  .language-switcher-desktop a {
    color: white !important;
    font-size: 16px;
    text-decoration: none;
  }

  .language-switcher-desktop li:not(:last-child)::after {
    content: " /";
    color: white;
    font-size: 15px;
    margin: 0 6px;
  }
}

/* Desktop: white links + slash */
@media (min-width: 1200px) {
  .language-switcher-desktop-home a {
    font-size: 16px;
    text-decoration: none;
  }

  .language-switcher-desktop-home li:not(:last-child)::after {
    content: " /";
    font-size: 15px;
    margin: 0 6px;
  }
}

/* Mobile: inherit color, slash between items */
.language-switcher-mobile {
  justify-content: flex-start;
  margin-bottom: 20px;
}

.language-switcher-mobile a {
  color: inherit !important;
  font-size: 16px;
  text-decoration: none;
}

.language-switcher-mobile li:not(:last-child)::after {
  content: " /";
  margin: 0 6px;
}

/* === Shared Layout === */
.language-switcher-desktop ul, 
.language-switcher-desktop-home ul,
.language-switcher-mobile ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.language-switcher-desktop li,
.language-switcher-desktop-home li,
.language-switcher-mobile li {
  display: inline;
}

/* === Hamburger Icon Styling === */
nav[aria-label="Navigation Bar"] .wp-block-navigation__responsive-container-open svg path,
nav[aria-label="Navigation Bar"] .wp-block-navigation__responsive-container-open svg rect,
nav[aria-label="Navigation Bar FR"] .wp-block-navigation__responsive-container-open svg path,
nav[aria-label="Navigation Bar FR"] .wp-block-navigation__responsive-container-open svg rect {
  fill: white;
}

/* === ENROUTE Hamburger Icon Styling === */
nav.enroute-hamburger .wp-block-navigation__responsive-container-open svg path,
nav.enroute-hamburger .wp-block-navigation__responsive-container-open svg rect {
  fill: black;
}

/* === Mobile Menu Background === */
#modal-1,
#modal-2 {
  background-color: #4E555C;
}

/* === Mobile Menu Styling === */

/* Text inside the Navigation Bar */
/* Make all text white in language switcher + nav links */
.wp-block-navigation__responsive-container-content 
  .wp-block-navigation__container {
  color: #fff;
  font-size: var(--wp--preset--font-size--x-large);
}

.wp-block-navigation__responsive-container-content 
  .language-switcher-mobile {
  color: #fff;
  font-size: var(--wp--preset--font-size--medium)
}

/* Make sure anchors inherit the white color */
.wp-block-navigation__responsive-container-content 
  .wp-block-navigation__container a {
  color: #fff !important;
  font-size: inherit; /* inherits 'large' from parent */
  text-decoration: none; /* optional */
}

/* enRoute link — add vertical spacing */
nav[aria-label="Navigation Bar"] .home_link,
nav[aria-label="Navigation Bar FR"] .home_link {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

html[lang="fr-CA"] nav[aria-label="Navigation Bar FR"] .wp-block-navigation__container,
html[lang="en-CA"] nav[aria-label="Navigation Bar"] .wp-block-navigation__container {
  justify-content: center !important;
  text-align: center !important;
}

/* Force footer logo to 100x100 */
.wp-block-navigation__responsive-container-content .mobile-menu-image img {
  width: 100px;
  height: 100px;
  object-fit: contain;  /* keeps proportions if it's not square */
  display: block;
  margin: 0 auto;       /* centers it horizontally */
}

/* Make the close button and its icon white */
.wp-block-navigation__responsive-container-close {
  color: #fff; /* affects font/svg if inheriting currentColor */
}

.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-close path {
  fill: #fff; /* force icon path to render white */
}

/* === Hide navs and footers by default === */
nav[aria-label="Default Navigation EN"],
nav[aria-label="Default Navigation FR"],
nav[aria-label="Enroute EN"],
nav[aria-label="Enroute FR"],
.footer-column-EN,
.footer-column-FR,
.footer-logo-EN,
.footer-logo-FR,
.footer-privacy-EN,
.footer-privacy-FR
 {
  display: none !important;
}

/* === Link text decoration in Footer === */
.footer-column-EN a,
.footer-column-FR a,
.footer-privacy-EN a,
.footer-privacy-FR a {
  text-decoration: none;
  color: inherit; /* keeps the base text color */
  transition: color 0.2s ease; /* smooth color change */
}

.footer-column-EN a:hover,
.footer-column-EN a:focus,
.footer-column-FR a:hover,
.footer-column-FR a:focus,
.footer-privacy-EN a:hover,
.footer-privacy-EN a:focus,
.footer-privacy-FR a:hover,
.footer-privacy-FR a:focus
 {
  text-decoration: none;
  color: #F01428;
}

/* Footer mobile styling */

/* Show EN nav only on English pages (lang="en-CA") on desktop */
@media (min-width: 1200px) {
  html[lang="en-CA"] nav[aria-label="Default Navigation EN"] {
    display: flex !important;
  }
  html[lang="en-CA"] nav[aria-label="Default Navigation FR"] {
    display: none !important;
  }
    html[lang="en-CA"] nav[aria-label="Enroute EN"] {
    display: flex !important;
  }
  html[lang="en-CA"] nav[aria-label="Enroute FR"] {
    display: none !important;
  }
}

/* Show EN nav only on English pages on all pages */
html[lang="en-CA"] .footer-column-EN, html[lang="en-CA"] .footer-privacy-EN, html[lang="en-CA"] .footer-logo-EN {
    display: flex !important;
  }

/* Show FR nav only on French pages (lang="fr-CA") on desktop */
@media (min-width: 1200px) {
  html[lang="fr-CA"] nav[aria-label="Default Navigation FR"] {
    display: flex !important;
  }
  html[lang="fr-CA"] nav[aria-label="Default Navigation EN"] {
    display: none !important;
  }
  html[lang="fr-CA"] nav[aria-label="Enroute FR"] {
    display: flex !important;
  }
  html[lang="fr-CA"] nav[aria-label="Enroute EN"] {
    display: none !important;
  }
}

/* Show FR nav only on English pages on all pages */
html[lang="fr-CA"] .footer-column-FR, html[lang="fr-CA"] .footer-privacy-FR, html[lang="fr-CA"] .footer-logo-FR  {
    display: flex !important;
  }

@media (max-width: 1199px) {
  .nav-group {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  nav[aria-label="Default Navigation EN"],
  nav[aria-label="Default Navigation FR"],
  nav[aria-label="Enroute EN"],
  nav[aria-label="Enroute FR"]  {
    display: flex !important;
    justify-content: center;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 1rem 0;
    width: 100%;
  }
}

@media (min-width: 1200px) {
  nav[aria-label="Default Navigation EN"] a,
  nav[aria-label="Default Navigation FR"] a,
  nav[aria-label="Enroute EN"] a,
  nav[aria-label="Enroute FR"] a {
    position: relative;
    display: inline;
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  nav[aria-label="Default Navigation EN"] a::after,
  nav[aria-label="Default Navigation FR"] a::after,
  nav[aria-label="Enroute EN"] a::after,
  nav[aria-label="Enroute FR"] a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px; /* controls space between text and underline */
    width: 0%;
    height: 1px;
    background-color: var(--wp--preset--color--secondary);
    transition: width 0.3s ease, background-color 0.3s ease;
  }

  nav[aria-label="Default Navigation EN"] a:hover::after,
  nav[aria-label="Default Navigation FR"] a:hover::after,
  nav[aria-label="Enroute EN"] a:hover::after,
  nav[aria-label="Enroute FR"] a:hover::after {
    width: 100%;
  }
}

/* END Navigation CSS */

/* START Shared CSS */

/* More to Explore */

/* More to Explore: image hover zoom */
.more-to-explore .wp-block-image {
  overflow: hidden; /* prevents image from spilling outside */
}

.more-to-explore .wp-block-image img {
  transform: scale(1);
  transition: transform 0.4s ease;
  display: block; /* removes inline gaps */
}

.more-to-explore .wp-block-image:hover img {
  transform: scale(1.05); /* zoom in */
}



/* New Banner */

.image-scroll {
  height: 25vh;
  background-attachment: fixed;
  background-position: 50% 50%; /* image center always in view */
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  isolation: isolate;
}

.image-scroll::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.2));
  z-index: 1;
  pointer-events: none;
}

.image-scroll > * {
  position: relative;
  z-index: 2; /* content above gradient */
}

/* Disable parallax on mobile */
@media (max-width: 768px) {
  .image-scroll {
    background-attachment: scroll !important;
  }
}


/* END New Banner */


/* More to Explore */

/* ===== Explore carousel: swipe on small screens ===== */
.explore-carousel { position: relative; }

/* Desktop/tablet: keep regular columns */
@media (min-width: 950px) {
  .explore-carousel .wp-block-columns { overflow: visible; }
}

/* Mobile: make the Columns block a horizontal snap carousel */
@media (max-width: 950px) {
  .explore-carousel .wp-block-columns {
    display: grid;                     /* simpler than flex for equal-width “cards” */
    grid-auto-flow: column;
    grid-auto-columns: 80%;            /* width of each card; adjust to taste (e.g., 85%, 90%) */
    gap: var(--wp--preset--spacing--x-small);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch; /* smooth momentum scrolling on iOS */
    overscroll-behavior-x: contain;
    padding-inline: 16px;              /* breathing room at edges */
  }

  /* Each column becomes a snap point */
  .explore-carousel .wp-block-column {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Tidy images inside */
  .explore-carousel figure { margin: 0; }
  .explore-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;                 /* you already set aspect-ratio:1 inline */
    display: block;
  }

  /* Optional: hide the scrollbar while preserving scrollability */
  .explore-carousel .wp-block-columns::-webkit-scrollbar { display: none; }
  .explore-carousel .wp-block-columns { scrollbar-width: none; }
}


.explore-carousel .carousel-controls {
  display: flex;
  justify-content: center;   /* centers the buttons horizontally */
  gap: 12px;                 /* spacing between buttons */
  margin-top: 12px;          /* space above buttons */
}

.explore-carousel .carousel-btn {
  border: 1px solid var(--wp--preset--color--contrast);
  background: transparent;
  padding: 6px 14px;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  font-size: 20px;
}

/* Hide controls by default */
.explore-carousel .carousel-controls {
  display: none;
}

/* Show only when carousel is in swipe/scroll mode */
@media (max-width: 900px) {
  .explore-carousel .carousel-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
  }
}


/* END More to Explore */




/* END Shared CSS */


/* START Home */ 


/* Hide by default */
.mobile-spacer {
  display: none;
}

/* Show only on mobile (adjust max-width to your breakpoint) */
@media (max-width: 1199px) {
  .mobile-spacer {
    display: block; /* or flex, depending on your layout */
  }
}


.Enroute-Header .wp-block-group.alignfull {
  background-color: white;
}

body.page-id-396, body.page-id-616  {
  background-color: white !important; /* replace with your color */
}

.home-hero {
  width: 100%;
}

.home-hero img {
  width: 100%;
  height: auto;
  display: block;
}


/* Stack on mobile */
@media (max-width: 767px) {
  .home-rows {
    flex-direction: column;
  }
}

.feature-columns img,
.home-columns img {
  transition: transform 0.4s ease;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.feature-columns figure,
.home-columns figure {
  overflow: hidden;
}


.feature-columns figure:hover img,
.home-columns figure:hover img {
  transform: scale(1.05); /* zooms in slightly within the container */
}

.feature-columns a,
.home-columns a {
  text-decoration: none;
  color: inherit; /* keeps the base text color */
  transition: color 0.2s ease; /* smooth color change */
}

.feature-columns a:hover,
.feature-columns a a:focus,
.home-columns a:hover,
.home-columns a a:focus {
  text-decoration: none;
  color: rgb(65, 65, 65);
}


/* Make all “full size” block images fill their container */
.feature-columns .wp-block-image.size-full,
.feature-columns .wp-block-image.size-full > a,
.home-columns .wp-block-image.size-full,
.home-columns .wp-block-image.size-full > a {
  display: block;
  width: 100%;
}

/* Ensure the actual image scales */
.feature-columns .wp-block-image.size-full img,
.home-columns .wp-block-image.size-full img {
  display: block;     /* removes inline gap */
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Optional: if any image still refuses due to inherited max-width rules */
.feature-columns .wp-block-image img,
.home-columns .wp-block-image img {
  max-width: 100% !important;
}



/* END Enroute Home */


/* START Restaurants Posts */

/* Default: mobile first — show full image */
.restaurant_post_hero {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  max-height: none;
  overflow: visible;
}

.restaurant_post_hero img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Desktop override: maintain 16:9 ratio, max 90% viewport height */
@media (min-width: 1000px) {
  .restaurant_post_hero {
    aspect-ratio: 16 / 9;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .restaurant_post_hero img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

.restaurant-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0; /* no gap between columns */
    max-width: 550px;
    width: 100%;
    margin: 3rem auto; /* add top & bottom spacing */
  }
  
  /* Desktop: underline on the left column only (simulating full row) */
.restaurant-details > *:nth-child(odd) {
    text-align: left;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  /* Desktop: align right column */
  .restaurant-details > *:nth-child(even) {
    text-align: right;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #ccc; /* customize the line color */
  }
  
  /* Prevent double border on mobile stacked layout */
  @media (max-width: 767px) {
    .restaurant-details {
      grid-template-columns: 1fr;
      text-align: center;
    }
  
    .restaurant-details > * {
      text-align: center !important;
      justify-self: center;
      width: 100%;
      padding-bottom: 0.5rem;
      margin-bottom: 0.5rem;
    }

    .restaurant-details > *:nth-child(even) {
        border-bottom: 1px solid #ccc; /* customize the line color */
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        }
  
    .restaurant-details > *:nth-child(odd) {
        border-bottom: 0px solid #ccc; /* customize the line color */
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        }
  
    }


/* END Restaurants Post  */



/* START Home page */

/* START Temporary layout for September Launch */





/* Countdown photo overlays */
.countdown-group figure {
  position: relative;
  overflow: hidden;
}
.countdown-group .top10-countdown figure {
  overflow: visible; /* leave logo alone */
}

/* Overlay link */
.countdown-group figure a.photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  opacity: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.25));
  transition: opacity .25s ease;
  padding: 1.0rem;
  text-align: center;
  z-index: 2; /* ensure overlay sits above the img */
}

/* Hover / focus reveal */
.countdown-group figure:hover a.photo-overlay,
.countdown-group figure:focus-within a.photo-overlay {
  opacity: 1;
}

/* Image zoom on hover — only on the 5 food photos, not the Top 10 logo */
.countdown-group figure:not(.top10-countdown figure) img {
  transition: transform .4s ease;
  will-change: transform;
}
.countdown-group figure:not(.top10-countdown figure):hover img,
.countdown-group figure:not(.top10-countdown figure):focus-within img {
  transform: scale(1.1); /* 110% zoom */
}

/* Typographic polish */
.countdown-group .overlay-name {
  font-weight: 700;
  font-size: clamp(20px, 1.1vw + 12px, 26px);
  letter-spacing: .2px;
}
.countdown-group .overlay-cta {
  margin-top: .35rem;
  font-size: clamp(16px, .8vw + 8px, 18px);
  opacity: 1;
}

/* Touch devices (modern browsers) */
@media (hover: none) and (pointer: coarse) {
  .countdown-group figure a.photo-overlay {
    opacity: 1;
  }
}

/* Fallback: small screens */
@media screen and (max-width: 768px) {
  .countdown-group figure a.photo-overlay {
    opacity: 1;
  }
}



/* END Temporary layout for September Launch */



/* Overrides for new-font wrapper & Row */
.banner-wrapper {
  width: 100vw;
  aspect-ratio: 25 / 2; /* or your desired ratio */
  background-image: url('/wp-content/themes/ACBNR/img/logos/New Banner.svg');
  background-size: cover;
  background-position: 50% 50% !important;
  background-repeat: no-repeat;
  user-select: none;
  pointer-events: none;
}


/* Override aspect ratio on smaller screens */
@media (max-width: 999px) {
  .banner-wrapper {
    aspect-ratio: 25 / 4; /* Taller for mobile */
  }
}

html, body {
  overflow-x: hidden;
}

/* Overrides for new-font wrapper & Row */

/* Ensure the child card group (vertical stack) is full width */
.wp-block-group > .wp-block-group {
  flex: 1 1 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Make .rank-card the positioning container */
.rank-card {
  position: relative !important;
  display: block !important; /* Override flex layout if needed */
}


/* Force the .rank to overlap and center */
.rank {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
  font-size: 100px; /* Adjust size as needed */
  pointer-events: none;
}

.rank {
  z-index: 2;
}

.rank-stack-1:hover {
  background-image: url('/wp-content/themes/ACBNR/top-10-images/1.svg') !important;
}

.rank-stack-2:hover {
  background-image: url('/wp-content/themes/ACBNR/top-10-images/2.svg') !important;
}

.rank-stack-3:hover {
  background-image: url('/wp-content/themes/ACBNR/top-10-images/3.svg') !important;
}

.rank-stack-4:hover {
  background-image: url('/wp-content/themes/ACBNR/top-10-images/4.svg') !important;
}

.rank-stack-5:hover {
  background-image: url('/wp-content/themes/ACBNR/top-10-images/5.svg') !important;
}

.rank-stack-6:hover {
  background-image: url('/wp-content/themes/ACBNR/top-10-images/6.svg') !important;
}

.rank-stack-7:hover {
  background-image: url('/wp-content/themes/ACBNR/top-10-images/7.svg') !important;
}

.rank-stack-8:hover {
  background-image: url('/wp-content/themes/ACBNR/top-10-images/8.svg') !important;
}

.rank-stack-9:hover {
  background-image: url('/wp-content/themes/ACBNR/top-10-images/9.svg') !important;
}

.rank-stack-10:hover {
  background-image: url('/wp-content/themes/ACBNR/top-10-images/10.svg') !important;
}



/* === Mouseover Effects Structure === */
/* === Base Card Setup === */
.top10 > .wp-block-group {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* === Background Image via ::before for Smooth Zoom === */
.top10 .has-background[style*="background-image"] {
  position: relative;
  overflow: hidden;
}

/* Pseudo-element that replicates background image and scales smoothly */
.top10 .has-background[style*="background-image"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

/* Ensure inner content stays above zoom layer */
.top10 .has-background[style*="background-image"] > * {
  position: relative;
  z-index: 1;
}

/* Zoom on hover */
.top10 > .wp-block-group:hover .has-background[style*="background-image"]::before {
  transform: scale(1.1);
}


@media (max-width: 800px) {
  .top10  {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .top10 > .wp-block-group {
    width: 100%;
  }
}


/* === YEARS BEST GRID (DESKTOP) === */
.years-best {
  border-top: 1px solid black;
  padding: 2rem 0;
  width: 100%;
}

.years-best > .wp-block-group {
  display: flex;
  align-items: flex-start; /* ✅ aligns image and text to top */
  gap: 20px;
  flex-wrap: nowrap;
  min-width: 0;
  border-bottom: 0.5px solid rgba(108, 117, 125, 0.4);
  padding-bottom: 20px;
}


/* Align only the text block (column) to the top */
.years-best .wp-block-group.is-layout-flex > .wp-block-group.has-global-padding {
  align-self: flex-start;     /* Aligns the whole block to top */
  display: flex;
  flex-direction: column;
  align-items: flex-start;    /* Aligns text left */
  justify-content: flex-start;
}


/* Heading — high priority */
.years-best .wp-block-heading {
  align-self: flex-start; /* Pushes heading to top */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(16px, 2vw, 22px);
  flex: 1 1 auto;
  min-width: 0;
}

/* Image — scales based on % not px */
.years-best figure {
  width: 25%;
  max-width: 250px;
  flex-shrink: 1;
  flex-grow: 0;
  aspect-ratio: 1;
  margin-bottom: 25px;
  display: block; /* Ensure no inline spacing */
  overflow: hidden;
  min-width: 100px;
}

.years-best img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.years-best figure {
  overflow: hidden; /* crop image when it scales */
}

.years-best img {
  transition: transform 0.4s ease;
  transform: scale(1); /* default state */
}

.years-best img:hover {
  transform: scale(1.05); /* subtle zoom */
}

/* Stack on tablets and small desktops */
@media (max-width: 1300px) {
  .years-best {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .years-best > .wp-block-group {
    width: 100%;
  }
}

/* Stack to 1 column on mobile */
@media (max-width: 600px) {
  .years-best {
    grid-template-columns: 1fr !important;
  }
}


@media (min-width: 1301px) {
  .years-best > .wp-block-group {
    border-bottom: 0.5px solid rgba(108, 117, 125, 0.5); /* 50% opacity */
    padding-bottom: 20px;
  }

  .years-best > .wp-block-group:nth-last-child(-n + 3) {
    border-bottom: none;
  }
}



/* Past Winners START */

/* ========================
   Past Winners – Styles
   ======================== */

/* Uppercase key bits */
.past-winners .restaurant,
.past-winners .city,
.past-winners .province,
.past-winners .year,
.past-winners .award {
  text-transform: uppercase;
}

/* Only space between image and info = 15px */
.past-winners .alumni.wp-block-group.is-layout-flex {
  --wp--style--block-gap: 15px; /* override Gutenberg gap */
  gap: 15px;
  row-gap: 15px;
}

/* Remove stray margins inside cards */
.past-winners .alumni figure.wp-block-image { margin: 0; line-height: 0; }
.past-winners .alumni figure.wp-block-image img { display: block; }
.past-winners .alumni .wp-block-group.is-layout-constrained { margin: 0; }

/* Name + inline button row */
.past-winners .restaurant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* Remove default H4 spacing */
.past-winners .restaurant-header .restaurant {
  margin: 0;
  line-height: 1.5;
}

/* Location row: collapse horizontal spacing */
.past-winners .wp-block-group.location.is-layout-flex,
.past-winners .is-content-justification-left.is-layout-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.past-winners .wp-block-group.location.is-layout-flex {
  justify-content: flex-start;
  gap: 0;
  column-gap: 0;
  row-gap: 0;
}

.past-winners .location,
.past-winners .is-content-justification-left.is-layout-flex {
  margin-top: 10px;
}

.past-winners .location h5 {
  margin-top: 0;
  margin-bottom: 0;
}

/* Awards & Year: small horizontal spacing */
.past-winners .is-content-justification-left.is-layout-flex {
  justify-content: flex-start;
  gap: 5px;
  column-gap: 5px;
  row-gap: 0;
}

/* === Overlay variant (legacy tiles) === */
.photo-wrapper { position: relative; overflow: hidden; }

.reserve-btn-overlay {
  position: absolute;
  bottom: 1rem;
  left: 1rem;

  display: inline-flex;
  align-items: center;
  flex-direction: row;
  white-space: nowrap;
  gap: clamp(4px, 1vw, 10px);

  padding: clamp(3px, 1.5vw, 8px) clamp(5px, 2vw, 14px);
  font-size: clamp(12px, 1.4vw, 16px);
  border-radius: clamp(3px, 1vw, 6px);

  background-color: rgba(255, 200, 53, 0.80);
  color: #000;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  backdrop-filter: saturate(140%) blur(1px);
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
  opacity: .98;
}

.reserve-btn-overlay:hover {
  background-color: rgba(255, 200, 53, 0.98);
  transform: translateY(-1px);
}

.reserve-btn-overlay .dinr-icon {
  /* fixed: width clamp cap + height unit */
  width: clamp(20px, 2.5vw, 25px);
  height: clamp(20px, 2.5vw, 25px);
  object-fit: contain;
  display: inline-block !important;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* === Inline variant (moved next to name) === */
.past-winners .restaurant-header .reserve-btn-overlay {
  position: static !important;
  inset: auto !important;
  transform: none !important;

  display: inline-flex;
  align-items: center;
  gap: .5rem;

  padding: .4rem .7rem;
  font-size: 12px;
  border-radius: 4px;

  margin-left: auto; /* push to right in header row */
}

.past-winners .restaurant-header .reserve-btn-overlay .dinr-icon {
  width: 16px;
  height: 16px;
}


/* === Restaurant Tile Hover Zoom (Past Winners) === */
.past-winners figure {
  overflow: hidden; /* crop zoomed image to tile bounds */
}

.past-winners figure img {
  transition: transform 0.4s ease;
  transform-origin: center center;
}

.past-winners figure:hover img {
  transform: scale(1.05); /* zoom slightly */
}



/* Mobile tweaks (merged into one query) */
@media (max-width: 800px) {
  .past-winners .restaurant-header .reserve-btn-overlay,
  .reserve-btn-overlay {
    background-color: rgba(255, 200, 53, 1);
  }
}

/* ==============================
   Past Winners – Responsive Grid
   ============================== */
.past-winners .wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--style--block-gap, 24px);
}

.past-winners .wp-block-columns > .wp-block-column { margin: 0 !important; }

@media (max-width: 1375px) {
  .past-winners .wp-block-columns { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .past-winners .wp-block-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .past-winners .wp-block-columns { grid-template-columns: 1fr; }
}






#filter-controls {
  max-width: 800px;
  display: flex;
  background-color: #C5AC8C;
  border-radius: 16px;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  margin-bottom: .25rem;
  justify-content: flex-start;  /* prevent even spacing */
  box-sizing: border-box;       /* include padding in total width */
}

#filter-controls label {
  font-weight: 600;
  font-size: 14px;
  margin-right: 0.25rem;
}

#filter-summary {
  margin-top: 0px;
  font-size: 14px; /* or any size you prefer */
  font-style: italic;
}

#filter-controls select {
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #fff;
  min-width: 120px;
  appearance: none;
}

#filter-controls button {
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 500;
  background-color: #f01428;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#filter-controls button:hover {
  background-color: #c71122;
}

#active-filters-display {
  font-size: 10px;
  font-style: italic;
  color: #444;
}

#filter-controls .filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#city-filter option {
  text-transform: capitalize;
}

@media (max-width: 785px) {
  #filter-controls {
    width: 100%;
    flex-direction: column;
    align-items: center; /* center children inside container */
  }

  #filter-controls .filter-group{
    width: 80%;   
  }

  #filter-controls button {
    width: 50%;
    align-self: center; 
  }
}



/* END ACBNR Past Winners */  

/* START SPONSORS */  



/* Ensure the inner content stays above the border */
.partner .custom-row {
  margin-left: 0px;
}

.partner .custom-row-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
}

.partner .row-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.partner .partner-logo {
  width: 75% !important;
  aspect-ratio: 1 / 1;          /* force square container */
  margin: 0 auto !important;
  padding: 6vw 2vw;             /* 6vw top/bottom, 2vw left/right */
  box-sizing: border-box;

  display: flex;                /* enable centering */
  align-items: center;          /* vertical centering */
  justify-content: center;      /* horizontal centering */
}



/* END SPONSORS */  


/* START Longlist */

.longlist-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
  margin-bottom: 30px !important; /* 🔧 adjust as needed */
}

.longlist-item.visible {
  opacity: 1;
  transform: translateY(0);
}


.expander-toggle, .carousel-controls {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  color: inherit;         
  text-decoration: none; 
}

.longlist .custom-row {
  position: relative;
}

/* Ensure the inner content stays above the border */
.longlist .custom-row-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
}

.longlist .row-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.longlist .row-right {
  text-align: right;
  line-height: 1.3;
  letter-spacing: 0.5px;
  font-weight: bold;
}

.expander-toggle {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.expander-icon {
  font-weight: bold;
  font-size: 2rem;
  line-height: 1;
}

.expander-content {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 0.25rem;
}

.name {
  font-weight: 700;
  font-size: 2rem;
  margin: 0;
}

@media (max-width: 800px) {
  .longlist .wp-block-columns {
    flex-direction: column;
  }
}

.longlist .wp-block-group[style*="background-image"] {
  aspect-ratio: 1 / 1; /* Adjust this to your actual image ratio */
  min-height: auto !important; /* Override inline min-height */
}


.longlist .wp-block-group[style*="background-image"] {
  background-size: 100% !important;
  background-position: center !important;
  transition: background-size 0.5s ease;
}

.longlist .wp-block-group[style*="background-image"]:hover {
  background-size: 110% !important;
}

/* Default: two lines */
.longlist .row-right .city,
.longlist .row-right .prov {
  display: block;
}
.longlist .row-right .city::after {
  content: ""; /* no comma in two-line mode */
}

/* Apply formatting for all widths up to 1300px */
@media (max-width: 1475px) {
  .longlist .custom-row-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .longlist .custom-row-inner .row-right {
    align-self: stretch;
    width: 100%;
    margin-bottom: 0.5rem;
    text-align: left !important;
    white-space: nowrap; /* keep on one line */
  }

  .longlist .row-right .city,
  .longlist .row-right .prov {
    display: inline;
    font-size: 15px;
  }

  .longlist .row-right .city::after {
    content: ", ";
  }
}

/* Force full column stack specifically at 1000px and below */
@media (max-width: 1000px) {
  .wp-block-columns.longlist {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .wp-block-columns.longlist > .wp-block-column {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* Fix inner items from overflowing or collapsing */
.longlist-item,
.longlist .wp-block-group.alignwide {
  height: auto !important;
  min-height: auto !important;
  box-sizing: border-box;
  overflow: hidden;
}


/* END Longlist */


/* START Panelists */


.panelist-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
  margin-bottom: 30px !important; 
}

.panelist-item.visible {
  opacity: 1;
  transform: translateY(0);
}


.panelists .custom-row-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
}

.panelists .row-left {
  min-height: 5em;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.row-left h4 {
  text-transform: uppercase;
}

.panelists .row-right {
  text-align: right;
  line-height: 1.3;
  letter-spacing: 0.5px;
  font-weight: 600;
  font-size: medium;
}


.panelists .wp-block-group[style*="background-image"] {
  aspect-ratio: 1 / 1; /* Adjust this to your actual image ratio */
  min-height: auto !important; /* Override inline min-height */
}


.panelists .wp-block-group[style*="background-image"] {
  background-size: 100% !important;
  background-position: center !important;
  transition: background-size 0.5s ease;
}

.panelists .wp-block-group[style*="background-image"]:hover {
  background-size: 110% !important;
}

/* Default: two lines */
.panelists .row-right .city,
.panelists .row-right .prov {
  display: block;
}
.panelists .row-right .city::after {
  content: ""; /* no comma in two-line mode */
}

/* Apply formatting for all widths up to 1300px */
@media (max-width: 1475px) {
  .panelists .custom-row-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .panelists .custom-row-inner .row-right {
    align-self: stretch;
    width: 100%;
    margin-bottom: 1.0rem;
    text-align: left !important;
    white-space: nowrap; /* keep on one line */
  }

  .panelists .row-right .city,
  .panelists .row-right .prov {
    display: inline;
  }

  .panelists .row-right .city::after {
    content: ", ";
  }
}


/* Force full column stack specifically at 1000px and below */
@media (max-width: 1100px) {
  .wp-block-columns.panelists {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .wp-block-columns.panelists > .wp-block-column {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .panelists .row-left {
  min-height: 2em;
}
}

/* Fix inner items from overflowing or collapsing */
.panelist-item,
.panelists .wp-block-group.alignwide {
  height: auto !important;
  min-height: auto !important;
  box-sizing: border-box;
  overflow: hidden;
}


/* END Panelists */


/* START About Us */

/* Core layout */
.timeline {
  position: relative;
  max-width: 1400px;
  margin: 4rem auto;
  padding: 2rem 0;
}

/* Faint static track */
.timeline::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  background: rgba(0,0,0,0.12); /* faint track */
  transform: translateX(-50%);
  pointer-events: none;
}

/* Animated progress line that grows with scroll */
.timeline::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #000; /* visible progress line */
  transform: translateX(-50%) scaleY(var(--line-progress, 0));
  transform-origin: top center;
  will-change: transform;
  pointer-events: none;
}

/* Items: alternate left/right */
/* Items: alternate left/right with vertical overlap */
.timeline-item {
  position: relative;
  width: 50%;
  padding: 1.5rem 0rem;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
  z-index: 0; /* keep below plane/line */
  margin-top: 0%; /* overlap so new item starts ~50% into previous one */
}
.timeline-item:first-child {
  margin-top: 0; /* no overlap for the first item */
}

.timeline-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Left side (odd) */
.timeline-item:nth-child(odd) {
  left: 0;
  padding-right: 2rem;
}
.timeline-item:nth-child(odd) .timeline-content {
  text-align: right;
}

/* Right side (even) */
.timeline-item:nth-child(even) {
  left: 50%;
  padding-left: 2rem;
}
.timeline-item:nth-child(even) .timeline-content {
  text-align: left;
}


/* Animated black progress line — ends at bottom of the last item */
.timeline::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: calc(var(--line-max, 0px) * var(--line-progress, 0));
  background: #000;
  transform: translateX(-50%);
  transform-origin: top center;
  will-change: height;
  pointer-events: none;
  z-index: 1;
}


/* Logo instead of black dot, with white background */
.timeline-item::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;  /* slightly larger for logo + background */
  height: 50px;
  background-color: #f8f5f2; /* white background */
  background-image: url('/wp-content/themes/ACBNR/img/logos/global-logo.svg');
  background-repeat: no-repeat;
  background-size: 70%; /* logo size inside circle */
  background-position: center;
  border-radius: 50%; /* circular background */
  z-index: 1;
}


/* Card styling */
.timeline-content {
  background: #f8f5f2;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.timeline-content img {
  width: 100%;
  aspect-ratio: 4 / 2;
  object-fit: cover;   
  height: auto;
  margin-top: .5rem;
  border-radius: 6px;
}

/* Mobile: stack items, hide line & dots, center text */
@media (max-width: 1000px) {
  .timeline::before,
  .timeline::after { display: none; }           /* hide line */

  .timeline-item {
    width: 100% !important;
    left: 0 !important;
    padding: 1rem !important;
    margin-top: 0 !important;                   /* <-- hard reset */
  }

  .timeline-item + .timeline-item {
    margin-top: 1rem !important;                /* spacing between stacked items */
  }

  .timeline-item .timeline-content {
    text-align: center !important;
    margin-inline: auto;
  }
}

/* Timeline image focus settings */
img[src*="timeline/1.jpg"] {
  object-fit: cover;
  object-position: center 72%;
}

/* Timeline image focus settings */
img[src*="timeline/3.jpg"] {
  object-fit: cover;
  object-position: center 62%;
}

/* Timeline image focus settings */
img[src*="timeline/5.jpg"] {
  object-fit: cover;
  object-position: center 67%;
}

/* Timeline image focus settings */
img[src*="timeline/6.jpg"] {
  object-fit: cover;
  object-position: center 78%;
}

/* Timeline image focus settings */
img[src*="timeline/7.jpg"] {
  object-fit: cover;
  object-position: center 47%;
}



/* ===== Eligibility cards: hover zoom + fade-in ===== */

/* Ensure the Cover acts like a clipped card */
.eligible-columns .wp-block-cover {
  overflow: hidden;
  /* no border-radius so corners stay square */
  
  /* 🔑 Make each cover a container so text scales with its size */
  container-type: size;
  container-name: eligible-card;
}

/* Smooth zoom for the background image inside Cover */
.eligible-columns .wp-block-cover .wp-block-cover__image-background {
  transform: scale(1);
  transition: transform 0.8s ease;
  will-change: transform;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

/* Only apply hover zoom on devices that support hover */
@media (hover: hover) {
  .eligible-columns .wp-block-cover:hover .wp-block-cover__image-background {
    transform: scale(1.1);
  }
}

/* Fade-in baseline state for each column */
.eligible-columns .wp-block-column {
  opacity: 0;
  transform: translateY(24px);
}

/* Visible state */
.eligible-columns .wp-block-column.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .eligible-columns .wp-block-column,
  .eligible-columns .wp-block-column.is-visible,
  .eligible-columns .wp-block-cover .wp-block-cover__image-background {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* === Eligibility cards: top-aligned headings, centered body copy === */
.eligible-columns .wp-block-column {
  display: flex;            /* make columns equal-height */
}
.eligible-columns .wp-block-cover {
  flex: 1;                  /* cover fills the column */
  display: grid;            /* ensure Cover itself stretches cleanly */
}
.eligible-columns .wp-block-cover__inner-container {
  /* two rows: row 1 = auto for the heading, row 2 = flexible area for paragraph */
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: stretch;
  width: 100%;
  height: 100%;
  padding: clamp(16px, 3vw, 28px);   /* adjust as you like */
}

/* Heading sits at the very top and scales with card width */
.eligible-columns .wp-block-cover__inner-container > .wp-block-heading {
  font-size: clamp(1rem, 8cqw, 2.5rem);  /* scales exactly with cover */
  line-height: 1.4;
  margin: 0 0 0.4em 0;
  align-self: start;
  justify-self: center;
  text-align: center;
}

/* Paragraph is vertically centered within the remaining space, also scales */
.eligible-columns .wp-block-cover__inner-container > p {
  font-size: clamp(0.85rem, 7cqw, 2rem) !important; /* scales with cover size */
  line-height: 1.4;
  margin: 0;
  align-self: center;
  justify-self: center;
  text-align: center;
  max-width: 38ch;         /* optional: tidy line length */
}

/* Optional: if some cards include extra spacers, keep them from affecting centering */
.eligible-columns .wp-block-cover__inner-container > .wp-block-spacer {
  display: none;
}

/* Keep equal heights tight on mobile too */
@media (max-width: 780px) {
  .eligible-columns .wp-block-column { display: block; } /* stacks naturally */
  .eligible-columns .wp-block-cover__inner-container {
    padding: 16px;
  }
  .eligible-columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


.wp-block-columns.eligible-columns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--style--block-gap, 1.5rem);
}
@media (max-width: 1400px){
  .wp-block-columns.eligible-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .wp-block-columns.eligible-columns { grid-template-columns: 1fr; }
}

/* END About Us */








/* TIMER */

/* ===== Countdown: containment + predictable scaling ===== */

/* Hard boundaries */
.countdown-group,
.countdown-group * { box-sizing: border-box; }
.countdown-group .wp-block-columns,
.countdown-group .wp-block-column { min-width: 0; } /* allow shrink */
.countdown-group .top10-countdown { max-width: 100%; overflow: hidden; }

/* Images above the timer should never force the column wider */
.countdown-group figure img { max-width: 100%; height: auto; }

/* Timer wrapper */
.countdown-group .timer {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;                 /* stop any bleed */
  text-align: center;

  /* Fluid base size (viewport-driven — stable across browsers) */
  font-size: clamp(0.8rem, 1.4vw, 1rem);
}

/* One row, never wrap, fill width evenly */
.countdown-group .timer .countdown-value {
  display: flex;
  flex-wrap: nowrap;                /* keep 4 items on one line */
  justify-content: space-between;
  align-items: stretch;
  gap: clamp(0.7rem, 1vw, 1.5rem);
  width: 100%;
  min-width: 0;
}

/* Each unit block */
.countdown-group .timer .countdown-value > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8f5f2;
  border-radius: 0.25rem;
  padding: clamp(0.5rem, 1vw, 0.8rem);

  flex: 1 1 0;     /* grow/shrink evenly */
  min-width: 0;    /* let them get narrow without forcing overflow */
}

/* Numbers */
.countdown-group .timer .countdown-value .num {
  font-size: clamp(1.25rem, 4vw, 2.0rem);
  font-weight: 800;
  line-height: 1.1;
  color: #F01428;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Labels */
.countdown-group .timer .countdown-value .label {
  font-size: clamp(0.55rem, 0.9vw, 0.8rem);
  font-weight: 500;
  text-transform: uppercase;
  color: #333;
  opacity: 0.9;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
}


/* At 1000px and below: 2-up */
@media (max-width: 1000px) {
  .countdown-group .wp-block-columns > .wp-block-column {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Mobile: 1-up (WordPress common breakpoint ~782px) */
@media (max-width: 782px) {
  .countdown-group .wp-block-columns > .wp-block-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Plane anchored above the first right-side timeline item */
.timeline .timeline-item:nth-of-type(2) {
  position: relative; /* anchor for the plane */
}

/* Base (hidden) state */
.timeline .timeline-item:nth-of-type(2)::before {
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* When the FIRST tile is revealed, fade the plane in */
.timeline .timeline-item:first-child.is-visible ~ .timeline-item:nth-of-type(2)::before {
  opacity: 1;
}

.timeline .timeline-item:nth-of-type(2)::before {
  content: "";
  position: absolute;
  bottom: 120%;                  /* place it above the tile */
  left: 50%;                     /* center horizontally */
  transform: translateX(-50%);
  margin-bottom: 20px;           /* spacing between plane and tile */
  
  width: 100%;                    /* dynamic: % of the tile width */
  max-width: 400px;              /* prevent it from getting too large */
  min-width: 120px;              /* prevent it from getting too tiny */
  
  aspect-ratio: 3 / 1;           /* maintain proportions */
  background-image: url("/wp-content/themes/ACBNR/img/timeline/AC_Plane.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 3;                    /* sit above the tile */
}

/* Optional: hide on small screens */
@media (max-width: 1000px) {
  .timeline .timeline-item:nth-of-type(2)::before {
    display: none;
  }
}

/* TIMER - END */


/* EDITORIAL - START */

/* Right-align the image column in photo-text-lockup */
.photo-text-lockup .wp-block-column:first-child {
  display: flex;               /* create a flex context */
  justify-content: flex-end;   /* push content to the right */
}

.photo-text-lockup .left-photo {
  margin: 0;                   /* remove default figure margins */
  width: auto;                 /* avoid taking full width */
  max-width: 100%;
  align-self: flex-start;      /* optional: align top; use center/end if desired */
}

.photo-text-lockup .left-photo img {
  max-height: 750px;   /* cap the height */
  width: auto;         /* let width adjust proportionally */
  height: auto;        /* let height adjust proportionally */
  max-width: 100%;     /* prevents overflow of the column */
  display: block;
  object-fit: contain; /* optional: ensures no cropping */
}

/* Limit right column width */
.photo-text-lockup .right-copy {
  max-width: 375px;
  flex: 1 1 375px; /* allow flex to respect max width */
}

/* Desktop alignment */
.two-photo-column .wp-block-column:first-child figure {
  display: flex;
  justify-content: flex-end;
}

.two-photo-column .wp-block-column:last-child figure {
  display: flex;
  justify-content: flex-start;
}

/* Mobile stacking: center align */
@media (max-width: 782px) { /* WordPress default breakpoint for columns */
  .two-photo-column .wp-block-column figure {
    justify-content: center !important;
  }
}