/* 
 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 */

/*mobile font size */
@media (max-width: 780px) {
  .has-large-font-size {
    font-size: var(--wp--preset--font-size--medium) !important;
  }
}

/* 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 { position: relative; }

.explore-carousel {
  text-align: left;
}

/* === Mobile: horizontal snap carousel (under 930px) === */
@media (max-width: 929px) {
  .explore-carousel .wp-block-columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: var(--wp--preset--spacing--x-small);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-inline: 16px;
  }

  .explore-carousel .wp-block-column {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .explore-carousel figure { margin: 0; }
  .explore-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .explore-carousel .wp-block-columns::-webkit-scrollbar { display: none; }
  .explore-carousel .wp-block-columns { scrollbar-width: none; }
}

/* === Tablet: show 3 tiles (930px – 1199px) === */
@media (min-width: 930px) and (max-width: 1199px) {
  .explore-carousel .wp-block-columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / 3); /* 3 visible */
    gap: var(--wp--preset--spacing--x-small);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .explore-carousel .wp-block-column {
    scroll-snap-align: start;
  }

  .explore-carousel .wp-block-columns::-webkit-scrollbar { display: none; }
  .explore-carousel .wp-block-columns { scrollbar-width: none; }
}

/* === Desktop: show 4 tiles (1200px – 1499px) === */
@media (min-width: 1200px) and (max-width: 1499px) {
  .explore-carousel .wp-block-columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 25%; /* 4 visible */
    gap: var(--wp--preset--spacing--x-small);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .explore-carousel .wp-block-column {
    scroll-snap-align: start;
  }

  .explore-carousel .wp-block-columns::-webkit-scrollbar { display: none; }
  .explore-carousel .wp-block-columns { scrollbar-width: none; }
}

/* === XL screens: show 5 tiles (1500px +) === */
@media (min-width: 1500px) {
  .explore-carousel .wp-block-columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 20%; /* 5 visible */
    gap: var(--wp--preset--spacing--x-small);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .explore-carousel .wp-block-column {
    scroll-snap-align: start;
  }

  .explore-carousel .wp-block-columns::-webkit-scrollbar { display: none; }
  .explore-carousel .wp-block-columns { scrollbar-width: none; }
}

/* === Controls === */
.explore-carousel .carousel-controls {
  display: none;
}

@media (max-width: 929px),
       (min-width: 930px) {
  .explore-carousel .carousel-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
  }
}

/* === Buttons === */
.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;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.carousel-btn.active {
  background-color: #93141D;
  color: #fff;
}


/* END More to Explore */

/* Quote Styling */

/* === Feature Quote (final tightened layout) === */
.wp-block-quote.feature-quote {
  background: rgba(248, 245, 242, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 4px solid #A5692F;
  border-radius: 14px;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  margin: 2.5rem 0;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Oversized decorative quotes — refined alignment */
.wp-block-quote.feature-quote::before {
  content: "“";
  position: absolute;
  top: 1.0rem; /* moved further down below restaurant row */
  left: 1.25rem;
  font-size: 6rem;
  line-height: 1;
  color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
  font-family: Georgia, serif;
}

.wp-block-quote.feature-quote::after {
  content: "”";
  position: absolute;
  right: 1.25rem;
  bottom: 2.25rem; /* raised so it sits just above the citation */
  font-size: 6rem;
  line-height: 1;
  color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
  font-family: Georgia, serif;
}

/* Header */
.wp-block-quote.feature-quote .standouts-header {
  text-align: center;
  font-size: .1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(20, 20, 20, 0.65);
  margin-bottom: 0.2rem;
  position: relative;
  z-index: 3;
}

/* Restaurant row */
.wp-block-quote.feature-quote .quote-restaurants {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 3.25rem;
  margin-bottom: 2.5rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(20, 20, 20, 0.55);
  text-align: center;
  position: relative;
  z-index: 3;
}

.wp-block-quote.feature-quote .quote-restaurants span::after {
  content: "·";
  margin-left: 0.35rem;
  color: rgba(20, 20, 20, 0.35);
}
.wp-block-quote.feature-quote .quote-restaurants span:last-child::after {
  content: "";
}

/* Quote text */
.wp-block-quote.feature-quote p {
  margin: 0;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: #141414;
  position: relative;
  z-index: 2;
}

/* Attribution — tightened spacing below */
.wp-block-quote.feature-quote cite {
  display: block;
  margin-top: 1.25rem; /* reduced top margin */
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.65);
  text-align: right;
  font-style: normal;
  position: relative;
  z-index: 3;
}

/* Hover */
.wp-block-quote.feature-quote:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.05);
}

