/* Layout fixes for tablets and phones, and layout-stability rules. Loaded on every page (tools/optimize_pages.py). */

/* ===== Layout stability (no content jumps while the page loads) ===== */

/* Every image carries width/height attributes so its space is reserved before it loads.
   When CSS sets only the width, keep the image's aspect ratio instead of the attribute height. */
:where(img[width][height]) { height: auto; }
/* These rules size images by height (or max-height) only: keep the width automatic. */
.bdoz-about-history-section .history-silder-wrp .slick-list .slick-track .each .image-wrp img,
.grid_area-sc .img-content .img-wrp img,
.single-rating-award-page .rating-award-content .infrastructure-section .packages .each .each-wrp .img-wrp img,
.single-rating-award-page .rating-award-content .misc-section .packages .each .each-wrp .img-wrp img,
.single-rating-award-page .rating-award-content .grants-section .packages .each .each-wrp .img-wrp img,
.single-strategic-partner-page .rating-award-content .infrastructure-section .packages .each .each-wrp .img-wrp img,
.single-strategic-partner-page .rating-award-content .misc-section .packages .each .each-wrp .img-wrp img,
.single-strategic-partner-page .rating-award-content .grants-section .packages .each .each-wrp .img-wrp img { width: auto; }

/* Slick sliders: until slick.js runs, show only the first slide so the section is already at its final height
   instead of stacking every slide and then collapsing. */
.rating-slider .rating-slider-nav .slider-wrp:not(.slick-initialized) > .each:not(:first-child),
.member-slider:not(.slick-initialized) > *:not(:first-child),
.banner-slider:not(.slick-initialized) > *:not(:first-child) { display: none; }
/* Sliders whose track is as tall as the tallest slide: lay the slides out in one hidden row so the height matches. */
.rating-slider .rating-slider-wrp:not(.slick-initialized),
.bdoz-testimonials .testimonials-slider-wrp:not(.slick-initialized),
.bdoz-about-history-section .history-silder-wrp:not(.slick-initialized) { display: flex; overflow: hidden; }
.rating-slider .rating-slider-wrp:not(.slick-initialized) > .each,
.bdoz-testimonials .testimonials-slider-wrp:not(.slick-initialized) > .each { flex: 0 0 100%; }
.bdoz-about-history-section .history-silder-wrp:not(.slick-initialized) > .each { flex: 0 0 43%; }
.bdoz-about-history-section .history-silder-wrp:not(.slick-initialized) > .each .image-wrp img { height: 250px; width: auto; }
@media (max-width: 990px) {
  .bdoz-about-history-section .history-silder-wrp:not(.slick-initialized) > .each { flex-basis: 100%; }
  .bdoz-about-history-section .history-silder-wrp:not(.slick-initialized) > .each .image-wrp img { height: auto; max-height: 140px; max-width: 100%; }
}
/* The annual-report popup is a fixed overlay; WordPress custom CSS also pushed the page down 58px while it is open
   (html.pum-open body), which moved everything behind the overlay. Keep the page where it is. */
html.pum-open body { padding-top: 0; }
/* Popup Maker pads the page by a fixed 15px when it hides the scrollbar; with overlay scrollbars (macOS,
   phones) that moves everything 7px. Pad by the measured scrollbar width instead (main.js sets --bdoz-sbw). */
html.pum-open.pum-open-overlay.pum-open-scrollable body > :not([aria-modal=true]) { padding-right: var(--bdoz-sbw, 15px); }
/* Logo strip: lay the logos out in one row at the slider's widths (3 / 2 / 1 per view) before it initialises. */
.customer-logos:not(.slick-initialized) { display: flex; overflow: hidden; }
.customer-logos:not(.slick-initialized) > .each-logo { flex: 0 0 33.3333%; margin: 0 20px; }
@media (max-width: 768px) { .customer-logos:not(.slick-initialized) > .each-logo { flex-basis: 50%; } }
@media (max-width: 520px) { .customer-logos:not(.slick-initialized) > .each-logo { flex-basis: 100%; } }

