/* ---------------------------------------------------------------------------
   Static-mirror fixes for the Lanka Brush Exports clone.

   The original site is a WordPress/Blocksy theme whose header menu dropdowns
   are opened by JavaScript: Blocksy's main.js lazy-loads webpack chunks that
   add a `.ct-active` class to a hovered menu item, and CSS only reveals the
   submenu when that class is present:

       [class*=animated-submenu].ct-active > .sub-menu { opacity:1; visibility:visible }

   Those chunk files are requested at runtime, so the offline mirror never
   captured them (they 404 -> ChunkLoadError) and `.ct-active` is never added.
   Result: the "Company" dropdown (About Us, Manufacturing Facility,
   Sustainability, Careers) never opens.

   Fix: reveal the submenu with pure CSS on :hover / :focus-within — no JS
   required. These mirror every property the `.ct-active` rules set.
--------------------------------------------------------------------------- */

[class*=animated-submenu]:hover > .sub-menu,
[class*=animated-submenu]:focus-within > .sub-menu {
  display: block !important;      /* overrides [data-responsive="no"] .sub-menu{display:none} */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
}

/* The dropdown's individual rows are also held at opacity:0 until active. */
[class*=animated-submenu]:hover > .sub-menu > li,
[class*=animated-submenu]:focus-within > .sub-menu > li {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------------
   About Us -> "Our Certifications & Global Compliance" logos.

   The <img width> attribute is ignored: Spectra sizes these via the flex
   container (.wp-container-content-b04ba3db{flex-basis:200px}) which, in the
   centered row, collapsed the ISO/FSC logos to ~100px. Force a 200px display
   width with natural height so they render larger and undistorted.
--------------------------------------------------------------------------- */
.uagb-block-8760beea .wp-container-content-b04ba3db { flex: 0 0 auto !important; }
.uagb-block-8760beea .wp-block-uagb-image__figure img {
  width: 200px !important;
  height: auto !important;
  max-width: none !important;
  border-radius: 20px !important;   /* uniform rounded corners across all cert logos */
}
/* UKAS is a portrait logo; match its height to the other (near-square) logos
   by constraining height instead of width, so it stays undistorted. */
.uagb-block-8760beea .uagb-block-ukas0001 img {
  width: auto !important;
  height: 196px !important;
}

/* Submenu rows had no hover feedback (white text on the green panel, with no
   background change on mouse-over). Give each row a darker-green highlight on
   hover/focus, mirroring the solid-block hover style of the top-level items. */
.header-menu-1 .sub-menu .ct-menu-link:hover,
.header-menu-1 .sub-menu .ct-menu-link:focus {
  background-color: #007f5f !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   Mobile hamburger ("offcanvas") menu

   Blocksy normally reveals the mobile menu and slides the drawer in with its
   theme JS (missing in this mirror). site-fixes.js toggles `.active`/`inert`
   on the panel; these rules supply the open-state styling so the drawer is
   visible, scrollable and dismissible. The theme already ships
   `.ct-panel.active { display:flex; opacity:1; pointer-events:auto }`.
--------------------------------------------------------------------------- */

/* The mobile menu markup is hidden by `#offcanvas [data-device=mobile]{display:none}`
   until the (missing) JS swaps it in. Reveal it; hide the empty desktop copy. */
#offcanvas [data-device="mobile"] { display: block !important; }
#offcanvas [data-device="desktop"] { display: none !important; }

/* Force the panel visible when open. The theme's `.ct-panel.active{display:flex}`
   rule is gated behind the missing JS / a non-matching media query, so the
   panel stayed `display:none` even with `.active`. Make it unconditional. */
#offcanvas.active {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.5);
}
#offcanvas.active .ct-panel-inner { transform: translate3d(0, 0, 0) !important; }

/* Give the drawer a solid surface. The theme paints it with
   `[data-header*=type-1] #offcanvas .ct-panel-inner{background-color:var(--theme-palette-color-5)}`,
   which outranks a plain selector and — if that palette var fails to load —
   falls back to a near-black default, hiding the dark menu text. Force an
   opaque light surface with !important so the menu is always legible. */
#offcanvas .ct-panel-inner {
  background-color: #ffffff !important;
  --side-panel-width: 320px;
  overflow-y: auto;
}

/* Lock background scroll while the menu is open. */
html.ct-panel-open { overflow: hidden; }

/* Readable, tappable menu rows. */
#offcanvas .ct-panel-content-inner ul { list-style: none; margin: 0; padding: 0; }
#offcanvas .ct-menu-link {
  display: block;
  padding: 12px 4px;
  color: #1c3d2e !important;
  font-size: 16px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
