/* =====================================================================
   BRB TEMPS — BLENDED SITE STYLESHEET (HEADER + FOOTER ONLY)
   Every rule in this file is scoped to .site-header / .site-footer —
   nothing here applies to page body content, which is styled separately
   by the Coral Template.

   Colours below are the client's own Squarespace Site Styles values,
   read from the header's inline custom-property overrides and the
   [data-section-theme="bright-inverse"] block in the site's own
   compiled CSS (brbtemps.co.uk, template "buttercup-guitar-drts"):
     --brb-white       lightAccent-hsl   0,0%,100%          (header + footer background)
     --brb-accent      accent-hsl        182.34,100%,40.2%  (nav text, border, CTAs)
   ("bright-inverse", the footer's section theme, is a WHITE background
   with ACCENT-coloured text — not a dark section — despite the name.)

   Fonts: the live site pulls 'tondo' (headings/buttons) and
   'halyard-display' (body) from Adobe Typekit, a kit tied to the
   brbtemps.co.uk domain. That kit won't serve these faces from the
   Coral Template's own domain unless the client's Typekit project is
   updated to include it, so both fall back to a plain sans-serif stack
   below until that's confirmed.
   ===================================================================== */

:root{
	--brb-white:#ffffff;
	--brb-accent:#00b3ba;
	--brb-heading-font:'tondo','Poppins',Arial,Helvetica,sans-serif;
	--brb-body-font:'halyard-display','Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* ---- Base resets, scoped to the header/footer/mobile-menu only (never the
   page body). .header-menu is included as its own root alongside .site-header/
   .site-footer because it's a sibling of <header> in the markup, not a
   descendant of .site-header — see the note above .header-menu itself. ---- */
.site-header,
.site-header *,
.site-header *::before,
.site-header *::after,
.site-footer,
.site-footer *,
.site-footer *::before,
.site-footer *::after,
.header-menu,
.header-menu *,
.header-menu *::before,
.header-menu *::after{
	box-sizing:border-box;
}
.site-header a,
.site-footer a,
.header-menu a{
	text-decoration:none;
	color:inherit;
}
.site-header ul,
.site-header li,
.site-footer ul,
.site-footer li,
.header-menu ul,
.header-menu li{
	list-style:none;
	margin:0;
	padding:0;
}
.site-header img,
.site-footer img,
.header-menu img{
	max-width:100%;
	display:block;
	height:auto;
}
.site-header,
.site-footer,
.header-menu{
	font-family:var(--brb-body-font);
	font-weight:300;
	letter-spacing:.05em;
	line-height:1.4em;
	-webkit-font-smoothing:antialiased;
}
.site-header .btn,
.site-footer .btn,
.header-menu .btn,
.site-header .btn--border,
.site-header .btn--tertiary,
.site-footer .btn--tertiary{
	font-family:var(--brb-heading-font);
	font-weight:400;
	letter-spacing:.02em;
	text-decoration:none;
	cursor:pointer;
}

/* ================================= HEADER ================================= */
.site-header{
	position:relative;
	z-index:10;
	background-color:var(--brb-white);
	border-bottom:1px solid var(--brb-accent);
}
.site-header .header-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:1.9vw;
	width:100%;
	max-width:1500px;
	margin:0 auto;
	padding:2.8vw 2.5vw;
	box-sizing:border-box;
}
@media (min-width:768px){
	.site-header .header-inner{ padding:1.4vw 1.2vw; }
}

/* ---- Logo ---- */
.site-header .header-title-logo{ flex-shrink:0; }
.site-header .header-title-logo a{ display:inline-block; }
.site-header .header-title-logo img{ max-height:50px; width:auto; }
/* Overrides the Coral Template's default link-hover fade so the logo doesn't
   dim on hover. */
.site-header .header-title-logo a:hover,
.site-header .header-title-logo a:hover img{
	opacity:1 !important;
}
/* Client's own site renders the logo at up to 139px tall on desktop. */
@media (min-width:1025px){
	.site-header .header-title-logo img{ max-height:139px; }
}

/* ---- Desktop nav ----
   .header-nav has margin-left:auto so it (and everything after it — the CTA
   buttons, social icons) sits right-aligned against the logo, rather than
   hugging it on the left as the live Squarespace theme does. */
.site-header .header-title-nav-wrapper{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:2.8vw;
	flex:1 1 auto;
	min-width:0;
}
.site-header .header-nav{ margin-left:auto; }
.site-header .header-nav-list{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:1.9vw;
}
.site-header .header-nav-item > a{
	position:relative;
	display:inline-block;
	padding:.1em 0;
	font-family:var(--brb-heading-font);
	font-size:18.7px;
	font-weight:400;
	letter-spacing:.07em;
	color:var(--brb-accent);
}
.site-header .header-nav-item--active > a,
.site-header .header-nav-item > a[aria-current="page"]{
	background-image:linear-gradient(currentColor,currentColor);
	background-repeat:repeat-x;
	background-size:1px 1px;
	background-position:0 calc(100% - .1em);
}
/* ---- Social icons + CTA ---- */
.site-header .header-actions{
	display:flex;
	align-items:center;
	gap:1.9vw;
}
.site-header .header-actions-action--cta{
	display:flex;
	align-items:center;
	gap:.9vw;
}
.site-header .header-actions-action--social{
	display:flex;
	align-items:center;
	gap:1.4vw;
}
/* 50px — visually matches the client's own live site once rendered (their
   31px source value reads smaller in a browser than expected). Locked down
   with min/max-width/height (not just width/height) because a flex item's
   rendered size can be driven by flex-basis/flex-shrink rather than by
   width/height alone — if something upstream (the Coral Template's own base
   icon styles) sets those, plain width/height can lose even with !important;
   min/max pin the box regardless of how flex-basis resolves. */
