/*
 * Author: Manoj Mathangadeera
 * Website: https://codemmhub.github.io/
 * Project: USRI Web Development V2027
 * File Name: layout.css
 * File Description: Styles for the site chrome, meaning the sticky header, dropdown menus, mobile drawer, footer, mobile bottom bar, floating WhatsApp button and cookie notice.
 */

/* ---------------------------------------------------------------------------
   BREAKPOINT
   Mobile first. Below 1100px the menu is a drawer and the bottom bar shows.
   From 1100px up the menu is a row and the floating WhatsApp and Request a Quote icon buttons show.
   One breakpoint for all of it, so the two never overlap.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   HEADER
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: var(--ink);
  color: var(--white);
  border-bottom: 3px solid var(--blue);
  transition: box-shadow 0.25s var(--ease);
}
/* main.js adds this class after a little scrolling, to lift the header off the page. */
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }

.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--s-5); }

.brand { display: block; flex: none; line-height: 0; }
.brand img { height: 2.125rem; width: auto; }
@media (min-width: 1100px) { .brand img { height: 2.5rem; } }

/* ---- Mobile menu button (three bars drawn in CSS) ------------------------ */
.nav-toggle {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: transparent; border: 0; color: var(--white); border-radius: var(--radius);
}
.bars, .bars::before, .bars::after {
  display: block; width: 1.5rem; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform 0.25s var(--ease), background-color 0.2s;
}
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -7px; }
.bars::after  { top: 7px; }
/* Turns into a cross when open. */
.nav-open .bars { background: transparent; }
.nav-open .bars::before { transform: translateY(7px) rotate(45deg); }
.nav-open .bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---- The menu: a full screen drawer on phones and tablets -------------------- */
.primary-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 90;
  background: var(--ink);
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-5) var(--gutter) calc(var(--bar-h) + var(--s-7));
  visibility: hidden; opacity: 0; transform: translateY(-0.5rem);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
.nav-open .primary-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
/* Stops the page behind the open drawer from scrolling. */
.nav-open { overflow: hidden; }

.nav-list { display: block; }
.nav-item { position: relative; display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
/* Menu text is the body font, small, uppercase and widely spaced. Why not the headline font:
   the condensed bold face is for big headings, at menu size it looked heavy and crowded. */
.nav-link {
  flex: 1; display: block; padding: var(--s-4) 0;
  font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--white);
}
.nav-item.is-current > .nav-link { color: var(--yellow); }

/* Submenu open/close button with a chevron drawn in CSS. */
.sub-toggle {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  background: transparent; border: 0; color: var(--white);
}
.chev { width: 0.6rem; height: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s var(--ease); }
.sub-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg) translate(-2px, -2px); }

/* Submenus are an accordion in the drawer. */
.sub-menu { display: none; flex: 0 0 100%; padding: 0 0 var(--s-4) var(--s-4); }
.has-sub.is-open > .sub-menu { display: block; }
.sub-menu a {
  display: block; padding: var(--s-2) 0; text-decoration: none; color: rgba(255, 255, 255, 0.85);
  font-size: 1rem; font-weight: 500; letter-spacing: 0.02em;
}
.sub-menu a:hover, .sub-menu a[aria-current="page"] { color: var(--yellow); }

.nav-cta { margin-top: var(--s-6); width: 100%; }
/* The menu button matches the menu links so the two read as one family. */
.nav-cta.btn { font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: 0.1em; }

