/* Buttons — §4 Global Components. Two markup shapes share these rules:
   plain `<a class="btn-primary">` (header/footer/mobile-call-bar) and the
   Gutenberg core/button block `<div class="wp-block-button btn-primary">
   <a class="wp-block-button__link">` (patterns) — the block's className
   lands on the wrapping div, not the link, so both selectors are needed.
   Every selector here is scoped to `a` (not a bare `.btn-primary`/
   `.btn-secondary` class) specifically so it does NOT also match the
   wrapping div — a bare class selector matched both, so the div got its
   own padding/border/border-radius on top of the link's, producing a
   visible nested double-pill/double-border artifact on .btn-secondary
   (transparent fill made both boxes visible; .btn-primary's solid fill
   just happened to hide the same bug). */
a.btn-primary,
a.btn-secondary,
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-secondary .wp-block-button__link{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-6);
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--fs-body);
  text-decoration:none;
  cursor:pointer;
  transition:transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

a.btn-primary,
.wp-block-button.btn-primary .wp-block-button__link{
  background:var(--c-gold-500);
  color:var(--c-navy-900);
  border:none;
}
a.btn-primary:hover,
a.btn-primary:focus-visible,
.wp-block-button.btn-primary .wp-block-button__link:hover,
.wp-block-button.btn-primary .wp-block-button__link:focus-visible{
  background:var(--c-gold-600);
  transform:translateY(-4px);
}

a.btn-secondary,
.wp-block-button.btn-secondary .wp-block-button__link{
  background:transparent;
  color:var(--c-white);
  border:1px solid var(--c-white);
}
a.btn-secondary:hover,
a.btn-secondary:focus-visible,
.wp-block-button.btn-secondary .wp-block-button__link:hover,
.wp-block-button.btn-secondary .wp-block-button__link:focus-visible{
  background:var(--c-white);
  color:var(--c-navy-900);
  transform:translateY(-4px);
}

/* Sticky header — §4. Text colour needs to flip with the background: white
   over the transparent/hero state (nav links and the toggle icon inherit
   this — see .site-header__menu a and .site-header__toggle below), dark ink
   once .is-scrolled swaps in a solid white bar. Previously both states used
   the same hardcoded --c-ink, which only happened to read correctly once
   scrolled — over the hero it was dark text on a dark navy overlay, just
   never obviously "broken" against the old plain gradient placeholders. */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  background:transparent;
  color:var(--c-white);
  transition:background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-header.is-scrolled{
  background:var(--c-white);
  color:var(--c-ink);
  box-shadow:var(--shadow-sm);
}
/* WordPress's admin bar is also position:fixed at the true viewport top, so
   a logged-in visitor (i.e. the client previewing their own site) sees our
   fixed header start at the same y:0 and render half-hidden underneath it —
   most obvious once .is-scrolled kicks in and the header's opaque white
   background collides with the admin bar's black one. Push the header (and
   the drawer/overlay, which are also viewport-fixed) below it, matching
   WordPress's own admin-bar height breakpoint (46px under 783px, 32px
   above) rather than hardcoding one number for every screen size. */
body.admin-bar .site-header,
body.admin-bar .site-drawer-overlay,
body.admin-bar .site-header__drawer{
  inset-block-start:32px;
}
@media screen and (max-width:782px){
  body.admin-bar .site-header,
  body.admin-bar .site-drawer-overlay,
  body.admin-bar .site-header__drawer{
    inset-block-start:46px;
  }
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-6);
  padding-block:var(--space-4);
}
.site-header__logo{ display:flex; line-height:0; }
.site-header__logo svg{ height:60px; width:auto; }

.site-header__nav{ display:none; }
@media (min-width:1024px){
  .site-header__nav{ display:block; }
}
.site-header__menu{
  display:flex;
  align-items:center;
  gap:var(--space-6);
  list-style:none;
  margin:0;
  padding:0;
}
.site-header__menu li{ position:relative; }
.site-header__menu a{
  display:flex;
  align-items:center;
  gap:4px;
  text-decoration:none;
  color:inherit;
  font-weight:500;
  white-space:nowrap;
}
/* Dropdown for menu items with children (e.g. "Services") — WordPress's
   default nav-menu walker already nests a ul.sub-menu inside the li, this
   just needs styling. A small chevron marks which items have one. */