.site-header .header-actions-action--social a.icon,
.header-menu-social a.icon{
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	flex:0 0 auto !important;
	width:50px !important;
	height:50px !important;
	min-width:50px !important;
	min-height:50px !important;
	max-width:50px !important;
	max-height:50px !important;
	overflow:hidden;
}
.site-header .header-actions-action--social a.icon{ color:var(--brb-accent); }
/* White, against the mobile overlay's accent-coloured background. */
.header-menu-social a.icon{ color:var(--brb-white); }
.site-header a.icon svg,
.header-menu a.icon svg{
	display:block;
	width:100% !important;
	height:100% !important;
	fill:currentColor;
}

.site-header .btn,
.header-menu .btn{
	display:inline-block;
	padding:1rem 1.3rem;
	font-size:.9rem;
	line-height:1.2em;
	border-radius:8px;
	white-space:nowrap;
}
.site-header .btn--border{
	border:2px solid var(--brb-accent);
	color:var(--brb-accent);
	background:transparent;
	transition:background-color .1s linear,color .1s linear;
}
.site-header .btn--border:hover{
	background-color:var(--brb-accent);
	color:var(--brb-white);
}
.site-header .btn--solid{
	border:2px solid var(--brb-accent);
	background-color:var(--brb-accent);
	color:var(--brb-white);
	transition:background-color .1s linear,opacity .1s linear;
}
.site-header .btn--solid:hover{ opacity:.85; }
/* Inverse of .btn--solid — used inside the mobile overlay, whose background
   is already the accent colour (see .header-menu below), so the button needs
   to read as white-with-accent-text instead. Scoped to .header-menu, not
   .site-header, since the overlay lives outside <header> in the markup. */
.header-menu .btn--menu-solid{
	border:2px solid var(--brb-white);
	background-color:var(--brb-white);
	color:var(--brb-accent);
	transition:opacity .1s linear;
}
.header-menu .btn--menu-solid:hover{ opacity:.85; }

/* ---- Burger button ---- */
.site-header .header-burger{
	display:none;
	align-items:center;
	justify-content:center;
	background:0 0;
	border:0;
	padding:0;
	cursor:pointer;
}
/* While the menu is open, detach the button from the header's normal flow and
   pin it to the viewport's top-right so it stays on top of the full-page
   overlay (and in place if the page happened to be scrolled) — otherwise it
   would be visually buried under .header-menu's z-index:1000. Left alone
   (in-flow, part of .header-inner) while closed.

   That alone isn't enough, though: .site-header itself establishes a
   stacking context (position:relative + z-index:10), and .header-menu is now
   a SIBLING of <header>, not a descendant of .site-header (see the note by
   .header-menu below). So .header-menu's z-index:1000 is compared against
   .site-header's z-index:10 — not against the burger's z-index:1001 directly
   — and the whole header (burger included) would lose and render under the
   overlay. Raising .site-header's own z-index above the overlay's while open
   fixes that; hiding everything in the header except the burger (next rule)
   stops the rest of the header bar (logo, background, border) from
   reappearing on top of the overlay along with it. */
body.header--menu-open .site-header{
	z-index:1002;
	background-color:transparent;
	border-bottom-color:transparent;
}
body.header--menu-open .site-header .header-title-nav-wrapper,
body.header--menu-open .site-header .header-actions{
	visibility:hidden;
}
body.header--menu-open .site-header .header-burger{
	position:fixed;
	top:20px;
	right:20px;
	z-index:1001;
}
.site-header .burger-box{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:35px;
	height:35px;
}
.site-header .burger-inner{ position:relative; width:100%; height:100%; }
.site-header .top-bun,
.site-header .patty,
.site-header .bottom-bun{
	position:absolute;
	display:block;
	top:0;left:0;right:0;bottom:0;
	margin:auto;
	height:2px;
	width:100%;
	background-color:var(--brb-accent);
	transition:transform 250ms cubic-bezier(.2,.6,.3,1),width 250ms cubic-bezier(.2,.6,.3,1);
}
.site-header .top-bun{ transform:translateY(-9.5px); }
.site-header .bottom-bun{ transform:translateY(9.5px); }
.site-header .burger--active .top-bun{ transform:translateX(3.5px) rotate(-135deg); width:28px; }
.site-header .burger--active .bottom-bun{ transform:translateX(3.5px) rotate(135deg); width:28px; }
.site-header .burger--active .patty{ transform:scale(0); }
/* The bars turn white once the menu is open, to stay visible as an "X" against
   the overlay's own accent-coloured background instead of disappearing into it. */
