/* ==========================================================================
   Navigation - rebuilt.

   The template's w3menu carries 185 rules in style.css and a minified handler
   in global.min.js. On mobile it opened a 280px drawer but laid the items out
   with the desktop's horizontal padding and white-space:nowrap still applied,
   so every link past "Home" was pushed outside the panel and could not be
   reached. The submenus opened, but underneath items that were already
   invisible.

   Rather than chase those rules, the drawer is rebuilt here from the same
   markup. This file is loaded after style.css and wins on specificity; the
   behaviour is in js/fol-menu.js, which replaces the template's handler.

   Breakpoint: the bar switches to the drawer at 1199px. The template used
   991px, which left 992-1199px trying to render a nine-item horizontal nav
   in the space of a tablet - the width where it looked most broken.
   ========================================================================== */

/* ------------------------------------------------------------- desktop -- */

@media only screen and (min-width: 1200px) {
  /* The drawer chrome is mobile-only. */
  .site-header .header-nav .logo-header,
  .site-header .header-nav .dz-social-icon,
  .site-header .header-nav .fol-menu-head,
  .site-header .header-nav .fol-menu-foot,
  .site-header .fol-sub-toggle,
  .site-header .w3menu-toggler {
    display: none !important;
  }

  /* The script wraps each parent item's link in .fol-nav-row so the drawer can
     split the tap targets. On the bar the wrapper stays a normal box - it just
     carries no padding and restores the font-size the template zeroes out on
     .nav to kill inline-block gaps. (display:contents was tried here and drops
     that inherited reset, which blanked the Services and Contact labels.) */
  .site-header .header-nav .nav > li > .fol-nav-row {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
    font-size: 1rem;
  }
  /* .nav is a flex row, so the item must stretch for the wrapper's 100% to
     resolve - otherwise the label floats to the top of the bar. */
  .site-header .header-nav .nav { align-items: stretch; }
  .site-header .header-nav .nav > li { display: flex; align-items: stretch; }

  .site-header .header-nav .nav > li > a,
  .site-header .header-nav .nav > li > .fol-nav-row > a {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  /* The span is the anchor for the underline so the rule tracks the label's
     own width, not the padded link box. */
  .site-header .header-nav .nav > li > a > span,
  .site-header .header-nav .nav > li > .fol-nav-row > a > span {
    position: relative;
    display: inline-block;
  }

  /* An underline that grows from the centre. The template marked the active
     item with colour alone, which on a busy bar is easy to miss. */
  /* The underline is positioned against the <a>, whose box now spans the full
     bar height, so it is placed from the bottom of that box rather than at a
     fixed offset that landed through the middle of the label. */
  .site-header .header-nav .nav > li > a > span::after,
  .site-header .header-nav .nav > li > .fol-nav-row > a > span::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--bs-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1);
  }
  .site-header .header-nav .nav > li:hover > a > span::after,
  .site-header .header-nav .nav > li.active > a > span::after,
  .site-header .header-nav .nav > li:hover > .fol-nav-row > a > span::after,
  .site-header .header-nav .nav > li.active > .fol-nav-row > a > span::after {
    transform: scaleX(1);
  }
  .site-header .header-nav .nav > li.active > a,
  .site-header .header-nav .nav > li.active > .fol-nav-row > a { color: var(--bs-primary); }

  /* The chevron turns over when its submenu is open. */
  .site-header .header-nav .nav > li.sub-menu-down .fol-nav-row > a i,
  .site-header .header-nav .nav > li.sub-menu-down > a i {
    font-size: .62rem;
    opacity: .55;
    transition: transform .28s ease, opacity .2s ease;
  }
  .site-header .header-nav .nav > li.sub-menu-down:hover > a i,
  .site-header .header-nav .nav > li.sub-menu-down.open > a i,
  .site-header .header-nav .nav > li.sub-menu-down:hover > .fol-nav-row > a i,
  .site-header .header-nav .nav > li.sub-menu-down.open > .fol-nav-row > a i {
    transform: rotate(180deg);
    opacity: 1;
  }

  /* ---- dropdowns ---- */

  /* The template animated these with a height transition, which cannot be
     interrupted cleanly and left panels half-open when the pointer crossed
     two items quickly. Opacity and transform instead. */
  .site-header .header-nav .nav > li .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    display: block !important;
    min-width: 262px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
    background: #fff;
    box-shadow: 0 12px 34px rgba(11, 42, 53, .12), 0 2px 8px rgba(11, 42, 53, .05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s cubic-bezier(.2, .7, .3, 1), visibility .22s;
  }
  .site-header .header-nav .nav > li:hover > .sub-menu,
  .site-header .header-nav .nav > li.open > .sub-menu,
  .site-header .header-nav .nav > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* A hover bridge across the gap to the panel, so the dropdown does not
     close when the pointer crosses the few pixels below the label. */
  .site-header .header-nav .nav > li.sub-menu-down::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
  }

  .site-header .header-nav .nav > li .sub-menu > li {
    width: 100%;
    border: 0;
  }
  .site-header .header-nav .nav > li .sub-menu > li > a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--bs-body-color);
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
  }
  .site-header .header-nav .nav > li .sub-menu > li > a:hover,
  .site-header .header-nav .nav > li .sub-menu > li > a:focus-visible {
    background: var(--bs-light);
    color: var(--bs-primary);
  }

  /* The last two items sit near the right edge, so their panels open leftward
     rather than off the side of the window. */
  .site-header .header-nav .nav > li:nth-last-child(-n+2) .sub-menu {
    left: auto;
    right: 0;
  }
}