/* ---- Desktop menu (1100px and up): a row with dropdown panels ---------------- */
@media (min-width: 1100px) {
  .nav-toggle { display: none; }

  .primary-nav {
    position: static; inset: auto; z-index: auto; overflow: visible;
    background: transparent; padding: 0;
    visibility: visible; opacity: 1; transform: none; transition: none;
    display: flex; align-items: center; gap: var(--s-5);
  }
  .nav-list { display: flex; align-items: center; gap: 0.15rem; }
  .nav-item { border: 0; flex-wrap: nowrap; }
  .nav-link {
    padding: var(--s-3) 0.7rem; font-size: 0.875rem; position: relative; flex: none;
  }
  /* A yellow underline slides in on hover and on the current page. */
  .nav-link::after {
    content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.15rem; height: 3px;
    background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease);
  }
  .nav-item:hover > .nav-link::after, .nav-item.is-current > .nav-link::after, .nav-link:focus-visible::after { transform: scaleX(1); }
  .nav-item.is-current > .nav-link { color: var(--white); }

  /* The chevron button is 28 by 36 px, an easy target that passes the 24 px minimum. It must not
     overlap the menu link beside it (overlapping targets fail the accessibility rule), so instead
     of pulling the button left with a negative margin, the link gives up its right padding. */
  .sub-toggle { width: 1.75rem; height: 2.25rem; margin: 0 0.3rem 0 0; }
  .has-sub > .nav-link { padding-right: 0.1rem; }
  .has-sub > .nav-link::after { right: 0.1rem; }
  .chev { width: 0.45rem; height: 0.45rem; }

  /* The dropdown panel. Opens on hover, keyboard focus, or the toggle button. */
  .sub-menu {
    display: none; position: absolute; top: 100%; left: 0; z-index: 110; flex: none;
    min-width: 17rem; padding: var(--s-3) 0;
    background: var(--white); color: var(--ink);
    border-top: 3px solid var(--yellow); box-shadow: var(--shadow-2);
  }
  .has-sub:hover > .sub-menu, .has-sub:focus-within > .sub-menu, .has-sub.is-open > .sub-menu { display: block; }
  .sub-menu a { padding: 0.55rem var(--s-5); color: var(--ink); font-size: 0.9375rem; }
  .sub-menu a:hover, .sub-menu a[aria-current="page"] { background: var(--platinum); color: var(--blue); }

  /* On desktop Request a Quote is a floating button (see FLOATING BUTTONS below), so the
     menu row stays clean. The button still exists inside the mobile drawer.
     The double class is needed: .btn in components.css loads later and sets display, so a
     single class here would lose. */
  .nav-cta.btn { display: none; }
}

/* ---------------------------------------------------------------------------
   MOBILE BOTTOM BAR (below 1100px)
   Fixed to the bottom of the screen. Three actions, icon over a small caption.
   The extra padding keeps it clear of the iPhone home indicator.
   --------------------------------------------------------------------------- */
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--ink); border-top: 3px solid var(--yellow);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.25);
}
.bar-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  color: var(--white); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.bar-item .icon { width: 1.5rem; height: 1.5rem; }
.bar-label { font-family: var(--font-head); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.bar-item:active { background: var(--ink-soft); }
/* The quote action is the one we want tapped most, so it carries the yellow. */
.bar-item--quote { background: var(--yellow); color: var(--ink); }
.bar-item--quote:active { background: var(--yellow); filter: brightness(0.92); }

/* Leave room at the bottom of every page so the bar never covers the footer. */
body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 1100px) {
  .bottom-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   FLOATING BUTTONS (1100px and up only, the same point where the mobile bottom bar goes away)
   Two round icon buttons, WhatsApp above Request a Quote, in the bottom right corner of the window.
   Icons only at rest, so they never cover page content. The label slides out to the left on
   hover or keyboard focus.
   How it clears the footer links: .float-layer is a zero height sticky strip placed after the footer
   in the page. While the page scrolls, sticky keeps it 1.5rem above the bottom of the window. At the
   very end of the page it stops where it naturally sits, and the negative top margin (--float-clear)
   pulls that resting place up above the footer's last row (copyright, Media and Privacy links), so the
   buttons rise a little and never cover those links. No JavaScript needed. If the footer's last row
   ever gets taller, raise --float-clear.
   Why sticky and not fixed: a fixed element cannot know where the footer is.
   --------------------------------------------------------------------------- */
.float-layer { display: none; }
@media (min-width: 1100px) {
  :root { --float-clear: 6.5rem; }
  .float-layer {
    display: block; position: sticky; bottom: 1.5rem; z-index: 95;
    height: 0; margin-top: calc(var(--float-clear) * -1);
    pointer-events: none;
  }
  .float-stack {
    position: absolute; right: 1.5rem; bottom: 0;
    display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3);
  }
  .float-btn {
    pointer-events: auto;
    display: inline-flex; align-items: center; justify-content: center;
    height: 3.5rem; min-width: 3.5rem; padding: 0 1rem; border-radius: 999px; text-decoration: none;
    font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.06em; text-transform: uppercase;
    box-shadow: var(--shadow-2);
    transition: background-color 0.2s, transform 0.2s var(--ease);
  }
  .float-btn:hover { transform: translateY(-2px); }
  .float-btn .icon { width: 1.5rem; height: 1.5rem; flex: none; }
  /* The label takes no room at rest. It is still in the page, so screen readers read it. */
  .float-label {
    max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
    transition: max-width 0.25s var(--ease), opacity 0.2s, margin 0.25s var(--ease);
  }
  .float-btn:hover .float-label, .float-btn:focus-visible .float-label {
    max-width: 12rem; opacity: 1; margin-left: var(--s-3);
  }
  /* WhatsApp in the brand blue, Request a Quote in the yellow as the main action. */
  .float-btn--wa { background: var(--blue); color: var(--white); }
  .float-btn--wa:hover { background: var(--blue-deep); }
  .float-btn--wa:focus-visible { outline-color: var(--yellow); }
  .float-btn--quote { background: var(--yellow); color: var(--ink); }
  .float-btn--quote:hover { background: var(--white); }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  .float-btn, .float-label { transition: none; }
}

