/* GL Site Fixes — one block per issue. Issue IDs refer to GL_Site_Sweep_Issue_Map.md.
   Rule of thumb: when the root cause is fixed at source, delete the block here. */

/* A1 — "For Professionals" slide-in panel (.gl-pro-panel) is parked off-screen with
   transform:translateX(100%) but stays visible to layout, so every page is 400–840px wide on a
   390px phone (sideways wobble). Hide it while closed; keep the original 0.45s slide.
   Root cause lives in the body-end block emitted by the site-wide PHP (topbar/pro-panel). */
.gl-pro-panel:not(.active) {
	visibility: hidden;
	transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0s linear 0.45s;
}
.gl-pro-panel.active {
	visibility: visible;
	transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0s linear 0s;
}

/* A1 (root cause #2) — the page is wider than the phone on many pages, so mobile browsers expand
   the layout viewport (innerWidth 402–843px on a 390px phone): the header stretches off-screen and
   the whole page renders zoomed-out. Causes: scroll-reveal sections parked at translateX(±80px)
   until they scroll into view (.gl-section, .glc-section, .glhp-slide-*, .wgl-section) and a few
   non-responsive grids (fixed below). `clip` on both html and body keeps the layout viewport at
   device width WITHOUT turning body into a scroll container, so position:sticky keeps working
   (the finder map relies on it). Fallback for browsers without `clip` (iOS < 16) is limited to
   phones/tablets so desktop sticky behaviour is never affected. */
html, body {
	overflow-x: clip;
}
@supports not (overflow: clip) {
	@media (max-width: 800px) {
		html, body { overflow-x: hidden; }
	}
}

/* ------------------------------------------------------------------------------------------
   Non-responsive page components (desktop-only grids/rows that never stack on phones).
   Keyed by component class, never by page ID. Selectors are prefixed with `body` so they beat
   the pages' own <style> blocks (which sit later in the document, inside HTML widgets).
   Delete each block when the page is rebuilt.
   ------------------------------------------------------------------------------------------ */
@media (max-width: 767px) {
	/* B18/B19 — /partner-with-us/, /get-certified/, /black-friday-swatch-promo/: 3 testimonial
	   cards in a fixed 3-column grid (each ~160px wide, third card off-screen). */
	body .glp-testimonials-grid { grid-template-columns: 1fr; }
	/* Same template: sections keep their desktop 80px side padding on phones (210px of content). */
	body .glp-section-dark, body .glp-section-cream { padding-left: 24px; padding-right: 24px; }

	/* /contact-us/ "Discover the world of Great Lengths": fixed 3-column card grid. */
	body .glc-discover-grid { grid-template-columns: 1fr; }

	/* /methods/tape-extensions/ "dark cards": fixed 2-column grid. */
	body .gl-dark-cards { grid-template-columns: 1fr; }

	/* /for-salons/great-lengths-calendar/: centred, non-wrapping tab row (first tab pushed to
	   x = -100px). Let it wrap. */
	body .cal-tabs { flex-wrap: wrap; }

	/* /for-salons/education-training/: centred tab row inside overflow-x:auto — a centred flex
	   row that overflows is unreachable on the left. Left-align while keeping it scrollable;
	   auto margins re-centre it when it fits. */
	body .gl-edutabs { justify-content: flex-start; }
	body .gl-edutabs > :first-child { margin-left: auto; }
	body .gl-edutabs > :last-child { margin-right: auto; }
	/* Same page: inline-styled brochure row (flex, 400px fixed image column) never wraps. */
	body #gl-edupanel-education .wgl-page > div[style*="display: flex"] { flex-wrap: wrap !important; } /* !important: beats the inline style attribute */
	body #gl-edupanel-education .wgl-page > div[style*="display: flex"] > div[style*="flex: 0 0 400px"] { flex: 1 1 100% !important; }
	body #gl-edupanel-education .htp-big-text { padding: 24px 0 0 !important; max-width: none; }
	/* Same page: video placeholder has min-width:400px. */
	body .edu-video-placeholder { min-width: 0 !important; width: 100%; }
}

/* Salon detail pages (children of the finder page 134): the injected hero is a fixed 400px box, so
   on phones the 3-line title + subtitle spill out of it and the subtitle overprints the brown
   "Go back to search" bar beneath. Let the hero grow with its content. Moves into the locator
   plugin's detail template when that view is ported. */
@media (max-width: 767px) {
	body.parent-pageid-134 .gl-detail-hero { height: auto; min-height: 400px; padding: 56px 0; }
	body.parent-pageid-134 .gl-detail-hero h2.gl-hero-title { font-size: 34px; }
}