.site-header__menu .menu-item-has-children > a::after{
  content:"";
  width:7px; height:7px;
  border-inline-end:1.5px solid currentColor;
  border-block-end:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur) var(--ease);
}
.site-header__menu .menu-item-has-children:hover > a::after,
.site-header__menu .menu-item-has-children:focus-within > a::after{
  transform:rotate(225deg) translateY(2px);
}
.site-header__menu .sub-menu{
  position:absolute;
  inset-inline-start:0;
  top:100%;
  margin-block-start:var(--space-3);
  min-width:220px;
  list-style:none;
  padding:var(--space-2);
  background:var(--c-white);
  border:1px solid var(--c-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.site-header__menu .menu-item-has-children:hover > .sub-menu,
.site-header__menu .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.site-header__menu .sub-menu a{
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm);
  color:var(--c-ink);
  white-space:nowrap;
}
.site-header__menu .sub-menu a:hover,
.site-header__menu .sub-menu a:focus-visible{
  background:var(--c-bg);
  color:var(--c-navy-800);
}

.site-header__actions{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
/* §4 requires the header phone button to "stay" on mobile (it's a second,
   redundant path to calling alongside the sticky mobile call bar, e.g. for
   a visitor who has already scrolled past the bar). A prior attempt to hide
   it below 768px never actually worked — `a.btn-primary` (element+class,
   specificity 0,1,1) sets display:inline-flex/padding/font-size and always
   outranks a same-weight-or-lower override regardless of media query or
   source order, so the button was already unconditionally visible at full
   desktop size. With no room for "Call to Book" on one line, the text
   wrapped onto 3 lines and border-radius:pill turned the resulting
   near-square box into a blob. Shrink it for the whole mobile/tablet
   range — anywhere the hamburger toggle is showing instead of the full nav
   (<1024px, see .site-header__nav above) — so it stays a one-line pill
   throughout. Selectors here must out-specificity `a.btn-primary` (0,1,1)
   itself, hence `.site-header__actions a.site-header__call` (0,2,1) rather
   than a bare `.site-header__call`. */
@media (max-width:1023.98px){
  .site-header__actions a.site-header__call{
    padding:var(--space-2) var(--space-3);
    gap:6px;
    font-size:.85rem;
  }
  .site-header__actions a.site-header__call svg{ width:15px; height:15px; flex-shrink:0; }
  .site-header__actions a.site-header__call span{ white-space:nowrap; }
}

.site-header__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  background:none;
  border:none;
  color:inherit;
  cursor:pointer;
  padding:0;
}
@media (min-width:1024px){
  .site-header__toggle{ display:none; }
}
.site-header__toggle-icon--close{ display:none; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon--open{ display:none; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon--close{ display:block; }

/* Mobile nav drawer */
.site-drawer-overlay{
  position:fixed; inset:0;
  background:rgba(6,15,36,.5);
  z-index:150;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease);
}
.site-drawer-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

.site-header__drawer{
  position:fixed;
  inset-block:0;
  inset-inline-end:0;
  width:min(320px, 85vw);
  z-index:200;
  background:var(--c-white);
  box-shadow:var(--shadow-lg);
  padding:var(--space-16) var(--space-6) var(--space-6);
  display:flex;
  flex-direction:column;
  gap:var(--space-8);
  transform:translateX(100%);
  transition:transform var(--dur) var(--ease);
  overflow-y:auto;
}
.site-header__drawer.is-open{
  transform:translateX(0);
}
.site-header__drawer-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.site-header__drawer-menu a{
  display:block;
  padding-block:var(--space-2);
  text-decoration:none;
  color:var(--c-ink);
  font-weight:500;
  font-size:var(--fs-h3);
}
/* Sub-items (e.g. under "Services") — the drawer has room to just show them
   indented and always expanded rather than adding an accordion toggle. */
.site-header__drawer-menu .sub-menu{
  list-style:none;
  margin:0;
  padding-inline-start:var(--space-4);
}
.site-header__drawer-menu .sub-menu a{
  font-size:var(--fs-body);
  color:var(--c-ink-muted);
  padding-block:var(--space-1);
}
.site-header__drawer-call{ justify-content:center; }

body.has-drawer-open{ overflow:hidden; }
.scotland-banner{
  background:var(--c-gold-500);
  padding-block:var(--space-4);
}
.scotland-banner__text{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  text-align:center;
  color:var(--c-navy-900);
  font-weight:700;
  font-size:var(--fs-h4, 1.15rem);
  letter-spacing:.02em;
}
.scotland-banner__text svg{ flex-shrink:0; }
@media (max-width:480px){
  .scotland-banner{ padding-block:var(--space-3); }
  .scotland-banner__text{ font-size:1rem; }
}
/* Rich footer — §4 */
.site-footer{
  background:var(--c-navy-900);
  color:var(--c-white);
}
.site-footer a{ color:var(--c-white); }
.site-footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-8);
  padding-block:var(--space-16);
}
@media (min-width:768px){
  .site-footer__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:1024px){
  .site-footer__grid{ grid-template-columns:2fr 1fr 1fr 1.4fr; }
}
.site-footer__logo{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:var(--fs-h3);
  color:var(--c-white);
  text-decoration:none;
  margin-block-end:var(--space-4);
}
.site-footer__brand p{ color:rgba(255,255,255,.72); }
.site-footer__col h3{
  color:var(--c-gold-500);
  font-size:var(--fs-small);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-block-end:var(--space-4);
}
.site-footer__col ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.site-footer__col a{ text-decoration:none; }
.site-footer__col a:hover{ color:var(--c-gold-500); }
.site-footer__contact address{ font-style:normal; display:flex; flex-direction:column; gap:var(--space-2); }
.site-footer__contact address > *{
  display:flex;
  align-items:flex-start;
  gap:var(--space-2);
}
.site-footer__contact address svg{
  flex-shrink:0;
  margin-block-start:2px;
  color:var(--c-gold-500);
}
.site-footer__social{
  display:flex;
  gap:var(--space-3);
  margin-block-start:var(--space-4);
}
.site-footer__social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:var(--c-white);
}
.site-footer__social a:hover,
.site-footer__social a:focus-visible{
  background:var(--c-gold-500);
  color:var(--c-navy-900);
}
.site-footer__bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding-block:var(--space-4);
}
.site-footer__bottom p{
  margin:0;
  color:rgba(255,255,255,.6);
  font-size:var(--fs-small);
}
.site-footer__bottom--legal{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2) var(--space-6);
  align-items:center;
  justify-content:space-between;
}
.site-footer__bottom--legal nav{
  display:flex;
  gap:var(--space-6);
}
.site-footer__bottom--legal nav a{
  color:rgba(255,255,255,.6);
  font-size:var(--fs-small);
  text-decoration:none;
}
.site-footer__bottom--legal nav a:hover,
.site-footer__bottom--legal nav a:focus-visible{
  color:var(--c-white);
}