/* ---------------------------------------------------------------------------
   COOKIE NOTICE
   On phones it sits above the bottom bar so neither hides the other.
   --------------------------------------------------------------------------- */
.cookie-notice {
  position: fixed; z-index: 120;
  left: var(--s-4); right: var(--s-4);
  bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + var(--s-3));
  padding: var(--s-4) var(--s-5);
  background: var(--ink); color: var(--white); border-left: 4px solid var(--yellow);
  /* A faint light outline keeps the notice readable where it overlaps the dark footer. */
  outline: 1px solid rgba(255, 255, 255, 0.22); outline-offset: -1px;
  border-radius: var(--radius); box-shadow: var(--shadow-2);
  font-size: var(--fs-small); line-height: 1.5;
}
.cookie-notice[hidden] { display: none; }
.cookie-notice a { color: var(--yellow); }
.cookie-actions { display: flex; gap: var(--s-3); margin-top: var(--s-3); }
@media (min-width: 1100px) {
  .cookie-notice { left: 1.5rem; right: auto; bottom: 1.5rem; max-width: 26rem; }
}

/* ---------------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.85); border-top: 4px solid var(--blue); padding-top: var(--s-8); font-size: var(--fs-small); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--yellow); text-decoration: underline; }

.footer-top { display: grid; gap: var(--s-7); padding-bottom: var(--s-7); }
.footer-about img { height: 2.25rem; width: auto; margin-bottom: var(--s-4); }
.footer-lead { font-size: 1.0625rem; color: var(--white); margin-bottom: var(--s-4); }
.footer-contact { font-style: normal; }
.footer-contact ul { margin-top: var(--s-3); display: grid; gap: var(--s-1); }
.footer-social { display: inline-block; margin-top: var(--s-3); color: var(--yellow); }

.footer-heading { font-size: 1.25rem; letter-spacing: 0.06em; color: var(--white); margin-bottom: var(--s-4); }
.footer-col ul { display: grid; gap: var(--s-2); }

.footer-bottom {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding-block: var(--s-5); border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.875rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }

@media (min-width: 700px) {
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .footer-about { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (min-width: 1100px) {
  .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer-about { grid-column: auto; }
}