/* -------------------------------------------------------------- drawer -- */

@media only screen and (max-width: 1199px) {

  /* ---- toggler ---- */

  /* Three bars that become an X. The template swapped in a separate close
     button positioned over the page, which on a 360px screen landed on top
     of the drawer's own content. */
  .site-header .w3menu-toggler {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    flex: none;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
  }
  .site-header .w3menu-toggler:hover { border-color: var(--bs-primary-border-subtle); }
  /* The template's .navicon absolutely positions these three bars at
     left:10px with staggered widths (22/25/20px), which fought the flex
     column above and rendered as an off-centre chevron rather than a
     hamburger. Each of those is reset here. */
  .site-header .w3menu-toggler span {
    display: block;
    position: static;
    top: auto;
    left: auto;
    width: 19px !important;
    height: 2px;
    border-radius: 2px;
    background: var(--bs-secondary);
    opacity: 1;
    transform: none;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), opacity .2s ease;
  }
  .site-header .w3menu-toggler.open span:nth-child(1) {
    top: auto;
    transform: translateY(7px) rotate(45deg);
  }
  .site-header .w3menu-toggler.open span:nth-child(2) { opacity: 0; left: auto; }
  .site-header .w3menu-toggler.open span:nth-child(3) {
    top: auto;
    width: 19px !important;
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ---- panel ---- */

  .site-header .header-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    width: min(86vw, 380px);
    max-width: none;
    margin: 0;
    padding: 0;
    background: #fff;
    box-shadow: -18px 0 50px rgba(11, 42, 53, .18);
    /* Off-canvas by transform rather than by a left offset, so it never
       widens the document and cannot cause horizontal scroll. */
    transform: translateX(102%);
    visibility: hidden;
    transition: transform .34s cubic-bezier(.32, .72, .28, 1), visibility .34s;
    overflow: hidden;
  }
  .site-header .header-nav.show {
    transform: translateX(0);
    visibility: visible;
  }

  /* ---- drawer header ---- */

  .site-header .header-nav .logo-header {
    display: flex !important;
    align-items: center;
    width: auto !important;
    height: auto !important;
    max-width: 165px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    float: none;
  }
  .site-header .header-nav .logo-header img { width: 100%; max-width: 165px; height: auto; }

  .fol-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    padding: 16px 18px;
    border-bottom: 1px solid var(--bs-border-color);
  }
  /* The close control lives inside the drawer, where it belongs. */
  .fol-menu-close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 9px;
    background: #fff;
    color: var(--bs-secondary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .fol-menu-close:hover {
    background: var(--bs-light);
    color: var(--bs-primary);
    border-color: var(--bs-primary-border-subtle);
  }

  /* ---- list ---- */

  /* The scroll container. flex:1 with min-height:0 is what lets a long list
     scroll inside the panel instead of pushing the footer out of view. */
  .site-header .header-nav .nav {
    flex: 1 1 auto;
    min-height: 0;
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 12px 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 1rem;   /* the template set font-size:0 on .nav to kill inline gaps */
  }
  .site-header .header-nav .nav > li {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .site-header .header-nav .nav > li:last-child { border-bottom: 0; }

  /* The rule that broke the old drawer: the desktop bar sets nowrap and
     horizontal padding, which pushed every label out of a 280px panel. */
  .site-header .header-nav .nav > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 14px 8px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--bs-secondary);
    white-space: normal;
    text-align: left;
  }
  .site-header .header-nav .nav > li.active > a { color: var(--bs-primary); }
  .site-header .header-nav .nav > li > a > span { flex: 1 1 auto; min-width: 0; }

  /* ---- submenu toggle ---- */

  /* The chevron is its own button, so tapping the label follows the link and
     tapping the chevron opens the section. The template put both behaviours
     on the same element, which meant you could not reach services.html from
     a phone at all. */
  .fol-sub-toggle {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--bs-secondary);
    font-size: .68rem;
    line-height: 1;
    cursor: pointer;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), background-color .2s ease, color .2s ease;
  }
  .fol-sub-toggle:hover { background: var(--bs-light); color: var(--bs-primary); }
  .fol-sub-toggle[aria-expanded="true"] {
    transform: rotate(180deg);
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
  }
  /* The template's own chevron and its ::after glyph are replaced by the
     button above. The link is moved inside .fol-nav-row by the script, so the
     descendant selector has to reach it there too. */
  .site-header .header-nav .nav > li a i.fa-chevron-down { display: none !important; }
  .site-header .header-nav .nav > li > a::after,
  .site-header .header-nav .nav > li .fol-nav-row > a::after { display: none !important; }
  /* The button's own chevron is the one exception. */
  .site-header .header-nav .nav .fol-sub-toggle i.fa-chevron-down { display: block !important; }

  /* The row holding the link and its toggle. It replaces the <a> as the
     row-height element, so it carries the same vertical padding. */
  .fol-nav-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 8px 7px 0;
  }
  .fol-nav-row > a {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  /* A parent item is not itself the current page unless marked active, so it
     keeps the same colour as every other label. */
  .site-header .header-nav .nav > li.sub-menu-down:not(.active) > .fol-nav-row > a {
    color: var(--bs-secondary);
  }

  /* ---- submenu ---- */

  /* Animated with grid-template-rows 0fr -> 1fr, which gets the open/close
     transition without animating a layout property and without JS having to
     measure scrollHeight. The template used a fixed max-height, which clipped
     the six-item Services list.

     The grid item needs its own overflow:hidden for the 0fr row to actually
     collapse its content. */
  .site-header .header-nav .nav > li .sub-menu {
    position: static;
    display: grid !important;
    grid-template-rows: 0fr;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    border-radius: 0;
    background: var(--bs-light);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: grid-template-rows .3s cubic-bezier(.2, .7, .3, 1);
  }
  .site-header .header-nav .nav > li.open > .sub-menu { grid-template-rows: 1fr; }
  /* One wrapper row holds every item, so the whole list collapses together. */
  .site-header .header-nav .nav > li .sub-menu > .fol-sub-inner {
    min-height: 0;
    overflow: hidden;
  }
  .site-header .header-nav .nav > li .sub-menu > .fol-sub-inner > li {
    width: 100%;
    border: 0;
  }
  .site-header .header-nav .nav > li .sub-menu li > a {
    display: block;
    padding: 11px 14px 11px 22px;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bs-body-color);
    white-space: normal;
  }
  .site-header .header-nav .nav > li .sub-menu li > a:hover,
  .site-header .header-nav .nav > li .sub-menu li > a:focus-visible {
    color: var(--bs-primary);
  }
  /* Extra breathing room at the ends so the section reads as one block. */
  .site-header .header-nav .nav > li .sub-menu li:first-child > a { padding-top: 13px; }
  .site-header .header-nav .nav > li .sub-menu li:last-child > a { padding-bottom: 15px; }

  /* ---- drawer footer ---- */

  /* Calling and WhatsApp are the two things a visitor on a phone most often
     wants. They were three unlabelled icon squares; now they are the actions
     that close the drawer. */
  .fol-menu-foot {
    flex: none;
    display: grid;
    gap: 8px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--bs-border-color);
    background: #fff;
  }
  .fol-menu-foot .btn {
    width: 100%;
    justify-content: center;
    border-radius: 10px !important;
    font-size: .92rem;
    padding: 12px 16px;
  }
  .fol-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 11px 16px;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--bs-secondary);
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
  }
  .fol-menu-cta:hover {
    border-color: var(--bs-primary-border-subtle);
    background: var(--bs-light);
    color: var(--bs-primary);
  }
  .fol-menu-cta i { font-size: 1rem; color: var(--bs-primary); }

  /* The template's icon row is replaced by the labelled actions above. */
  .site-header .header-nav .dz-social-icon { display: none !important; }

  /* ---- backdrop ---- */

  .site-header .menu-close,
  .fol-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1199;
    background: rgba(11, 42, 53, .45);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
    cursor: pointer;
  }
  .site-header .menu-close.show,
  .fol-menu-backdrop.show {
    opacity: 1;
    visibility: visible;
  }

  /* The header CTA is duplicated in the drawer footer, so the bar keeps only
     the logo and the toggler and stops feeling crowded. */
  .site-header .header-part-right { display: none !important; }

  /* Scroll lock. position:fixed on the body would jump the page to the top;
     overflow:hidden holds the scroll position. */
  body.fol-menu-open { overflow: hidden; }
}

/* Between the drawer and the widest phones the panel takes the full width. */
@media only screen and (max-width: 479px) {
  .site-header .header-nav { width: 100%; }
}

/* --------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  .site-header .header-nav,
  .site-header .header-nav .nav > li .sub-menu,
  .site-header .w3menu-toggler span,
  .site-header .header-nav .nav > li .sub-menu,
  .fol-sub-toggle,
  .site-header .menu-close,
  .fol-menu-backdrop,
  .site-header .header-nav .nav > li > a > span::after {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------- focus -- */

/* The template removed focus outlines site-wide. Keyboard users need them
   back on the controls that open and close the drawer. */
.site-header .w3menu-toggler:focus-visible,
.fol-menu-close:focus-visible,
.fol-sub-toggle:focus-visible,
.site-header .header-nav .nav a:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: 6px;
}