/* Mobile */
@media (max-width: 768px) {
  .wp-block-quote.feature-quote {
    padding: 3rem 1.25rem 3.25rem;
  }
  .wp-block-quote.feature-quote::before {
    top: 1rem;
    font-size: 5rem;
  }
  .wp-block-quote.feature-quote::after {
    bottom: 2.5rem;
    font-size: 4.5rem;
  }
  .wp-block-quote.feature-quote .standouts-header {
    font-size: 0.8rem;
  }
  .wp-block-quote.feature-quote .quote-restaurants {
    font-size: 0.8rem;
    margin-bottom: 1.25rem;
  }
  .wp-block-quote.feature-quote cite {
    font-size: 0.85rem;
  }
}

.wp-block-group.alignwide .feature-quote {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}



/* START Top 10 Editorials */


.top-10-grid-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 90%;
  gap: 1.25rem 0.8rem; /* row / column gap */
  background: #f8f5f2; /* subtle on that beige bg */
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 14px;
  padding: 2rem 2.5rem;
  max-width: 720px; /* stops it from getting too wide on big screens */
}

/* make headings look like labels */
.top-10-grid-details .wp-block-heading {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* add a subtle divider per row (every pair is 2 elements) */
.top-10-grid-details > *:nth-child(odd) {
  position: relative;
  padding-bottom: 0.5rem;
}
.top-10-grid-details > *:nth-child(odd)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.6rem;
  width: 200%;
  height: 1px;
  background: rgba(0,0,0,0.05);
}

/* remove divider on last pair */
.top-10-grid-details > *:nth-last-child(2)::after {
  display: none;
}


.wp-block-group.has-global-padding.is-layout-constrained:has(.top-10-grid-details) {
  margin-top: var(--wp--preset--spacing--medium) !important;
  margin-bottom: var(--wp--preset--spacing--medium) !important;
}


@media (max-width: 768px) {
  .top-10-grid-details {
    grid-template-columns: 1fr;
    width: 100%;
    text-align: center;
    justify-items: center;
    gap: 0.15rem;
    padding: 1.5rem 1.25rem;
  }

  .top-10-grid-details .wp-block-heading {
    margin-top: 0.75rem;
    margin-bottom: 0.1rem;
    text-align: center !important;
  }

  .top-10-grid-details p {
    margin: 0 0 0.65rem 0;
    text-align: center !important;
  }

  /* dividers should only be as wide as container on mobile */
  .top-10-grid-details > *:nth-child(odd)::after {
    content: none
  }
}

/* Window Frame */

/* the hero already has an inline margin-bottom, make it a reference */
.restaurant_post_hero {
  position: relative;
  z-index: 1;
}

/* entry-content comes right after the hero in your markup */
.restaurant_post_hero + .entry-content {
  position: relative;
}

/* the actual window-frame figure inside entry-content */
.restaurant_post_hero + .entry-content .window-frame {
  /* make it 20% of the hero (hero is full-width here) but never bigger than 302px */
  width: min(20%, 150px);
  margin-left: auto;
  margin-right: auto;

  /* pull it up to the hero’s bottom edge */
  margin-top: calc(-1 * var(--wp--preset--spacing--large));

  /* now overlap the hero by half of the window frame */
  transform: translateY(-65%);

  position: relative;
  z-index: 5;
}

.restaurant_post_hero + .entry-content .window-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Remove extra white space under the window frame */
.restaurant_post_hero + .entry-content .window-frame {
  margin-bottom: 0;        /* no default figure margin */
  padding-bottom: 0;
}

.restaurant_post_hero + .entry-content .window-frame img {
  display: block;
  margin-bottom: -35%;      /* tiny visual correction, adjust between -1% and -3% if needed */
}

.window-frame img {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.window-frame img.in-view {
  opacity: 1;
  transform: scale(1);
}



/* 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 */
}

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

.sponsored-content-row a,
.feature-columns a:hover,
.feature-columns a a:focus,
.home-columns a:hover,
.home-columns a a:focus,
.years-best a:hover,
.years-best 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%;
}





/* 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 */



/* =========================
   Banner
   ========================= */
.banner-wrapper {
  width: 100vw;
  aspect-ratio: 25 / 2;
  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;
}

@media (max-width: 999px) {
  .banner-wrapper {
    aspect-ratio: 25 / 4;
  }
}

html, body {
  overflow-x: hidden;
}

/* =========================
   Gutenberg group overrides
   ========================= */