/* B20 — text below 10px (unreadable, fails accessibility minimums). Only the sub-10px cases are
   raised, to 11px; 10px eyebrows are a design choice and are left alone. Elite page (.gle-*)
   goes away when [gl_elite_salons] replaces the hand-typed page. */
body .gle-eyebrow, body .gle-sec-eyebrow, body .gle-arrow, body .gle-legend-item,
body .gle-ig, body .gle-btn, body .gle-loc { font-size: 11px; }
body .gc-tab-trigger { font-size: 11px; }          /* /our-world/our-craft/ tab labels (9px)   */
body .glc-discover-card span { font-size: 11px; }  /* /contact-us/ discover-card labels (9px)  */

/* B8 — /salon-testimonials/ (page 2748), phones/tablets only. The page has no Elementor content: the
   theme prints the whole page *after the footer* and a setTimeout moves it up. The theme's mobile
   "closeHeroGap" patch runs before that move, measures the hero 959px down (below the footer) and
   sets margin-top:-959px on it — so on phones the page opens half-way through the testimonials with
   the hero off the top. Neutralise the patch here (stylesheet !important beats the inline style) and
   give the title the 36px mobile size the other For-Salons heroes use (education-training, page 204).
   Goes away when the page content moves into the page itself and the theme block is removed. */
@media (max-width: 1024px) {
	body.page-id-2748 .wgl-hero, body.page-id-2748 .wgl-hero > * { margin-top: 0 !important; }
}
@media (max-width: 768px) {
	body.page-id-2748 .wgl-hero-content h1 { font-size: 36px !important; }
}

/* B14 / B22 — category archives and the 404 page render the bare Hello Elementor templates. The
   site already has a treatment for exactly this markup (page-header + page-content > article.post),
   added 2026-07-10 for the search-results page and scoped to body.search-results only. The same rules
   are applied here to blog archives (body.archive, WooCommerce archives excluded — they have their own
   template) and to the 404 page, so all three theme-template pages look the same. Copied verbatim
   from the site stylesheet; if that block changes, change this one. */
