/*
Theme Name:   Authentic Child
Theme URI:    https://pooltabledepot.com/
Description:  Child theme of Authentic. Holds local customizations so the parent theme can be updated without losing changes.
Author:       Pool Table Depot
Template:     authentic
Version:      1.0.31
Text Domain:  authentic-child
*/

/* Header "click-to-call" link. Rendered:
   - in the centered header's LEFT slot at >=992px (header_content_left_html
     theme_mod, via csco_get_header_content() in inc/template-tags.php)
   - inside the navbar at <992px (template-parts/header/navbar-primary.php
     override, wrapped in span.cs-d-lg-none)

   Styling deliberately minimal: the parent theme's cart link `.header-cart`
   has zero specific CSS and renders the same `<a><i.cs-icon><span></a>`
   shape correctly across all contexts (centered header, navbar, dark scheme,
   hover, etc.) — so the right pattern for `.header-phone` is to do as little
   as possible and let the inherited cascade handle it. Earlier iterations
   tried `display: inline-flex` and explicit font-size + vertical-align on
   the icon; that broke the cs-icon-phone `:before` glyph in some contexts
   (icon flickered or disappeared) and made the icon visually misaligned
   against the navbar's other icons.

   The only rules here:
     - hover/focus color matches the navbar link hover (`#a8c7bb` from
       theme_mod colors_navbar_main_links_hover)
     - text-decoration: none (override the theme's default link underline)
     - white-space: nowrap so the number doesn't wrap on tight containers
     - small right margin on the icon so the digits don't crowd it
*/
/* Phone link — let the cascade decide the color so it tracks the
   cart and search icons in every context. Specifically:
   - Plain navbar: Customizer rule `.navbar-primary a` lands #474747
     (same as cart and search in the same place).
   - Plain centered header: falls back to global `a {}` rule.
   - On a `.page-header-type-large` page (large hero), the parent's
     own rule paints navbar/header CTAs white — that rule lists
     .header-cart, .navbar-search, .navbar-toggle, .navbar-scheme-toggle,
     .nav > li > a, .site-title, .navbar-widgets-btn — but NOT
     .header-phone (the parent doesn't know about our element).
     The block below mirrors that exact selector pattern for
     .header-phone so it matches the cart side-by-side. */
.header-phone {
	text-decoration: none;
	white-space: nowrap;
}

.header-phone:hover,
.header-phone:focus {
	text-decoration: none;
}

.page-header-type-large .navbar-primary:not(.sticky-nav) .header-phone,
.page-header-type-large .header .header-phone,
.page-header-type-large .topbar .header-phone {
	color: #ffffff;
}

.page-header-type-large .navbar-primary:not(.sticky-nav) .header-phone:hover,
.page-header-type-large .navbar-primary:not(.sticky-nav) .header-phone:focus,
.page-header-type-large .header .header-phone:hover,
.page-header-type-large .header .header-phone:focus {
	color: rgba(255, 255, 255, 0.75);
}

/* Phone icon is inline SVG (migration 0015). currentColor on stroke +
   fill: none follows the .header-phone color through the cascade,
   including hover. */
.header-phone-icon {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	margin-right: 0.4em;
	stroke: currentColor;
	fill: none;
}

.header-phone .phone-number {
	vertical-align: middle;
}

/* In the navbar context (mobile), suppress the phone-number text so the
   phone link is icon-only — symmetric with the cart icon and search
   icon that sit beside it. Zero out the icon's right margin since
   there's no following text to space away from. */
.navbar-primary .header-phone .phone-number {
	display: none;
}

.navbar-primary .header-phone-icon {
	margin-right: 0;
}

/* Mobile (<992px): the parent template places .navbar-brand (logo) inside
   the same flex column as the hamburger toggle. The logo's intrinsic
   width (~156px) overflows that column and visually collides with the
   phone/cart/search icon group on the right.
   Pull the brand out of normal flow and place it at the midpoint of the
   available space BETWEEN the hamburger and the right icon group — not
   at viewport center. Measured at 375px viewport: hamburger area ends at
   ~44px, icon group starts at ~245px; midpoint = ~144px. Viewport center
   is at 187px, so we shift left by ~43px. The shift is approximated as
   `-50% - 43px` in the transform — exact for the current right-side
   icon set (phone + cart + search ≈ 110px), close enough for small
   variations in viewport width since the icon group anchors to the
   right padding and the hamburger to the left. */
@media (max-width: 991.98px) {
	.navbar-primary .navbar {
		position: relative;
	}

	.navbar-primary .navbar-brand {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(calc(-50% - 43px), -50%);
		z-index: 0;
	}
}