/* Gold underline reveal on inline content links — §3.5 */
.entry-content a{
  position:relative;
  color:var(--c-navy-800);
  text-decoration:none;
  background-image:linear-gradient(var(--c-gold-600), var(--c-gold-600));
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:0% 2px;
  transition:background-size var(--dur) var(--ease);
}
.entry-content a:hover,
.entry-content a:focus-visible{
  background-size:100% 2px;
}

/* Sticky mobile call bar — §4, <768px only, #1 conversion element */
.mobile-call-bar{
  position:fixed;
  inset-inline:0;
  inset-block-end:0;
  z-index:90;
  display:flex;
  padding-block-end:env(safe-area-inset-bottom, 0);
  box-shadow:var(--shadow-lg);
}
@media (min-width:768px){
  .mobile-call-bar{ display:none; }
}
.mobile-call-bar__call,
.mobile-call-bar__whatsapp{
  flex:1 1 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-height:60px;
  font-weight:600;
  text-decoration:none;
}
.mobile-call-bar__call{
  background:var(--c-gold-500);
  color:var(--c-navy-900);
}
.mobile-call-bar__whatsapp{
  background:var(--c-success);
  color:var(--c-white);
}

@media (max-width:767.98px){
  .site-footer{
    padding-block-end:calc(60px + env(safe-area-inset-bottom, 0px));
  }
}