/* Fonts: Open Sans (body) and Lato are self-hosted and preloaded. Until they arrive, text is set in Arial adjusted to
   their metrics (overrides computed from the font files), so a swap does not move anything. */
@font-face {
  font-family: 'Lato Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 98.09%; ascent-override: 100.62%; descent-override: 21.72%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Open Sans Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 106.02%; ascent-override: 100.81%; descent-override: 27.63%; line-gap-override: 0%;
}
/* Icon fonts (same faces as the vendor stylesheets, redeclared with font-display so nothing reflows). */
@font-face {
  font-family: 'FontAwesome';
  src: url('/wp-content/themes/ecostrat/assets/lib/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
       url('/wp-content/themes/ecostrat/assets/lib/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
       url('/wp-content/themes/ecostrat/assets/lib/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');
  font-weight: normal; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'slick';
  src: url('/wp-content/themes/ecostrat/assets/lib/slick/fonts/slick.woff') format('woff'),
       url('/wp-content/themes/ecostrat/assets/lib/slick/fonts/slick.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: block;
}

/* ===== Accessibility ===== */
/* Rating slider watermark (was an <h2>): decorative letters drawn from data-text, same styling as before. */
.rating-slider .rating-slider-wrp .each .background-title::before {
  content: attr(data-text); display: block; margin: 20px 0 10px;
  font-size: 800px; font-weight: 900; color: #000; opacity: 0.06; line-height: 80%;
  font-family: 'Lato', 'Lato Fallback', sans-serif !important; letter-spacing: -0.12em;
}
@media (max-width: 575px) { .rating-slider .rating-slider-wrp .each .background-title::before { font-size: 420px; } }

/* "Inquire about a BDO Zone" header button: white text on the darker blue on every page (inner pages
   gave it the black menu-link colour, 4.2:1). */
.bdoz-main-header .header-wrp .menu-wrp.secondary-page-menu ul li.general-contact a { color: #fff; }

/* Nutshell forms are injected by a script after load; reserve each form's loaded height so the content
   below does not jump (measured: contact 768/633px, Platinum partner 1306/1363px, funding 838/843px,
   desktop/phone). */
.nutshell-embed #nutshell-form-oDsz5j { min-height: 768px; }
.nutshell-embed #nutshell-form-JhpFA1 { min-height: 1306px; }
.nutshell-embed #nutshell-form-dymU7I { min-height: 838px; }
@media (max-width: 575px) {
  .nutshell-embed #nutshell-form-oDsz5j { min-height: 633px; }
  .nutshell-embed #nutshell-form-JhpFA1 { min-height: 1363px; }
  .nutshell-embed #nutshell-form-dymU7I { min-height: 843px; }
}

/* ===== Cookie notice (assets/consent.js): a fixed overlay, so it never pushes content ===== */
#bdoz-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2000000000; max-width: 560px; margin: 0 auto;
  background: #fff; color: #222; border: 1px solid #d8d8d8; border-top: 4px solid #0a77a6; box-shadow: 0 8px 28px rgba(0,0,0,.18);
  font-family: 'Open Sans', 'Open Sans Fallback', sans-serif; font-size: 15px; line-height: 1.5; }
#bdoz-consent[hidden] { display: none; }
#bdoz-consent .bdoz-consent-inner { padding: 18px 20px 16px; }
#bdoz-consent p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: #222; }
#bdoz-consent .bdoz-consent-heading { font-weight: 700; font-size: 17px; }
#bdoz-consent a { color: #0a77a6; text-decoration: underline; }
#bdoz-consent .bdoz-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
#bdoz-consent button { font: inherit; font-weight: 600; padding: 9px 20px; border-radius: 3px; cursor: pointer; }
#bdoz-consent .bdoz-consent-accept { background: #0a77a6; color: #fff; border: 1px solid #0a77a6; }
#bdoz-consent .bdoz-consent-decline { background: #fff; color: #0a77a6; border: 1px solid #0a77a6; }
#bdoz-consent button:hover, #bdoz-consent button:focus-visible { outline: 2px solid #222; outline-offset: 2px; }
.bdoz-main-footer .copy-right .footer-legal a { color: #373737; text-decoration: underline; }
.bdoz-main-footer .copy-right .footer-legal a:hover { color: #073674; }

/* Promotional popup (assets/promo-popup.js): centred image over a dimmed page */
#bdoz-promo { position: fixed; inset: 0; z-index: 1999999999; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 24px; }
#bdoz-promo .bdoz-promo-box { position: relative; width: min(560px, 100%); max-height: 100%; overflow: auto; background: #fff; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
#bdoz-promo .bdoz-promo-box img { display: block; width: 100%; height: auto; }
#bdoz-promo .bdoz-promo-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 26px; line-height: 36px; cursor: pointer; }
#bdoz-promo .bdoz-promo-close:hover, #bdoz-promo .bdoz-promo-close:focus-visible { background: #0a77a6; outline: 2px solid #fff; }

/* "Download the report" link on the navy banner: the link wraps onto two lines on tablets and phones and its
   arrow icon was anchored to the first line (over the words). As a block the icon sits beside the whole link.
   On this dark background the brand blue reads better than the darker text blue. */
.bdoz-recommendation-banner-section .content .download-button a { display: inline-block; color: #0d9ddb; }

/* Full-width image banners (Challenge pages): the banner image is 1900px wide and was shown at that width,
   so its right side (with the title baked into the picture) was cut off on any narrower screen. */
.image-banner-sc .container-fluid > img { max-width: 100%; height: auto; display: block; }

/* Partner logo grids (Strategic Partners hub and Project Developer Network, EN + FR): the page's own
   inline styles drop to one full-width square card per row below 768px, so a tablet shows a 700px logo
   card. Two per row on phones and small tablets, one centred card of at most 300px on narrow phones.
   The html prefix outranks the inline page styles. */
@media (max-width: 768px) {
  html .bdoz-strategic-partners .partners-wrp .each,
  html .bdoz-partners .partners-wrp .each { width: 50%; margin-bottom: 30px; }
}
@media (max-width: 480px) {
  html .bdoz-strategic-partners .partners-wrp .each,
  html .bdoz-partners .partners-wrp .each { width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; }
}

/* Privacy policy page */
.privacy-policy .description h2 { font-size: 22px; line-height: 1.4; margin: 34px 0 10px; color: #000; font-weight: 600; }
.privacy-policy .description p, .privacy-policy .description li { font-size: 17px; line-height: 1.7; color: #4a4a4a; }
.privacy-policy .description ul { list-style: disc; padding-left: 24px; margin: 0 0 14px; }
.privacy-policy .description li { margin-bottom: 8px; }
.privacy-policy .description .policy-updated { font-size: 15px; color: #666; }
.privacy-policy .description a { color: #0a77a6; text-decoration: underline; }

/* ===== Tablet and phone layout ===== */

/* Justified text leaves large gaps between words on narrow screens. */
@media (max-width: 767px) {
  [style*="text-align: justify"],
  [style*="text-align:justify"],
  .bdoz-about-history-section p,
  .bdoz-about-history-section .description,
  .rating-award-content p {
    text-align: left !important;
  }
}

/* Rating framework (AAA ... NR): smaller type so the scale fits. */
@media (max-width: 991px) {
  .rating-slider .rating-slider-wrp .each { padding-top: 4rem; padding-bottom: 8rem; }
  .rating-slider .rating-slider-wrp .each .title-part h2 { font-size: 110px; }
  .rating-slider .rating-slider-wrp .each .sub-title h3 { font-size: 44px; }
  .rating-slider .rating-slider-wrp .each .detail p { font-size: 19px; line-height: 1.55; }
  .rating-slider .rating-slider-nav { margin-top: -6rem; }
  .rating-slider .rating-slider-nav .slider-wrp .each .nav-title h3 { font-size: 34px; }
  .rating-slider .rating-slider-nav .slider-wrp .each.slick-current .nav-title h3 { font-size: 42px; }
}
@media (max-width: 575px) {
  .rating-slider .rating-slider-wrp .each { padding-top: 3rem; padding-bottom: 7rem; }
  .rating-slider .rating-slider-wrp .each .background-title h2 { font-size: 420px; }
  .rating-slider .rating-slider-wrp .each .title-part h2 { font-size: 76px; }
  .rating-slider .rating-slider-wrp .each .sub-title h3 { font-size: 32px; line-height: 1.15; }
  .rating-slider .rating-slider-wrp .each .detail p { font-size: 16px; }
  .rating-slider .rating-slider-wrp .each .detail p b,
  .rating-slider .rating-slider-wrp .each .detail p strong { font-size: 17px; }
  .rating-slider .rating-slider-nav { padding: 0 8px; margin-top: -5rem; }
  .rating-slider .rating-slider-nav .slider-wrp .each .nav-title h3 { font-size: 28px; }
  .rating-slider .rating-slider-nav .slider-wrp .each.slick-current .nav-title h3 { font-size: 34px; }
}

/* "Hear from BDO Zone Supporters": stack logo above quote on small screens. */
@media (max-width: 767px) {
  .bdoz-testimonials .title h2 { font-size: 26px; margin-bottom: 28px; }
  .bdoz-testimonials .testimonials-slider-wrp .each .row { flex-direction: column; }
  .bdoz-testimonials .testimonials-slider-wrp .each .row .logo-image,
  .bdoz-testimonials .testimonials-slider-wrp .each .row .testimonial-content { width: 100%; padding: 24px; }
  .bdoz-testimonials .testimonials-slider-wrp .each .row .logo-image { border-right: 1px solid #e8e8e8; border-bottom: none; justify-content: center; min-height: 140px; }
  .bdoz-testimonials .testimonials-slider-wrp .each .logo-image img { width: 200px; max-height: 110px; object-fit: contain; }
  .bdoz-testimonials .testimonials-slider-wrp .each .content p { font-size: 16px; line-height: 26px; }
  .bdoz-testimonials .testimonials-slider-wrp .each .supporter p { padding-top: 8px; font-size: 15px; }
  .bdoz-testimonials .testimonials-slider-wrp .slick-arrow { display: none !important; } /* arrows sit off-screen; swipe or use the dots */
  .bdoz-testimonials .testimonials-slider-wrp .slick-dots { bottom: -40px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .bdoz-testimonials .testimonials-slider-wrp .slick-prev { left: -28px; }
  .bdoz-testimonials .testimonials-slider-wrp .slick-next { right: -28px; }
  .bdoz-testimonials .testimonials-slider-wrp .each .content p { font-size: 18px; line-height: 29px; }
}

/* About > History timeline (html prefix: the page's inline styles use the same selectors and load later). Entries were bottom-aligned to the tallest entry in the row, so short entries
   sat under a large empty space. Slides now stretch to the row height so entries start at the top; the dot and stick that join each
   entry to the line are drawn on the slide (full row height) instead of the entry, so they stay on the line. */
html .bdoz-about-history-section .history-silder-wrp .slick-list .slick-track { align-items: stretch; }
html .bdoz-about-history-section .history-silder-wrp .slick-list .slick-track .each { position: relative; height: auto; } /* slick sets height:100%, which stops a flex item stretching */
html .bdoz-about-history-section .history-silder-wrp .slick-list .slick-track .each .each-inner:before,
html .bdoz-about-history-section .history-silder-wrp .slick-list .slick-track .each .each-inner:after { display: none; }
html .bdoz-about-history-section .history-silder-wrp .slick-list .slick-track .each:before {
  background: #0d9ddb; border-radius: 50%; bottom: 10px; content: ""; display: block; height: 16px; left: 0;
  position: absolute; transform: translate(-50%, 50%); width: 16px; z-index: 5; }
html .bdoz-about-history-section .history-silder-wrp .slick-list .slick-track .each:after {
  background: #0d9ddb; bottom: 10px; content: ""; display: block; height: 32px; left: 0; position: absolute;
  transform: translateX(-50%); width: 2px; }
/* One full-width entry at a time on phones and tablets (main.js switches slick below 991px), so a long entry
   does not become a tall narrow column and no neighbouring entry is cut off at the edge. */
@media (max-width: 990px) {
  html .bdoz-about-history-section .history-silder-wrp .slick-list { overflow: hidden; }
  html .bdoz-about-history-section .history-silder-wrp .slick-list .slick-track .each { margin: 0 !important; padding: 0 4px 50px; box-sizing: border-box; }
  html .bdoz-about-history-section .history-silder-wrp .slick-list .slick-track .each:before,
  html .bdoz-about-history-section .history-silder-wrp .slick-list .slick-track .each:after { left: 4px; }
  html .bdoz-about-history-section .history-silder-wrp .slick-list .slick-track .each .image-wrp img { height: auto; max-height: 140px; width: auto; max-width: 100%; object-fit: contain; }
  html .bdoz-about-history-section .history-silder-wrp .slick-list .slick-track .each .sub-title h3 { font-size: 18px; line-height: 25px; }
}

/* Header menu: labels and the "Inquire about a BDO Zone" button stay on one line;
   below the width where they all fit, the menu icon takes over (as it already did below 1200px). */
.bdoz-main-header .header-wrp .menu-wrp ul li { white-space: nowrap; }
.bdoz-main-header .header-wrp .menu-wrp ul .menu-item.general-contact { padding: 0 14px; align-self: center; }
@media (max-width: 1340px) {
  html .bdoz-main-header .header-wrp .menu-wrp { display: none; }
  html .bdoz-body #menuToggle { display: block; }
}
@media (max-width: 1500px) {
  html[lang^="fr"] .bdoz-main-header .header-wrp .menu-wrp { display: none; }
  html[lang^="fr"] .bdoz-body #menuToggle { display: block; }
}

/* Header logo: the logo box is a flex item and was shrinking below its 250px width (228px at 1366px)
   whenever the menu labels plus the Inquire button needed the room (the WordPress site shows the
   button only on the home page). Keep the logo at full size and tighten the menu spacing instead;
   checked at every width from 1201 to 1921px on the EN and FR headers with nothing overflowing. */
html .bdoz-main-header .header-wrp .logo-wrp { flex: 0 0 auto; }
@media (max-width: 1750px) {
  html .bdoz-main-header .header-wrp .menu-wrp ul li { padding: 0 6px; }
  html .bdoz-main-header .header-wrp .menu-wrp ul .menu-item.general-contact { margin-left: 0; padding: 0 14px; }
}
@media (max-width: 1650px) {
  html .bdoz-main-header .header-wrp .menu-wrp ul li a { font-size: 13px; }
}
@media (max-width: 1550px) {
  html .bdoz-main-header .header-wrp .menu-wrp ul .menu-item.general-contact { padding: 0 12px; }
}
@media (max-width: 1440px) {
  html .bdoz-main-header .header-wrp .logo-wrp img { margin-right: 24px; }
}

/* Scrolled (compact) header: keep the language box above the menu instead of on top of the Inquire button */
html .bdoz-body .bdoz-main-header.floating-menu .languages { top: 3px; }
@media (min-width: 1201px) {
  html .bdoz-main-header.floating-menu .header-wrp .menu-wrp { margin-top: 26px; }
}