.wp-block-group > .wp-block-group {
  flex: 1 1 100%;
  width: 100%;
  box-sizing: border-box;
}

.top10 .rank-stack-1,
.top10 .rank-stack-2,
.top10 .rank-stack-3,
.top10 .rank-stack-4,
.top10 .rank-stack-5,
.top10 .rank-stack-6,
.top10 .rank-stack-7,
.top10 .rank-stack-8,
.top10 .rank-stack-9,
.top10 .rank-stack-10,
.top10 .rank-stack-11,
.top10 .rank-stack-12,
.top10 .rank-stack-13,
.top10 .rank-stack-14,
.top10 .rank-stack-15 {
  min-height: 450px;
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  z-index: 0;
}

/* cap the height on mobile so it doesn’t get too tall */
@media (max-width: 999px) {
  .top10 .rank-stack-1,
  .top10 .rank-stack-2,
  .top10 .rank-stack-3,
  .top10 .rank-stack-4,
  .top10 .rank-stack-5,
  .top10 .rank-stack-6,
  .top10 .rank-stack-7,
  .top10 .rank-stack-8,
  .top10 .rank-stack-9,
  .top10 .rank-stack-10,
  .top10 .rank-stack-11,
  .top10 .rank-stack-12,
  .top10 .rank-stack-13,
  .top10 .rank-stack-14,
  .top10 .rank-stack-15 {
    min-height: 300px; /* adjust as needed (e.g., 350–450px) */
  }
}

/* overlay layer (same for all, different background per rank) */
.top10 .rank-stack-1::after,
.top10 .rank-stack-2::after,
.top10 .rank-stack-3::after,
.top10 .rank-stack-4::after,
.top10 .rank-stack-5::after,
.top10 .rank-stack-6::after,
.top10 .rank-stack-7::after,
.top10 .rank-stack-8::after,
.top10 .rank-stack-9::after,
.top10 .rank-stack-10::after,
.top10 .rank-stack-11::after,
.top10 .rank-stack-12::after,
.top10 .rank-stack-13::after,
.top10 .rank-stack-14::after,
.top10 .rank-stack-15::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1; /* under .rank */
}

/* per-rank PNGs */
.top10 .rank-stack-1::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-1.png'); }
.top10 .rank-stack-2::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-2.png'); }
.top10 .rank-stack-3::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-3.png'); }
.top10 .rank-stack-4::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-4.png'); }
.top10 .rank-stack-5::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-5.png'); }
.top10 .rank-stack-6::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-6.png'); }
.top10 .rank-stack-7::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-7.png'); }
.top10 .rank-stack-8::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-8.png'); }
.top10 .rank-stack-9::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-9.png'); }
.top10 .rank-stack-10::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-10.png'); }
.top10 .rank-stack-11::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-1.png'); }
.top10 .rank-stack-12::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-2.png'); }
.top10 .rank-stack-13::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-11.png'); }
.top10 .rank-stack-14::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-7.png'); }
.top10 .rank-stack-15::after { background-image: url('/wp-content/themes/ACBNR/top-10-images/2025-4.png'); }




/* show overlay on hover */
.top10 .rank-stack-1:hover::after,
.top10 .rank-stack-2:hover::after,
.top10 .rank-stack-3:hover::after,
.top10 .rank-stack-4:hover::after,
.top10 .rank-stack-5:hover::after,
.top10 .rank-stack-6:hover::after,
.top10 .rank-stack-7:hover::after,
.top10 .rank-stack-8:hover::after,
.top10 .rank-stack-9:hover::after,
.top10 .rank-stack-10:hover::after,
.top10 .rank-stack-11:hover::after,
.top10 .rank-stack-12:hover::after,
.top10 .rank-stack-13:hover::after,
.top10 .rank-stack-14:hover::after,
.top10 .rank-stack-15:hover::after {
  opacity: 1;
}

/* =========================
   The number overlay
   ========================= */
.top10 .rank-stack-1 > .rank,
.top10 .rank-stack-2 > .rank,
.top10 .rank-stack-3 > .rank,
.top10 .rank-stack-4 > .rank,
.top10 .rank-stack-5 > .rank,
.top10 .rank-stack-6 > .rank,
.top10 .rank-stack-7 > .rank,
.top10 .rank-stack-8 > .rank,
.top10 .rank-stack-9 > .rank,
.top10 .rank-stack-10 > .rank,
.top10 .rank-stack-11 > .rank,
.top10 .rank-stack-12 > .rank,
.top10 .rank-stack-13 > .rank,
.top10 .rank-stack-14 > .rank,
.top10 .rank-stack-15 > .rank {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
}