/* Offcanvas (mobile slide-out menu): phone link shown UNDER the nav
   menu items (HOME / SHOP / ABOUT / CONTACT) but BEFORE the other
   sidebar-offcanvas widgets (Free Shipping text, Featured products
   list, etc.). Achieved via CSS flex order — the nav_menu widget
   renders first in DOM, my .offcanvas-phone div renders last in DOM
   (after dynamic_sidebar in the template), but order: 2 lifts it
   above the other widgets at the layout stage.

   The .offcanvas-inner element already provides padding-left: 32px,
   which is where the menu items sit. The .offcanvas-phone wrapper
   uses NO extra padding-left so the phone link is flush with the
   menu items' left edge.

   Brand teal `#126f7f` (same color used for prices and primary
   buttons in Customizer Additional CSS) is the prominent color
   for the phone CTA — icon + text both inherit it via the SVG's
   `stroke="currentColor"`. */
.offcanvas-inner {
	display: flex;
	flex-direction: column;
}

.offcanvas-inner > * {
	order: 3;
}

.offcanvas-inner > .widget_nav_menu {
	order: 1;
	/* Tighten the gap between the menu items and the phone CTA below.
	   The widget's default margin-bottom is 32px which feels too airy
	   given the CTA is a related "next step" for the user. */
	margin-bottom: 8px;
}

.offcanvas-inner > .offcanvas-phone {
	order: 2;
	padding: 0;
	margin: 0;
}

.offcanvas-phone .header-phone {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	color: inherit;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
}

.offcanvas-phone .header-phone:hover,
.offcanvas-phone .header-phone:focus {
	color: #126f7f;
	text-decoration: none;
}

/* Icon rendered as a white phone glyph inside a brand-teal circle —
   makes the CTA stand out under the menu without darkening the
   surrounding text. SVG sized 36x36 with 6px padding gives a 24x24
   drawing area for the existing viewBox. */
.offcanvas-phone .header-phone-icon {
	width: 36px;
	height: 36px;
	padding: 6px;
	box-sizing: border-box;
	background-color: #126f7f;
	border-radius: 50%;
	stroke: #ffffff;
	fill: none;
	flex-shrink: 0;
	margin-right: 0;
}

.offcanvas-phone .header-phone .phone-number {
	display: inline;
}

/* Centered-header tagline (`<p class="site-description">`) prominence
   pass: brand serif (Playfair Display, already loaded by the theme),
   larger size, italic, darker color for legibility on the white header.
   Tightens the gap to the logo (parent default was 1rem).

   Selector uses `.header.header-center` (two classes on the same
   element) to win over the parent's Customizer-injected
   `.header .site-description { font-family: Montserrat; font-size: 0.875rem }`
   which has the same (0,2,0) specificity but loads as inline CSS in
   <head> *after* the child stylesheet link. */
.header.header-center .site-description {
	margin-top: 4px;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 18px;
	font-weight: 400;
	color: #333333;
	letter-spacing: 0.01em;
}

/* On `page-header-type-large` pages (home hero), the centered header
   floats over a dark cover image — keep the description bright so it
   stays legible. */
.page-header-type-large .header.header-center .site-description {
	color: rgba(255, 255, 255, 0.95);
}

/* Tagline under the offcanvas logo. Mirrors the desktop styling above
   (serif, italic, larger, darker). Moved INSIDE the bordered section
   by suppressing the navbar's bottom border and placing it on the
   description itself — so the divider line now sits AFTER the tagline,
   not between it and the logo. */
.offcanvas .navbar.navbar-border {
	border-bottom: none;
}

.offcanvas-description {
	margin: -8px 32px 0;
	padding-bottom: 16px;
	border-bottom: 1px solid #a8c7bb;
	text-align: center;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 18px;
	font-weight: 400;
	color: #333333;
	letter-spacing: 0.01em;
}

/* Cap the centered-header logo height so the default 500x136 image
   doesn't overflow the 130px `header_height` theme_mod on non-large
   hero pages (e.g. /cart/, /about/, /shop/). The parent's
   `.header .logo-image { max-width: none }` deliberately removes the
   global image max-width, but doesn't replace it with a sensible cap.
   Without this, the logo on cart/about pages renders at full 500x136
   natural pixels — visually much bigger than on the home page (where
   `page-header-type-large` swaps in the smaller overlay logo at
   338x135) — and pushes the `<p class="site-description">` tagline
   below the visible header band. */
.header.header-center .logo-image {
	max-height: 80px;
	width: auto;
}

/* ---------------------------------------------------------------------------
   Shop mega-menu typography (desktop only).

   The Shop top-level item carries the parent theme's `menu-columns` class, so
   on desktop its dropdown renders as ONE panel: each level-1 child (Pool
   Tables / Accessories / Included With Purchase) is a column, with its level-2
   items listed beneath. Out of the box the parent styles level-1 and level-2
   almost identically (both 600 weight, same #474747), so the two levels don't
   read as a hierarchy. The rules below use typography alone to separate them:
   level-1 becomes a bold dark heading with a teal underline; level-2 becomes
   lighter, smaller, regular-weight links.

   Scoped to `.navbar-primary .navbar-nav` + min-width 1120px — i.e. the
   desktop nav only. The mobile/offcanvas menu uses a different container and
   keeps its existing accordion behavior, untouched. Teal #126f7f is the
   site's brand accent (same as prices, primary buttons, offcanvas phone). */