#offcanvas .sub-menu .ct-menu-link { padding-left: 18px; font-size: 15px; opacity: 0.9; }

/* Keep the close (×) and submenu (+) controls dark/legible on the light drawer. */
#offcanvas .ct-toggle-close,
#offcanvas .ct-toggle-dropdown-mobile { color: #1c3d2e !important; }
#offcanvas .ct-toggle-close svg,
#offcanvas .ct-toggle-dropdown-mobile svg { fill: currentColor; }

/* Collapse sub-menus by default; site-fixes.js adds `.ct-active` to expand. */
#offcanvas .menu-item-has-children > .sub-menu { display: none; }
#offcanvas .menu-item-has-children.ct-active > .sub-menu { display: block; }

/* The +/- toggle sits next to its parent link and rotates when expanded. */
#offcanvas .ct-sub-menu-parent { display: flex; align-items: center; justify-content: space-between; }
#offcanvas .ct-toggle-dropdown-mobile {
  background: none; border: 0; padding: 10px; cursor: pointer;
  color: inherit; transition: transform 0.2s ease;
}
#offcanvas .menu-item-has-children.ct-active > .ct-sub-menu-parent .ct-toggle-dropdown-mobile {
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------------------
   Hero headings on small screens

   The full-bleed cover blocks overshoot the viewport by ~20px each side and
   their headings keep a desktop font-size, so long titles (e.g. "Get in Touch
   with Us") clip at the right edge. Pin the covers to the viewport and let the
   headings scale down / wrap.
--------------------------------------------------------------------------- */
@media (max-width: 781px) {
  .wp-block-cover.alignfull {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
  }
  .wp-block-cover h1,
  .wp-block-cover h2,
  .wp-block-cover .wp-block-heading,
  .wp-block-cover .wp-block-uagb-advanced-heading {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ---------------------------------------------------------------------------
   Home-page hero slider — center the dot (pagination) indicators.

   Swiper normally centers the bullets via classes (`.swiper-horizontal`,
   `.swiper-pagination-horizontal`) that its JS adds on init, which supply the
   `left:0; width:100%` that pairs with the base `text-align:center`. In this
   offline mirror that init doesn't reliably run, so the absolutely-positioned
   pagination collapses to the left edge. Pin it full-width so the bullets
   center under the hero.
--------------------------------------------------------------------------- */
.uagb-slider-container .swiper-pagination {
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
}

/* White & green dots (matching the site palette) with a gap between them.
   Inactive: white; active: solid brand green. */
.uagb-slider-container .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  margin: 0 7px !important;
  background-color: #ffffff !important;
  opacity: 0.9;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.uagb-slider-container .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--theme-palette-color-1, #007f5f) !important;
  opacity: 1;
  transform: scale(1.15);
}

/* ---------------------------------------------------------------------------
   Search modal backdrop — subtle translucent-black overlay (the page shows
   through). Overrides Blocksy's solid light panel background.
--------------------------------------------------------------------------- */
#search-modal.ct-panel {
  background: rgba(0, 0, 0, 0.7) !important;
}
/* white text + close button against the dark backdrop */
#search-modal .modal-field {
  color: #fff !important;
}
#search-modal .modal-field::placeholder {
  color: #fff !important;
  opacity: 0.8;
}
#search-modal .ct-toggle-close,
#search-modal .ct-toggle-close .ct-icon {
  color: #fff !important;
  fill: #fff !important;
}

/* ---------------------------------------------------------------------------
   Search live-results dropdown (header modal) — see assets/site-fixes.js.
--------------------------------------------------------------------------- */
.lb-search-results {
  margin-top: 14px;
  text-align: left;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}
.lb-search-hit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  border: 0;
  border-bottom: 1px solid #e0e7e1;
  background: transparent;
  color: #1f3d2b;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}
.lb-search-hit:last-child { border-bottom: 0; }
.lb-search-hit:hover,
.lb-search-hit:focus {
  background: var(--theme-palette-color-6, #f2f7f6);
  color: var(--theme-palette-color-1, #007f5f);
}
.lb-search-hit__name { font-weight: 600; }
.lb-search-hit__cat {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #7a8a7d;
}
.lb-search-hit__snip {
  font-size: 0.82rem;
  line-height: 1.4;
  color: #5d6b60;
}
.lb-search-group {
  padding: 9px 16px 5px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a8a7d;
  background: var(--theme-palette-color-6, #f2f7f6);
  border-bottom: 1px solid #e0e7e1;
}
.lb-search-hit--more {
  font-weight: 600;
  color: var(--theme-palette-color-1, #007f5f);
}
.lb-search-results__empty {
  margin: 0;
  padding: 14px 16px;
  color: #5d6b60;
  font-size: 0.95rem;
}