.rank {
  margin: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
  font-size: 120px;
  font-weight: 700;
  color: #fff;
  isolation: isolate;
   text-shadow:
    0 6px 16px rgba(0, 0, 0, 0.55),
    0 0 35px rgba(0, 0, 0, 0.35);
  transition: text-shadow 0.3s ease;
}

.top10 .rank-stack-1:hover .rank,
.top10 .rank-stack-2:hover .rank,
.top10 .rank-stack-3:hover .rank,
.top10 .rank-stack-4:hover .rank,
.top10 .rank-stack-5:hover .rank,
.top10 .rank-stack-6:hover .rank,
.top10 .rank-stack-7:hover .rank,
.top10 .rank-stack-8:hover .rank,
.top10 .rank-stack-9:hover .rank,
.top10 .rank-stack-10:hover .rank,
.top10 .rank-stack-11:hover .rank,
.top10 .rank-stack-12:hover .rank,
.top10 .rank-stack-13:hover .rank,
.top10 .rank-stack-14:hover .rank,
.top10 .rank-stack-15:hover .rank {
  text-shadow:
    0 4px 10px rgba(0, 0, 0, 0.6),
    0 0 35px rgba(0, 0, 0, 0.35);
}


/* =========================
   Top 10 layout + zoom
   ========================= */
.top10 > .wp-block-group {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* zoom layer for background-image blocks */
.top10 .has-background[style*="background-image"] {
  position: relative;
  overflow: hidden;
}

.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.25s ease-out;
  will-change: transform;
  z-index: 0;
}

.top10 .has-background[style*="background-image"] > * {
  position: relative;
  z-index: 1;
}

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

/* mobile stack */
@media (max-width: 700px) {
  .top10  {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .top10 > .wp-block-group {
    width: 100%;
  }
}

/* mobile stack */
@media (max-width: 1245px) {
  .top10 .top10group > .wp-block-group.alignwide {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .top10 .top10group .name,
  .top10 .top10group .location {
    text-align: left !important;
    width: 100%;
  }
}

/* =========================
   Years Best 
   ========================= */
.years-best {
  border-top: 1px solid black;
  padding: 2rem 0;
  width: 100%;
}

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

.years-best .wp-block-heading {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(20px, 2vw, 24px);
  flex: 1 1 auto;
  min-width: 0;
}

.years-best figure {
  width: 25%;
  max-width: 250px;
  aspect-ratio: 1;
  margin-bottom: 25px;
  overflow: hidden;
  min-width: 100px;
}

.years-best img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.years-best img:hover {
  transform: scale(1.05);
}

.years-best a {
  text-decoration: none;
}


@media (max-width: 1300px) {
  .years-best {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .years-best > .wp-block-group {
    width: 100%;
  }
}

@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);
  }
  .years-best > .wp-block-group:nth-last-child(-n + 3) {
    border-bottom: none;
  }
}


.restaurant_post_hero {
  position: relative;
}

/* existing shared style */
.restaurant_post_hero .restaurant-hero-title,
.restaurant-hero-title-formatting,
.restaurant-hero-title-dish {
  color: #fff;
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 700;
  text-align: center;
  margin: 0;
  line-height: 1.05;
  z-index: 2;
  position: relative;
  text-shadow:
    0 6px 16px rgba(0, 0, 0, 0.55),
    0 0 35px rgba(0, 0, 0, 0.35);
}

/* If these elements are empty, don't reserve space */
.restaurant-hero-title-formatting:empty,
.restaurant-hero-title-dish:empty {
  display: none !important;
}

/* Gutenberg sometimes wraps shortcode output in <p> — cover that too */
.restaurant_post_hero .wp-block-group > p:empty {
  display: none !important;
}


/* === MOBILE ADJUSTMENTS === */
@media (max-width: 768px) {
  /* Stack hero shortcodes vertically */
  .restaurant_post_hero .wp-block-group {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
  }

  /* Hide the formatting divider on small screens */
  .restaurant-hero-title-formatting {
    display: none !important;
  }
}



/* Past Winners START */




/* =========================
   Past Winners — Editorial Index (updated sizing/contrast)
   ========================= */


.past-winners-grid {
  display: block;
  padding: 0 clamp(1.0rem, 4vw, 2rem);
}


/* Each row */
.past-winners-grid .alumni-list-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "restaurant meta"
    "location   meta";
  column-gap: 2rem;

  padding: 1.6rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  align-items: start;
}

.past-winners-grid .alumni-list-item:first-child {
  border-top: none;
}