@media (min-width: 1120px) {
	/* By default the parent stretches the panel edge-to-edge of the navbar
	   (left:0; right:0) — with only three short columns that leaves a large
	   empty area on the right. Instead let the panel size to its content and
	   center it under the nav bar. The panel is absolutely positioned against
	   .navbar-primary (which the parent already sets position:relative), so
	   left:50% + translateX(-50%) centers it within the header width. */
	.navbar-primary .navbar-nav > li.menu-columns:hover > .sub-menu {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: max-content;
		max-width: 96vw;
	}

	.navbar-primary .navbar-nav > li.menu-columns > .sub-menu {
		padding-top: 1.75rem;
		padding-bottom: 1.75rem;
		column-gap: 3rem;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
	}

	/* Columns size to their content (≈ link width) rather than a fixed cap. */
	.navbar-primary .navbar-nav > li.menu-columns > .sub-menu > li {
		max-width: none;
		min-width: 180px;
	}

	/* Level 1 — column heading */
	.navbar-primary .navbar-nav > li.menu-columns > .sub-menu > li > a {
		font-size: 15px;
		font-weight: 700;
		color: #1a1a1a;
		letter-spacing: 0.07em;
		margin-bottom: 0.65rem;
		padding-bottom: 0.55rem;
		border-bottom: 2px solid #126f7f;
	}

	/* Heading is a label, not a moving link — neutralize the parent's
	   padding-left hover shift; keep only a subtle color cue. */
	.navbar-primary .navbar-nav > li.menu-columns > .sub-menu > li > a:hover,
	.navbar-primary .navbar-nav > li.menu-columns > .sub-menu > li > a:focus {
		padding-left: 0.5rem;
		color: #126f7f;
	}

	/* Headings whose menu item has no real destination (URL left as "#",
	   e.g. "Included With Purchase") are pure group labels — make them
	   non-clickable so clicking doesn't jump to the top of the page. Any
	   heading with a real URL (Pool Tables, Accessories) stays a live link.
	   This auto-covers any future "#" heading too. */
	.navbar-primary .navbar-nav > li.menu-columns > .sub-menu > li > a[href="#"] {
		pointer-events: none;
		cursor: default;
	}

	/* Level 2 — links under the heading */
	.navbar-primary .navbar-nav > li.menu-columns > .sub-menu .sub-menu > li > a {
		font-size: 13px;
		font-weight: 400;
		color: #5b5b5b;
		text-transform: none;
		letter-spacing: 0;
		padding-top: 0.35rem;
		padding-bottom: 0.35rem;
	}

	.navbar-primary .navbar-nav > li.menu-columns > .sub-menu .sub-menu > li > a:hover,
	.navbar-primary .navbar-nav > li.menu-columns > .sub-menu .sub-menu > li > a:focus {
		color: #126f7f;
	}
}

/* ---------------------------------------------------------------------------
   Two-line product loop titles (see functions.php → ptd_loop_product_title_two_line).
   Line 1 = brand (prominent), line 2 = model/title (lighter). Applies on shop,
   category and any product loop. Brand is bold/dark so it's immediately visible;
   model sits below in a calmer weight/color. */
.woocommerce-loop-product__title .ptd-brand {
	display: block;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.25;
}

.woocommerce-loop-product__title .ptd-model {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	font-size: 0.92em;
	color: #5b5b5b;
	line-height: 1.3;
}

/* Brand group caption in the Shop mega-menu (Pool Tables column).
   The `ptd-brand-start` class is placed on the first brand item by migration
   0027. Instead of a rule (which doubled up with the theme's per-row teal
   separator line), a small uppercase "Brands" caption heads the group —
   Presidential / Brunswick / American Heritage — setting it apart from the size
   and type categories above. The first brand's own per-row top line is dropped
   so the caption stands clean. Desktop mega-menu only. */
@media (min-width: 1120px) {
	.navbar-primary .navbar-nav > li.menu-columns .sub-menu li.ptd-brand-start {
		margin-top: 0.7rem;
	}

	.navbar-primary .navbar-nav > li.menu-columns .sub-menu li.ptd-brand-start > a {
		border-top: 0;
	}

	.navbar-primary .navbar-nav > li.menu-columns .sub-menu li.ptd-brand-start::before {
		content: "Brands";
		display: block;
		padding: 0 0.5rem 0.35rem;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #9a9a9a;
	}
}

/* Same "Brands" caption in the mobile off-canvas menu (Pool Tables accordion).
   The brand items carry the same ptd-brand-start class there; the off-canvas
   sub-items indent their <a> by 16px and have no per-row border, so we just add
   the caption with matching indent + top spacing. Scoped to the off-canvas
   (mobile/tablet, < the 1120px nav breakpoint). */
@media (max-width: 1119.98px) {
	.offcanvas-inner li.ptd-brand-start {
		margin-top: 0.6rem;
	}

	.offcanvas-inner li.ptd-brand-start::before {
		content: "Brands";
		display: block;
		padding-left: 16px;
		padding-bottom: 0.2rem;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #9a9a9a;
	}
}