body.archive:not(.woocommerce) .page-header, body.error404 .page-header {
	max-width: 1140px; margin: 0 auto; padding: 110px 24px 24px;
	border-bottom: 1px solid rgba(191,160,84,0.25);
}
body.archive:not(.woocommerce) .page-header .entry-title, body.error404 .page-header .entry-title {
	font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 34px; color: #2a2118; letter-spacing: 0.2px;
}
body.archive:not(.woocommerce) .page-header .entry-title span { color: #bfa054; font-style: italic; }
body.archive:not(.woocommerce) .page-header .archive-description,
body.archive:not(.woocommerce) .page-header .archive-description p {
	font-family: 'Lato', sans-serif; font-size: 15px; line-height: 1.6; color: #6b6459; margin: 8px 0 0;
}
body.archive:not(.woocommerce) .page-content, body.error404 .page-content {
	max-width: 1140px; margin: 0 auto; padding: 48px 24px 100px;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px;
}
body.archive:not(.woocommerce) .page-content article.post {
	display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden;
	box-shadow: 0 2px 12px rgba(0,0,0,0.07); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
body.archive:not(.woocommerce) .page-content article.post:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
body.archive:not(.woocommerce) .page-content article.post > a { order: 1; display: block; line-height: 0; }
body.archive:not(.woocommerce) .page-content article.post img { width: 100% !important; height: 190px !important; object-fit: cover; display: block; }
body.archive:not(.woocommerce) .page-content article.post h2.entry-title {
	order: 2; font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 500; margin: 20px 20px 8px; line-height: 1.3;
}
body.archive:not(.woocommerce) .page-content article.post h2.entry-title a { color: #2a2118; text-decoration: none; }
body.archive:not(.woocommerce) .page-content article.post h2.entry-title a:hover { color: #bfa054; }
body.archive:not(.woocommerce) .page-content article.post p { order: 3; font-family: 'Lato', sans-serif; font-size: 14px; line-height: 1.6; color: #6b6459; margin: 0 20px 20px; }
body.archive:not(.woocommerce) .page-content > p, body.error404 .page-content > p { font-family: 'Lato', sans-serif; font-size: 15px; color: #6b6459; grid-column: 1 / -1; }
body.archive:not(.woocommerce) .pagination, body.archive:not(.woocommerce) .nav-links {
	max-width: 1140px; margin: 0 auto 80px; padding: 0 24px; display: flex; gap: 12px; justify-content: center;
}
body.archive:not(.woocommerce) .pagination a, body.archive:not(.woocommerce) .nav-links a,
body.archive:not(.woocommerce) .pagination span, body.archive:not(.woocommerce) .nav-links span {
	font-family: 'Lato', sans-serif; font-size: 13px; padding: 8px 14px; border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; color: #2a2118; text-decoration: none;
}
body.archive:not(.woocommerce) .pagination a:hover, body.archive:not(.woocommerce) .nav-links a:hover { border-color: #bfa054; color: #bfa054; }

/* M1 — mobile menu on the HOME page (reported 7 Oct 2026: hamburger opens a cream panel with
   invisible items and every sub-menu expanded as blank space). The header template's custom CSS
   (Elementor template 5968) styles the phone drawer only for body:not(.home) — dark item text,
   item borders and collapsed sub-menus — and the Customizer "Additional CSS" forces the home header's
   menu links white (meant for the transparent desktop header). Mirror the three drawer rules for the
   home page, phones/tablets only, so the home drawer matches every other page. Delete once the
   :not(.home) scoping is removed from template 5968. */
@media (max-width: 1024px) {
	body.home .elementor-location-header .elementor-nav-menu__container .elementor-nav-menu a,
	body.home .elementor-location-header .elementor-nav-menu__container .elementor-item {
		display: flex;
		justify-content: space-between;
		font-family: "Lato", sans-serif;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 0.3px;
		text-transform: uppercase;
		color: #2a2720 !important;
	}
	body.home .elementor-location-header .elementor-nav-menu__container .elementor-item {
		border-bottom: 1px solid rgba(201, 169, 110, 0.2);
	}
	body.home .elementor-location-header .elementor-nav-menu__container .elementor-nav-menu .sub-menu {
		display: none !important;
	}
}

/* M2 — methods pages (/methods/tape-extensions/, /methods/keratin-bond/, /methods/weft-extensions/) and
   /care/hair-extension-care-guide/. Their pasted <style> lays out .gl-grid, .gl-grid-reverse and
   .gl-grid-video-sm as two columns with an 80px gap and has no phone rule, so on a 390px phone each
   column is ~95–155px wide (reported 7 Oct 2026, tape-extensions). Stack them on phones. */
@media (max-width: 767px) {
	body .gl-grid,
	body .gl-grid-reverse,
	body .gl-grid-video-sm { grid-template-columns: 1fr; gap: 32px; }
}

/* M3 — /browse-salon-by-location/ city rows. Under 960px the page's own CSS makes each row two columns
   (city | button). The "Browse <city> salons →" button doesn't wrap, so on a phone it is wider than its
   column and is cut off at the right edge (Melbourne, Gold Coast, Adelaide…). Put the button under the
   city name on phones. (7 Oct 2026) */
@media (max-width: 600px) {
	body .glf-crow { grid-template-columns: 1fr; gap: 0.85rem; padding: 1.2rem 1.25rem; }
	body .glf-crow-btn { justify-self: start; white-space: normal; max-width: 100%; }
}

/* M4 — /our-world/our-craft/ tabs. On phones the layout is one 1fr column, but 1fr can't shrink below the
   three no-wrap tab labels (~557px), so the column was 557px wide and the tab text ran off the right edge.
   Let the column shrink to the screen and let each label wrap onto two lines so all three tabs fit. */
@media (max-width: 768px) {
	body .gc-tabs-layout { grid-template-columns: minmax(0, 1fr); }
	body .gc-tabs-content { min-width: 0; }
	body .gc-tab-trigger { flex: 1 1 0; min-width: 0; white-space: normal; padding: 12px 6px; letter-spacing: 1.5px; text-align: center; line-height: 1.5; }
}

/* M5 — /cart/ and /checkout/ (any block-editor "wide" block). Hello Elementor gives .alignwide
   margin-inline:-80px at every width, so on phones and tablets the WooCommerce Cart block is pulled 80px
   left: product photos and the shipping label are cut off and there is an empty strip on the right.
   Only screens 1300px and wider have room for the -80px. */
@media (max-width: 1299px) {
	body .alignwide { margin-inline: 0; }
}

/* B20 follow-up — /elite-salons/ badge captions ("Top Distinction", "Excellence Award") carry an inline
   font-size of 0.55rem (8.8px), which the .gle-legend-item rule above doesn't reach. */
body .gle-legend > div > span { font-size: 11px !important; }