/* LEFT: Restaurant name */
.past-winners-grid .restaurant {
  grid-area: restaurant;
  margin: 0;

  font-weight: 700;
  font-size: clamp(1.15rem, 0.55vw + 1.05rem, 1.45rem);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* LEFT: Location (under name) */
.past-winners-grid .location {
  grid-area: location;
  margin-top: 0.4rem;

  font-size: 1.0rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

.past-winners-grid .location .comma {
  opacity: 0.7;
}

/* CTA row under location */
.past-winners-grid .learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.past-winners-grid .learn-more .link-icon {
  width: 1.0em;
  height: 1.0em;
  object-fit: contain;
  opacity: 0.9;
}

.past-winners-grid .learn-more:hover .link-icon {
  opacity: 1;
}

.past-winners-grid .cta-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;

  margin-top: 0.55rem;
  font-size: 0.95rem;
}

.past-winners-grid .cta-row a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  white-space: nowrap;
}

.past-winners-grid .cta-row a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.past-winners-grid .cta-row a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Learn more arrow icon */
.past-winners-grid .learn-more .icon {
  font-size: 0.9em;
  transform: translateY(-0.05em);
  opacity: 0.9;
}

/* DINR icon */
.past-winners-grid .reserve-dinr .dinr-icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  object-fit: contain;
}

/* RIGHT: Award — single line */
.past-winners-grid .meta {
  grid-area: meta;

  display: flex;
  align-items: baseline;
  gap: 0.5rem;

  text-align: right;
  white-space: nowrap;
  align-self: start;
}

.past-winners-grid .meta .year {
  font-size: 0.95rem;
  font-weight: 750;
  text-transform: uppercase;
  opacity: 0.9;
}

.past-winners-grid .meta .award {
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* Subtle hierarchy by award type (no badges) */
.past-winners-grid
.alumni-list-item[data-award="Winner"]
.meta .award {
  font-weight: 750;
  opacity: 0.88
}

.past-winners-grid
.alumni-list-item[data-award="Top 10"]
.meta .award {
  font-weight: 750;
  opacity: 0.88;
}

@media (max-width: 640px) {
  .past-winners-grid .alumni-list-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "restaurant"
      "meta"
      "location";
    row-gap: 0.65rem;
  }

  .past-winners-grid .meta {
    text-align: left;
  }

  .past-winners-grid .cta-row {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
  }
}




/* ==============================
   Past Winners – Filter
   ============================== */


#filter-controls {
  max-width: 800px;
  display: flex;
  background-color: #60211f;
  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 {
  max-width: 790px;
  display: flex;
  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: #ece8e1;
  min-width: 120px;
  appearance: none;
}

#filter-controls button {
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 500;
  background-color: #dd3534;
  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;
  color: #ece8e1;
  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;
}

.dinr-longlist {
  cursor: pointer !important;
}

.dinr-longlist .row-right .city::after {
  content: ", ";
  color: #f8f5f2 !important; /* match the background and hide it visually */
}

/* 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;
  }

  .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;
  }

  .photo-text-lockup .right-copy {
    max-width: none;
    flex: 1 1 auto;
  }
}



/* ADS - start */

/* Default: show desktop, hide mobile */
.desktop {
  display: block !important;
}
.mobile {
  display: none !important;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .desktop {
    display: none !important;
  }
  .mobile {
    display: block !important;
  }
}

/*Worlds Best*/
.dinr-intro__image {
  padding: 32px 0;
}


/* Recipe block (hidden by default) */
.worldclass-recipe {
  display: none;
  margin-top: 18px;
  font-size: var(--wp--preset--font-size--x-small);
  line-height: 1.5;
}

/* When open */
.worldclass-recipe.is-open {
  display: block;
}

/* Read More trigger */
.worldclass-read-more {
  cursor: pointer;
  font-size: 14px;
}

/* + / - icon inside Read More */
.worldclass-read-more .worldclass-icon {
  display: inline-block;
  margin-left: 4px;
  font-weight: bold;
  font-size: inherit;
}

.worldclass-group,
.worldclass-group > .wp-block-group__inner-container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}



@media (min-width: 876px) and (max-width: 1122px) {
  .worldclass-columns .inspiration-stack {
    min-height: 136px !important;
  }
}

@media (min-width: 780px) and (max-width: 875px) {
  .worldclass-columns .inspiration-stack {
    min-height: 170px !important;
  }
}

@media (min-width: 780px) and (max-width: 995px) {
  .worldclass-columns .bartender-stack {
    min-height: 177px !important;
  }
}

@media (max-width: 780px) {
  .worldclass-intro {
    margin: 0 !important;
  }
}