/*
 * premium.css — Global Foundation Layer
 * USBType-C child theme — loaded last (after design-tokens, style.css, blocksy-parent)
 * Scope: site-wide interactive baseline, button unification, typography rhythm,
 *        accessibility (focus rings, reduced-motion), header/logo polish.
 * NOT responsible for WooCommerce product/cart page detail styling (separate layer).
 */

/* =====================================================================
   1. SMOOTH SCROLL + SELECTION COLOR
   ===================================================================== */

html {
  scroll-behavior: smooth;
}

::selection {
  background-color: var(--accent-2, #0048FF);
  color: #fff;
}

/* =====================================================================
   2. ACCESSIBLE FOCUS RINGS
   Replaces browser default only when :focus-visible applies, so mouse
   users don't see rings while keyboard users do.
   ===================================================================== */

/* Remove browser outline as a blanket reset only via :focus (not :focus-visible) */
*:focus {
  outline: none;
}

/* Restore a branded ring for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.button:focus-visible,
.wp-element-button:focus-visible {
  outline: 2px solid var(--accent-2, #0048FF);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =====================================================================
   3. UNIFIED BUTTON SYSTEM
   Primary: solid brand blue, white text (≥4.5:1 contrast).
   Secondary/outline: transparent bg, 1px border, accent text.
   All buttons: ≥44px height, --radius-md radius, 600 weight, 150ms transitions.
   ===================================================================== */

/* ---- Shared button base ---- */
.btn,
.button,
.wp-element-button,
a.button,
.wc-block-components-button,
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.625rem 1.375rem;
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-fast, 150ms ease),
    color var(--transition-fast, 150ms ease),
    border-color var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease);
}

