/*
Theme Name: Blocksy Child — Coffs Refrigeration
Theme URI: https://coffsrefrigeration.com.au
Description: Child theme for Coffs Harbour Refrigeration & Air Conditioning. Houses the brand preloader and any custom CSS.
Author: BidPixel
Template: blocksy
Version: 1.0.0
Text Domain: blocksy-child
*/

/* ──────────────────────────────────────────────────────────────────────────
   Transparent header over the hero
   --------------------------------------------------------------------------
   Xpro's sticky adds .xtb-appear past 220px of scroll and fixes the header at
   that point. Until then the header sits over the hero with no background; the
   moment it appears, the solid dark bar returns unchanged.

   Scoped to the front page on purpose: over a white interior page a transparent
   header would leave white nav on white.
   ────────────────────────────────────────────────────────────────────────── */
/* Desktop only. Below 1060px the header is ~200px tall — the utility bar wraps to
   two lines and the CTA drops to its own row — so an overlaid header lands on top
   of the hero's eyebrow and headline. Mobile keeps the solid header in flow. */
@media (min-width:1061px){

	body.home .xpro-theme-builder-header:not(.xtb-appear){
		position:absolute;
		top:0;
		left:0;
		right:0;
		z-index:50;
	}

	body.home .xpro-theme-builder-header:not(.xtb-appear) .chr-utility-bar,
	body.home .xpro-theme-builder-header:not(.xtb-appear) .chr-header-bar{
		background-color:transparent;
		border-bottom-color:transparent;
		-webkit-backdrop-filter:none;
		backdrop-filter:none;
	}

	/* The hero's flat scrim is even top-to-bottom, so nav sitting on a bright frame
	   can lose contrast. A short gradient under the transparent header protects the
	   small utility-bar type without reading as a bar. */
	body.home .xpro-theme-builder-header:not(.xtb-appear)::before{
		content:"";
		position:absolute;
		inset:0 0 auto 0;
		height:190px;
		background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.18) 55%,transparent 100%);
		pointer-events:none;
		z-index:-1;
	}

}

/* The hero centres its content within its own box, which now sits *under* the
   overlaying header — so on shorter windows the eyebrow creeps up behind the nav.
   Extra top padding shifts the optical centre into the visible area below it. */


/* The hero is the whole fold. The accreditation logos used to sit in a strip
   below it and the two shared 100vh between them; the logos now live at the
   foot of the expertise section, so nothing has to be reserved here. Desktop
   only: below 1061px the header sits in normal flow rather than overlaying the
   hero, so a full-height hero would push the header's own space past the fold. */
