/*
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.23
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;
}