body.header--menu-open .site-header .top-bun,
body.header--menu-open .site-header .patty,
body.header--menu-open .site-header .bottom-bun{
	background-color:var(--brb-white);
}

/* ---- Mobile overlay menu ----
   Note: .header-menu is a SIBLING of <header> in the markup (see the comment
   in Header.txt), not nested inside .site-header — that's deliberate, so it
   can't inherit an opacity/filter effect the Coral Template might apply to
   <header> itself. Every selector below is therefore scoped to .header-menu
   directly rather than ".site-header .header-menu...". */
.header-menu{
	display:none;
	position:fixed;
	z-index:1000;
	top:0;right:0;bottom:0;left:0;
	flex-direction:column;
	align-items:flex-start;
	gap:2rem;
	text-align:left;
	padding:8vh 10vw;
	overflow-y:auto;
	background-color:var(--brb-accent);
	color:var(--brb-white);
	opacity:0;
	visibility:hidden;
	transition:visibility 600ms cubic-bezier(.4,0,.2,1),opacity 400ms cubic-bezier(.4,0,.2,1);
}
body.header--menu-open{ overflow:hidden; }
body.header--menu-open .header-menu{
	opacity:1;
	visibility:visible;
}
/* flex:1 makes this fill all the vertical space the bottom-pinned socials/
   buttons group (below) doesn't need, and justify-content:center then
   centres the links within that space — restoring their original vertically-
   centred position instead of sitting flush at the top. */
.header-menu-nav-list{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	flex:1 1 auto;
	gap:1.2rem;
}
.header-menu-nav-item a{
	font-family:var(--brb-heading-font);
	font-size:8vw;
	color:var(--brb-white);
}
@media (min-width:576px){
	.header-menu-nav-item a{ font-size:6vw; }
}
.header-menu-nav-item--active a{
	background-image:linear-gradient(currentColor,currentColor);
	background-repeat:repeat-x;
	background-size:1px 1px;
	background-position:0 calc(100% - .1em);
}
.header-menu-actions{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:1rem;
}
.header-menu-social{
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:1rem;
}

/* ---- Desktop/mobile switch ----
   The live theme switches at "(pointer:coarse) and max-width:1024px, OR
   max-width:799px" — simplified here to a single 1024px breakpoint. */
@media (max-width:1024px){
	.site-header .header-nav,
	.site-header .header-actions-action--social,
	.site-header .header-actions-action--cta{ display:none; }
	.site-header .header-burger{ display:flex; }
	.header-menu{ display:flex; }
}

/* ================================= FOOTER ================================= */
.site-footer{
	background-color:var(--brb-white);
	color:var(--brb-accent);
	padding:3vw 2.5vw;
}
/* Two columns per the client's mockup: .footer-contact (email/phone) left-
   aligned on the left, .footer-meta (company/Terms button/Powered By) stacked
   and right-aligned on the right. Wraps to a single centred column once the
   two no longer comfortably fit side by side. */
.site-footer .footer-bar-inner{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;
	gap:1.5rem 3vw;
	max-width:1500px;
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
}
.site-footer .footer-contact{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	text-align:left;
	gap:.5rem;
	font-size:1.1rem;
	min-width:0;
}
.site-footer .footer-contact a{ overflow-wrap:break-word; word-break:break-word; }
.site-footer .footer-meta{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	text-align:right;
	gap:1rem;
	min-width:0;
	max-width:100%;
}
/* align-items:stretch (above) makes every child of this column fill the
   width of the widest one — the company text — which is what makes the
   Terms of Business button below match its width. */
.site-footer .footer-company{
	margin:0;
	font-size:1.1rem;
	color:var(--brb-accent) !important;
	overflow-wrap:break-word;
	word-break:break-word;
}
.site-footer .btn--tertiary{
	display:inline-block;
	padding:.7em 1.6em;
	border-radius:8px;
	background-color:var(--brb-accent);
	color:var(--brb-white);
	font-size:.85rem;
	text-align:center;
	white-space:nowrap;
	box-sizing:border-box;
}
.site-footer .footer-powered-by{
	font-size:.8rem;
}
/* Tablet (down to 768px) keeps the same two-column, left/right-aligned
   layout as desktop — only true mobile (≤767px) drops to a single column.
   Below that, everything is left-aligned rather than centred. Relying on
   flex-wrap alone to stack the two columns on narrow viewports was fragile:
   footer-meta's width is tied to the company-text's un-wrapped natural width
   (see the align-items:stretch note above), which could just barely exceed
   the viewport before wrapping ever kicked in, pushing content off the right
   edge of the page. Forcing flex-direction:column here removes that
   row-width calculation entirely. */
@media (max-width:767px){
	.site-footer .footer-bar-inner{
		flex-direction:column;
		align-items:flex-start;
		justify-content:flex-start;
		text-align:left;
	}
	.site-footer .footer-contact,
	.site-footer .footer-meta{ align-items:flex-start; text-align:left; width:100%; }
}