@media (min-width:1061px){
	body.home #top{
		min-height:100vh;
		/* Viewport-relative so the hero's own content never exceeds the space and
		   pushes the strip past the fold on shorter windows. Top is weighted to
		   clear the header overlaying it. */
		/* top tracks the overlaying header (164px at its tallest) so the headline
		   never starts behind it; bottom yields first when space runs short */
		padding-top:clamp(150px, 20.5vh, 240px);
		padding-bottom:clamp(24px, 3vh, 120px);
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   Services mega menu
   --------------------------------------------------------------------------
   Neither Elementor free nor Xpro free ships a mega-menu widget, so this
   re-tailors Xpro's ordinary two-level dropdown: level one becomes a full-width
   panel, and level two is promoted from a hover flyout into inline columns.

   Desktop only — below 1060px Xpro swaps to its off-canvas panel, where the
   nested lists already behave as a sensible accordion.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width:1061px){

	/* the panel spans the header, so the item must not be the containing block */
	.chr-header-bar .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children{
		position:static;
	}
	/* Xpro's navbar wrapper and the widget itself are both position:relative, so
	   without these the panel measures itself against the 734px menu instead of
	   the 1320px header. */
	.chr-header-bar .elementor-widget-xpro-horizontal-menu,
	.chr-header-bar .xpro-elementor-horizontal-navbar-wrapper{
		position:static;
	}

	/* level one → the panel */
	.chr-header-bar .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children > .xpro-elementor-dropdown-menu{
		position:absolute;
		top:100%;
		left:0;
		right:0;
		width:auto;
		min-width:0;
		max-width:none;
		display:grid;
		grid-template-columns:repeat(4, minmax(0, 1fr));
		gap:8px 40px;
		padding:34px max(28px, calc((100% - 1320px) / 2)) 38px;
		margin:0;
		background:rgba(28,28,28,0.97);
		-webkit-backdrop-filter:blur(14px);
		backdrop-filter:blur(14px);
		border-top:1px solid #333;
		border-radius:0;
		box-shadow:0 24px 40px -28px rgba(0,0,0,.8);
	}

	/* column heading = the service page itself */
	.chr-header-bar .xpro-elementor-horizontal-navbar-nav > li > .xpro-elementor-dropdown-menu > li{
		position:static;
		border-bottom:0;
	}
	.chr-header-bar .xpro-elementor-horizontal-navbar-nav > li > .xpro-elementor-dropdown-menu > li > a{
		display:block;
		padding:0 0 14px;
		font-family:"Sora", system-ui, sans-serif;
		font-weight:600;
		font-size:15px;
		letter-spacing:-0.01em;
		color:#fff;
		border-bottom:1px solid #333;
		white-space:normal;
	}
	.chr-header-bar .xpro-elementor-horizontal-navbar-nav > li > .xpro-elementor-dropdown-menu > li > a:hover{
		color:#2AA0C1;
	}

	/* The level-two rule below re-asserts visibility:visible so the flyouts
	   render as inline columns. visibility is inherited, and a descendant that
	   sets `visible` overrides a hidden ancestor for hit-testing too, so while the
	   panel was closed those columns stayed invisible but hoverable: a band of
	   roughly 1340x250px across the top of the page silently opened the Services
	   menu whenever the mouse crossed it. visibility cannot contain them, but
	   pointer-events also inherits and nothing in the subtree overrides it, so the
	   closed panel is made inert and only becomes interactive once it is open. */
	.chr-header-bar .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children > .xpro-elementor-dropdown-menu{
		pointer-events:none;
	}
	.chr-header-bar .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children:hover > .xpro-elementor-dropdown-menu,
	.chr-header-bar .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children:focus-within > .xpro-elementor-dropdown-menu{
		pointer-events:auto;
	}

	/* level two → inline list, not a flyout */
	.chr-header-bar .xpro-elementor-dropdown-menu .xpro-elementor-dropdown-menu{
		position:static !important;
		display:block !important;
		opacity:1 !important;
		visibility:visible !important;
		transform:none !important;
		width:auto;
		min-width:0;
		padding:14px 0 0;
		margin:0;
		background:none;
		border:0;
		box-shadow:none;
	}
	.chr-header-bar .xpro-elementor-dropdown-menu .xpro-elementor-dropdown-menu > li > a{
		display:block;
		padding:7px 0;
		font-family:"Instrument Sans", system-ui, sans-serif;
		font-size:14px;
		font-weight:400;
		letter-spacing:0;
		text-transform:none;
		color:rgba(245,245,245,0.66);
		white-space:normal;
		transition:color .18s;
	}
	.chr-header-bar .xpro-elementor-dropdown-menu .xpro-elementor-dropdown-menu > li > a:hover{
		color:#2AA0C1;
	}

	/* the second-level caret is meaningless once the list is always open */
	.chr-header-bar .xpro-elementor-dropdown-menu > li > a .xpro-menu-icon,
	.chr-header-bar .xpro-elementor-dropdown-menu > li > a > i{
		display:none;
	}
}

/* Xpro paints its dropdown links with the widget's own background colour and
   draws a pointer + carets that only make sense on a small flyout. */
@media (min-width:1061px){
	.chr-header-bar .xpro-elementor-horizontal-navbar .xpro-elementor-dropdown-menu > li > a{
		background-color:transparent;
		border-radius:0;
	}
	.chr-header-bar .xpro-elementor-horizontal-navbar .xpro-elementor-dropdown-menu > li > a:hover,
	.chr-header-bar .xpro-elementor-horizontal-navbar .xpro-elementor-dropdown-menu > li > a:focus{
		background-color:transparent;
	}
	/* the little diamond pointing at a flyout */
	.chr-header-bar .xpro-elementor-horizontal-navbar-nav > li > .xpro-elementor-dropdown-menu:after{
		display:none;
	}
	/* carets inside the panel — nothing flies out any more */
	.chr-header-bar .xpro-elementor-dropdown-menu .xpro-dropdown-menu-toggle{
		display:none;
	}
	/* Services keeps its caret, but give it room */
	.chr-header-bar .xpro-elementor-horizontal-navbar-nav > li > a > .xpro-dropdown-menu-toggle{
		margin-left:6px;
	}
}

