/*
Theme Name: PGS Glass Child
Theme URI: https://pgsglass.co.uk
Description: Child theme of the PGS Glass theme. ALL customisations, speed improvements and modern enhancements live here so the original "PGS Glass" theme is never edited and can be restored instantly by switching the active theme back. Built on top of the parent theme by GeoBrand.
Author: PGS Glass
Template: pgs-glass
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pgs-glass-child
*/

/* ==========================================================================
   Custom CSS overrides go below this line.
   Anything here loads AFTER the parent theme, so it wins any styling clash.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX #1 — Desktop mega-menu dropdown: link text dropping BELOW the coloured
   panel (and showing as unreadable white text over the page).

   Cause: the original theme centres the dropdown links vertically with a
   fragile "ghost element + font-size:0" hack. When that is disturbed, the
   link list can no longer sit beside the ghost spacer, so it wraps onto a
   new line and falls below the coloured block.

   Fix: replace the hack with robust flexbox centring. Same look, same panel
   size and colours — but the text now stays reliably inside the panel.
   -------------------------------------------------------------------------- */
#header-container .header-2 .main-menu > .menu-item-has-children .menu-column {
	display: flex;
	align-items: center;      /* vertical centre — reliably */
	height: auto;
	min-height: 420px;        /* keep the original panel height */
	box-sizing: border-box;
	padding: 30px 0;
}

#header-container .header-2 .main-menu > .menu-item-has-children .sub-menu-aligner {
	display: none;            /* ghost spacer no longer needed */
}

#header-container .header-2 .main-menu > .menu-item-has-children .sub-menu {
	width: 100%;
	font-size: 0;             /* keep the two-column link spacing tidy */
}


/* --------------------------------------------------------------------------
   FIX #2 — Mobile: page can be pinched/zoomed out (horizontal overflow).

   Cause: the slide-in mobile menu (#mobile-nav) is a full-screen overlay
   whose decorative background pattern is set to width:110%. The overlay
   doesn't clip its overflow, so that oversized element spills ~10% past
   the screen edge and makes the whole page wider than the phone.

   Fix: clip the overlay so the pattern can't extend past it, plus a global
   guard against any stray horizontal overflow.
   -------------------------------------------------------------------------- */
#mobile-nav {
	overflow: hidden;         /* contain the 110%-wide background pattern */
}

html,
body {
	overflow-x: hidden;       /* safety net: no accidental sideways scroll/zoom */
}


/* --------------------------------------------------------------------------
   "Group of Companies" subsection — appended inside the "About PGS" dropdown.
   A small uppercase label, then the company links (which reuse the dropdown's
   normal link styling).
   -------------------------------------------------------------------------- */

/* Desktop: subheading label */
#header-container .header-2 .main-menu .sub-menu > li.menu-subheading {
	width: 100%;
	margin: 6px 0 14px;
	border-bottom: none;
	padding: 0;
}
#header-container .header-2 .main-menu .sub-menu > li.menu-subheading span {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
}

/* Mobile: subheading label */
#mobile-nav .mobile-nav > .menu-item .sub-menu li.menu-subheading span {
	display: block;
	padding: 8px 10px 2px;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 600;
	opacity: 0.65;
}


/* ==========================================================================
   MODERN POLISH LAYER — Batch 1
   --------------------------------------------------------------------------
   Safe, additive micro-interactions and accessibility/rendering upgrades that
   make the site feel newer without changing the layout or brand. All scoped to
   real selectors. The deeper redesign (type scale, hero, colour treatment)
   comes in a later batch once verified against the live pages.
   ========================================================================== */

/* Crisper text + smooth in-page scrolling + branded tap highlight on mobile */
html { scroll-behavior: smooth; }
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
* { -webkit-tap-highlight-color: rgba(0, 164, 153, 0.15); }

/* Accessibility: a clear focus ring for keyboard users (won't show on click) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #00a499;   /* brand teal */
	outline-offset: 2px;
	border-radius: 3px;
}

/* Primary CTAs: larger tap target + a springy hover lift with soft shadow */
.main-buttons .main-button {
	transition: transform .18s ease, box-shadow .18s ease,
	            background-color .2s ease, color .2s ease, border-color .2s ease;
}
.page-template-tmpl-home .main-section .main-inner .main-buttons .main-button {
	padding: 11px 24px;           /* was 5px 10px — comfortable, modern tap target */
	letter-spacing: .2px;
}
.main-buttons .main-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(25, 35, 66, .18);
}

/* Header "contact" button: same lift treatment */
#header-container .header-1 .contact-info-container .contact-button {
	transition: background-color .2s ease, transform .18s ease, box-shadow .18s ease;
}
#header-container .header-1 .contact-info-container .contact-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(58, 163, 215, .35);
}

/* Home service cards: a subtle lift on hover (on top of the existing brighten) */
.page-template-tmpl-home #hero-container #services-bar .services-column {
	transition: transform .2s ease, background-color .2s ease;
}
.page-template-tmpl-home #hero-container #services-bar .services-column:hover {
	transform: translateY(-3px);
}

/* Respect users who ask for reduced motion (accessibility + comfort) */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}