/* ---- Primary button — solid brand blue ---- */
.btn.primary,
.btn-primary,
.button.alt,
.button.checkout-button,
.button.single_add_to_cart_button,
.single_add_to_cart_button,
.button.add_to_cart_button,
.add_to_cart_button,
.wc-block-components-button,
input[type="submit"].button,
.wp-element-button {
  background-color: var(--wp--preset--color--accent-2, var(--accent-2, #0048FF)) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: none;
}

.btn.primary:hover,
.btn-primary:hover,
.button.alt:hover,
.button.checkout-button:hover,
.button.single_add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.button.add_to_cart_button:hover,
.add_to_cart_button:hover,
.wc-block-components-button:hover,
input[type="submit"].button:hover,
.wp-element-button:hover {
  background-color: #0039CC !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 72, 255, 0.25) !important;
}

.btn.primary:active,
.btn-primary:active,
.button.alt:active,
.button.checkout-button:active,
.button.single_add_to_cart_button:active,
.single_add_to_cart_button:active,
.button.add_to_cart_button:active,
.add_to_cart_button:active,
.wc-block-components-button:active,
input[type="submit"].button:active,
.wp-element-button:active {
  background-color: #002FA6 !important;
  color: #fff !important;
  transform: translateY(0);
  box-shadow: none !important;
}

/* ---- Secondary/outline button ---- */
.btn.secondary,
.btn-secondary,
.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.wp-element-button) {
  background-color: transparent;
  color: var(--accent-2, #0048FF);
  border: 1px solid var(--accent-2, #0048FF);
}

.btn.secondary:hover,
.btn-secondary:hover {
  background-color: var(--accent-2-light, rgba(0, 72, 255, 0.08));
  color: var(--accent-2, #0048FF);
}

/* ---- Account & form submit buttons (login/register/save) ----
   These carry .button but none of the primary classes, so they fell through
   to the ghost rule above and rendered as an outline. They are the primary
   action of their form — promote them to solid brand blue. */
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-ResetPassword button,
.woocommerce-EditAccountForm button[type="submit"],
button[name="login"],
button[name="register"],
button[name="save_account_details"],
button[name="save_address"] {
  background-color: var(--accent-2, #0048FF) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
.woocommerce-ResetPassword button:hover,
.woocommerce-EditAccountForm button[type="submit"]:hover,
button[name="login"]:hover,
button[name="register"]:hover,
button[name="save_account_details"]:hover,
button[name="save_address"]:hover {
  background-color: #0039CC !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 72, 255, 0.25) !important;
}

/* =====================================================================
   4. LINK STYLES
   Brand-accent links with smooth underline/hover.
   ===================================================================== */

a {
  color: var(--accent-2, #0048FF);
  text-underline-offset: 2px;
  transition: color var(--transition-fast, 150ms ease),
              text-decoration-color var(--transition-fast, 150ms ease);
}

a:hover {
  color: #0039CC;
}

/* Navigation links — no underline */
.ct-header a,
.ct-header .ct-menu-link,
nav a {
  text-decoration: none;
}

.ct-header .ct-menu-link:hover {
  color: var(--accent-2, #0048FF) !important;
}

/* Nav active/current item */
.ct-header .current-menu-item > a,
.ct-header .current-page-ancestor > a {
  color: var(--accent-2, #0048FF) !important;
}

/* =====================================================================
   5. TYPOGRAPHY POLISH
   Base heading rhythm (DM Sans 600–700, tight line-height 1.15–1.2).
   Body rhythm already set by Blocksy to 1.65 — we tighten headings.
   Prose max-width on long-form content.
   ===================================================================== */

body {
  font-family: var(--font-primary, 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* P2-6: override Blocksy's blue-grey body text with brand near-black */
  color: var(--accent, #0A0A0A);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--accent, #0A0A0A);
}

h1 { font-size: clamp(2rem, 4vw, 3rem);    line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.15; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.2; }
h4 { font-size: 1.25rem; line-height: 1.25; }
h5 { font-size: 1.0625rem; line-height: 1.3; }
h6 { font-size: 0.9375rem; line-height: 1.35; }

/* Prose max-width — applies only to long-form page/post content */
.entry-content,
.wp-block-post-content,
article.page .entry-content {
  max-width: 65ch;
}

/* Keep WooCommerce page content full-width */
.woocommerce .entry-content,
.woocommerce-page .entry-content {
  max-width: none;
}

/* =====================================================================
   6. HIDE "HOME" PAGE TITLE ON FRONT PAGE ONLY
   The homepage renders <h1 class="page-title">Home</h1> inside
   .hero-section .entry-header. Hide that element only when body.home
   is present. Keep all other page titles intact.
   ===================================================================== */

body.home .hero-section .entry-header,
body.home .hero-section .page-title,
body.home > .ct-container .entry-header .page-title,
body.home [data-prefix="single_page"] .entry-header {
  display: none !important;
}

/* =====================================================================
   7. HEADER / LOGO POLISH
   Increase logo size; comfortable header padding; hover/active/focus on nav.
   ===================================================================== */

/* Logo image sizing */
[data-id="logo"] .default-logo,
[data-id="logo"] img {
  height: 44px;
  width: auto;
  max-width: none;
}

/* Header padding */
[data-header*="type-1"] .ct-header [data-row*="middle"] {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Nav item hover underline accent */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
  position: relative;
  transition: color var(--transition-fast, 150ms ease);
}

[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: var(--accent-2, #0048FF);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-fast, 150ms ease);
  border-radius: 1px;
}

[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a:hover::after,
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-menu-item > a::after {
  transform: scaleX(1);
}

/* =====================================================================
   8. TRANSITIONS — links, buttons, cards
   ===================================================================== */

a,
.btn,
.button,
.wp-element-button,
.entry-card,
.product,
.ct-card {
  transition-duration: 150ms;
  transition-timing-function: ease;
}

/* =====================================================================
   9. MOTION — prefers-reduced-motion
   Honour the OS setting by cutting all animation/transition durations to
   near-zero and disabling scroll-behavior.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   10. CONTAINER MAX-WIDTH
   Consistent cap to avoid ultra-wide layouts (Blocksy already sets
   --theme-normal-container-max-width:1290px, so this is a light confirm).
   ===================================================================== */

.ct-container,
.ct-container-narrow {
  width: 100%;
}

/* =====================================================================
   11. RESPONSIVE — touch targets, no horizontal overflow
   ===================================================================== */

@media (max-width: 767px) {
  .btn,
  .button,
  .wp-element-button,
  a.button,
  input[type="submit"] {
    min-height: 48px;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Prevent horizontal scroll on small screens */
  body {
    overflow-x: hidden;
  }
}

@media (max-width: 1023px) {
  h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
  h2 { font-size: clamp(1.375rem, 4vw, 2rem); }
}

/* =====================================================================
   12. STICKY FOOTER — flex column layout (P0-1)
   Makes the page a flex column so the footer is always pinned to the
   bottom even on short pages (empty cart, thin product pages).
   The site-footer block is injected via blocksy:footer:after (inside
   #main-container) so it becomes a natural flex child.
   ===================================================================== */

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

#main-container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 100dvh;
}

#main-container > #main,
#main-container > .site-main {
  flex: 1 0 auto;
}

/* ── Full-bleed homepage sections ──────────────────────────────────────
   WP's .is-layout-constrained caps direct children of .entry-content at
   ~750px. Our homepage sections are designed full-width (each has its own
   inner .container that re-centers content at max 1200px), so break them
   out to the full viewport width on the front page. */
.home .entry-content.is-layout-constrained > *,
.home .entry-content > * {
  max-width: none;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.home .entry-content { max-width: none; }
html, body { overflow-x: hidden; }
/* Each section's own CSS already constrains + centers its inner container
   (.hero-inner, .container, etc.). We only full-bleed the section wrappers
   above; do NOT override inner widths here (that fought hero.css). */
.hero { max-width: 100vw; overflow-x: hidden; }
.hero-background { max-width: 100vw; overflow: hidden; }
/* Mobile hero: cap inner to viewport (hero.css allows up to 800px which
   overflows narrow screens) and clamp the heading so it wraps. */
@media (max-width: 600px) {
  .hero .hero-inner { max-width: 100%; min-width: 0; padding-inline: 1.25rem; box-sizing: border-box; }
  .hero .hero-content { max-width: 100%; }
  /* P2-5: hero H1 must not clip — force wrapping at narrow viewports */
  .hero .hero-content h1,
  .hero h1 {
    font-size: 1.25rem !important;  /* ~20px — fits "Premium USB-C Accessories" on one line at 360px+ */
    line-height: 1.2;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    display: block;
    width: calc(100vw - 3rem) !important;
    max-width: calc(100vw - 3rem) !important;
    letter-spacing: -0.01em;
    text-align: center;
  }
  .hero .hero-subtitle {
    font-size: 0.875rem !important;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal !important;
    /* Clamp to viewport width minus horizontal padding */
    display: block;
    width: calc(100vw - 3rem) !important;
    max-width: calc(100vw - 3rem) !important;
    line-height: 1.55;
    text-align: center;
  }
}

/* ── Cable Finder page: entry-content is already full-width here, so DON'T full-bleed
   (that pushed the section off-center). Just let the blue section fill its container
   and hide the redundant page title. ── */
/* cable-finder.css already full-bleeds the section (width:100vw + -50vw margins +
   :has() escape); do NOT override its margins here. Only hide the redundant title. */
.page-id-438 .entry-header,
.page-id-438 .page-title { display: none !important; }

/* =====================================================================
   P2-5: MOBILE FIXES — ≤600px
   ===================================================================== */

@media (max-width: 600px) {
  /* Hero H1 / subtitle: prevent clipping + ensure wrapping */
  .hero .hero-content h1,
  .hero-section h1,
  .entry-header h1,
  .page-title {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }

  /* Hamburger / menu trigger: ≥44×44px touch target, visible icon colour */
  /* Blocksy mobile trigger: .ct-toggle-dropdown-menu, .ct-header-toggle */
  .ct-toggle-dropdown-menu,
  .ct-header-toggle,
  [data-id="mobile-trigger"],
  .mobile-menu-trigger,
  button.ct-toggle-dropdown-menu {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Force hamburger icon/bars to brand near-black (prevents white-on-white) */
  .ct-toggle-dropdown-menu svg,
  .ct-header-toggle svg,
  [data-id="mobile-trigger"] svg,
  .mobile-menu-trigger svg,
  .ct-toggle-dropdown-menu .ct-icon,
  .ct-header-toggle .ct-icon {
    color: var(--accent, #0A0A0A) !important;
    fill: var(--accent, #0A0A0A) !important;
    stroke: var(--accent, #0A0A0A) !important;
  }

  /* Also target the three-bar spans Blocksy sometimes uses */
  .ct-toggle-dropdown-menu span,
  .ct-header-toggle span {
    background-color: var(--accent, #0A0A0A) !important;
  }

  /* Mobile Best Sellers card: ensure price visible */
  .featured-products .product-card .product-price,
  .best-sellers .product-card .product-price,
  .woocommerce ul.products li.product .price,
  [data-products] .product .price {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--accent, #0A0A0A);
    display: block;
  }
}

/* =====================================================================
   P2-6: GLOBAL TOKEN CLEANUP
   ===================================================================== */

/* Reduce header height from ~120px to ~76px */
/* Blocksy uses data-row="middle" for the main header row */
[data-header] [data-row="middle"],
.ct-header [data-row="middle"],
.site-header [data-row="middle"] {
  min-height: 76px;
}

/* Also target the overall header element if it has an explicit height */
.ct-header,
#header,
.site-header {
  --theme-header-height: 76px;
}

/* P2-6: Footer legal text — ensure ≥AA contrast (#737373 on white = 4.6:1 ✓) */
/* Verify the site-footer legal small text is at least muted (#737373) */
.site-footer .footer-legal,
.site-footer .footer-copyright,
.site-footer [class*="legal"],
.site-footer [class*="copyright"],
.site-footer small {
  color: var(--muted, #737373);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* ── SEO content pass: blog quick-answer blocks, updated line, post tables ── */
.quick-answer {
  border-left: 3px solid var(--brand-blue, #0048FF);
  background: color-mix(in srgb, var(--brand-blue, #0048FF) 5%, transparent);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  border-radius: 0 8px 8px 0;
}
.quick-answer p { margin: 0; }
.post-updated { color: var(--muted, #6b7280); font-size: 0.875rem; margin-bottom: 0.75rem; }
.single-post .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 2rem;
  font-size: 0.9375rem;
  display: block;
  overflow-x: auto;
}
.single-post .entry-content table th,
.single-post .entry-content table td {
  border: 1px solid var(--border, #e5e5e5);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.single-post .entry-content table thead th {
  background: var(--surface, #fafafa);
  font-weight: 600;
}
/* Single-post readability: Blocksy leaves .entry-content left-anchored at
   ~655px inside a full-width container on posts. Center it at a comfortable
   reading measure. Scoped to single posts only (home/shop have their own
   full-bleed rules — do not widen this scope). */
.single-post .entry-content {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
}