/* The nav links are vertically centred in a bar made tall by the 88px logo, so
   there is ~75px of dead space between a link and the panel below it — enough
   for :hover to drop while the mouse travels down. This bridges it with an
   invisible extension of the link's own hover area, so hover is never lost.
   Scoped to :hover so it cannot intercept anything at rest. */
@media (min-width:1061px){
	.chr-header-bar .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children > a{
		position:relative;
	}
	.chr-header-bar .xpro-elementor-horizontal-navbar-nav > li.menu-item-has-children:hover > a::after{
		content:"";
		position:absolute;
		left:0;
		right:0;
		top:100%;
		height:100px;
	}
}

/* Smooth anchor scrolling, previously handled by Xpro's one-page navigation —
   removed because it throws on menus with sub-items and took the mobile toggle
   down with it. scroll-margin clears the sticky header. */
html{
	scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto;}
}

/* Xpro's off-canvas mobile menu is position:fixed and parked at translateX(100%),
   so on phones it sat at 390-780px and doubled the document's scrollable width,
   letting every page swipe sideways into an empty gutter. body{overflow-x:hidden}
   cannot contain a fixed element, so the root has to do the clipping.
   Scoped to the off-canvas breakpoint on purpose: clipping at the root turns
   <html> into a scroll container, which kills the position:sticky FAQ column.
   The panel only exists below 1061px and the sticky column only engages above
   it, so neither has to give anything up. */
@media (max-width:1060px){
	html{
		overflow-x:clip;
	}
}
#top,#services,#why,#about,#reviews,#faq,#contact,
#commercial-refrigeration,#coolrooms,#freezers,
#split-systems,#ducted-systems,#cassette-systems,#installation-maintenance,
#coffee-machines,#commercial-kitchen,#beverage-systems,#getting-started{
	scroll-margin-top:120px;
}

/* Header compacts on scroll: Xpro adds .xtb-appear past 220px. 164px → ~122px
   (25% shorter) by trimming the bar's padding and the logo, keeping the utility
   bar and its after-hours number visible. */
@media (min-width:1061px){
	.chr-header-bar > .e-con-inner,
	.chr-header-bar img{
		transition:padding .28s ease, height .28s ease;
	}
	header.xtb-appear .chr-header-bar > .e-con-inner{
		padding-top:8px;
		padding-bottom:8px;
	}
	/* Elementor emits .elementor-22 .elementor-element.elementor-element-xxx img
	   — three classes — so this needs three of its own to outrank it. */
	header.xtb-appear .chr-header-bar .elementor-widget-image img{
		height:60px;
	}
	header.xtb-appear .chr-header-bar .elementor-widget-image img,
	.chr-header-bar .elementor-widget-image img{
		transition:height .28s ease;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile header

   Two faults showed up once the header was checked while scrolled on a phone.

   The logo renders 224px wide out of the 334px available at 390px, so the bar
   wrapped onto a second row and stood 178px tall, covering a third of the
   screen. Sizing the logo to the space puts the logo, toggle and Contact button
   back on one row.

   (The bar's 94% background was the other fault found at the same time: page
   text read straight through the scrolled header. That turned out to affect
   desktop as well, so it is fixed on the container in the header template
   rather than here.) */
@media (max-width:1060px){
	/* With both header buttons moved into the drawer the bar is just the logo
	   and the toggle, so the logo gets some of its size back. */
	/* Elementor emits three classes for this image, so both states need three of
	   their own to outrank it; the bare .chr-header-bar form loses. */
	.xpro-theme-builder-header .chr-header-bar .elementor-widget-image img,
	header.xtb-appear .chr-header-bar .elementor-widget-image img{
		height:58px;
	}
}

/* "Contact us" belongs in the drawer, where the Contact button used to sit in
   the bar. The menu is shared between both layouts, so the item carries a class
   and is dropped once the desktop nav takes over and the button reappears. */
@media (min-width:1061px){
	.chr-header-bar li.chr-mobile-only{
		display:none;
	}
}