/* ============================================================================
   SurroundYou Design — WCAG 2.1 AA accessibility fixes  (PUBLISHED)
   Site:  https://surroundyou.me  (WordPress · GeneratePress + GenerateBlocks
          + WooCommerce)
   Apply: Appearance ▸ Customize ▸ Additional CSS  (paste the whole file)
   Status: LIVE since 2026-10-19 — applied via Appearance ▸ Customize ▸ Additional CSS.
           This file is the source of truth for the live copy; keep the two in sync.
   Date:  2026-10-19  (rev 2 — cascade-verified)
   ----------------------------------------------------------------------------
   IMPORTANT — why some rules carry !important:
   The theme/plugins print their own rules at equal-or-higher specificity:
     • GenerateBlocks:  a.gb-button-…        { background: var(--contrast-3) }
     • WP core:         .has-contrast-3-background-color { background: …!important }
     • WooCommerce:     .woocommerce button.button.alt   { background: #7f54b3 }
   A bare-class override LOSES to those. These selectors + !important were
   verified (computed style + pixels) to actually win on the live site.
   Re-check with: studio/ada-audit/verify_final.py
   ============================================================================ */


/* ============================================================================
   1. COLOUR CONTRAST — WCAG 1.4.3 AA (minimum 4.5:1 for normal text)
   ============================================================================ */

/* 1a. Home-page CTA buttons  "Claim Your Complimentary Call" / "Schedule a Call"
   BEFORE: #ffffff on #b2b2be = 2.10:1  ✗ FAIL
   AFTER : #ffffff on #6b6b82 = 5.18:1  ✓ PASS                                  */
a.gb-button-dc1783c9,
a.gb-button-7ca72582 {
  background-color: #6b6b82 !important;   /* darkened --contrast-3, same hue */
  color: #ffffff;
}
a.gb-button-dc1783c9:hover, a.gb-button-dc1783c9:focus, a.gb-button-dc1783c9:active,
a.gb-button-7ca72582:hover, a.gb-button-7ca72582:focus, a.gb-button-7ca72582:active {
  background-color: #222222 !important;
  color: #ffffff;
}

/* 1b. Home newsletter "Subscribe" button
   BEFORE: #ffffff on #b2b2be = 2.10:1  ✗ FAIL
   AFTER : #ffffff on #6b6b82 = 5.18:1  ✓ PASS                                  */
.wp-block-button__link.has-contrast-3-background-color,
#subscribe-submit .wp-block-button__link {
  background-color: #6b6b82 !important;
  color: #ffffff !important;
}

/* 1c. WooCommerce PRICE text (single product + product loops / related)
   BEFORE: #958e09 on #ffffff = 3.41:1  ✗ FAIL
   AFTER : #6b6500 on #ffffff = 6.02:1  ✓ PASS                                  */
div.product p.price,
div.product span.price,
div.product .price,
ul.products li.product .price,
ul.products li.product .price .woocommerce-Price-amount,
.woocommerce-Price-amount.amount {
  color: #6b6500 !important;
}

/* 1d. "Add to cart" — the button's own colour #7f54b3 (white text) = 5.50:1 and
   PASSES; the failure is the *disabled* variant, which adds opacity:.5 and
   blends #7f54b3 over white → #bfaad9 = 2.11:1  ✗ FAIL. A 50%-opacity element
   can never exceed 3.95:1 with white text, so render the disabled state OPAQUE.
   AFTER : #ffffff on #5f5875 = 6.69:1  ✓ PASS (still reads as "inactive")       */
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt[disabled],
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled,
.single_add_to_cart_button[disabled] {
  opacity: 1 !important;
  background-color: #5f5875 !important;
  color: #ffffff !important;
  cursor: not-allowed;
}


/* ============================================================================
   2. LINKS DISTINGUISHED BY COLOUR ONLY — WCAG 1.4.1 A
      In-body links render with text-decoration:none; underline them. Button and
      icon/social links keep no underline.
   ============================================================================ */
.entry-content p a,
.entry-content .wp-block-paragraph a,
.entry-content li:not(.product) a,
.entry-content figcaption a {
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
}
.entry-content a.wp-block-button__link,
.entry-content a.gb-button {
  text-decoration: none !important;
}


/* ============================================================================
   NOTES / NOT IN THIS FILE (markup edits — see the draft guide)
   • Fix 2 — aria-label on 8 image-only links (Shop ×6, Product ×2).
   • Fix 3 — title="Contact form" on the 17hats contact <iframe> on /contact/.
   ============================================================================ */


/* ============================================================================
   SurroundYou Design — KEYBOARD-ONLY NAVIGATION
   WCAG 2.1:  2.1.1 Keyboard (A) · 2.1.2 No Keyboard Trap (A) · 2.4.7 Focus
              Visible (AA) · 2.4.1 Bypass Blocks (A)
   Date: 2026-10-19
   ----------------------------------------------------------------------------
   Goal: the entire site can be operated with Tab / Shift+Tab / Enter / Space /
   arrow keys, and the user can ALWAYS see where focus currently is.

   Why !important: the theme ships `.using-mouse :focus { outline: 0 }`
   (specificity 0-2-0) and several plugins set `outline: none`. Those would
   otherwise win. We style `:focus-visible` so the ring appears for KEYBOARD
   focus only — mouse clicks stay visually clean.
   ============================================================================ */


/* ---- 1. One unmistakable focus ring on every focusable thing -------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[contenteditable="true"]:focus-visible,
iframe:focus-visible,
iframe:focus {
  outline: 3px solid #0b5fff !important;   /* vivid blue — readable on white AND dark */
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #ffffff !important; /* white halo so it survives dark sections */
}

/* The theme parks focus on wrapper containers via tabindex="-1" when the skip
   link is used. Those are not interactive, so they must NOT get a ring. */
#primary[tabindex="-1"]:focus,
#content[tabindex="-1"]:focus,
#page[tabindex="-1"]:focus {
  outline: none !important;
  box-shadow: none !important;
}


/* ---- 2. Skip link: obvious the instant it takes focus --------------------- */
/* "Bypass Blocks" only helps if the user can actually SEE the skip link. */

a.skip-link:focus,
.screen-reader-text:focus {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  padding: 12px 20px !important;
  background-color: #1b1b1b !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  z-index: 100000 !important;
  border-radius: 4px !important;
  outline: 3px solid #0b5fff !important;
  outline-offset: 2px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}


/* ---- 3. Don't let a sticky header cover whatever you just tabbed to ------- */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:focus,
iframe:focus {
  scroll-margin-top: 120px;
  scroll-margin-bottom: 48px;
}


/* ---- 4. Menu / sidebar links get the same treatment, whichever menu ------ */

.main-navigation a:focus-visible,
.inside-navigation a:focus-visible,
#generate-slideout-menu a:focus-visible,
.widget_nav_menu a:focus-visible,
.woocommerce-MyAccount-navigation a:focus-visible {
  outline: 3px solid #0b5fff !important;
  outline-offset: 2px !important;
}

/* 2026-10-21 Mobile fix — keep the Jetpack newsletter subscribe block
   inside the screen (it forced a 644px horizontal scroll at 375px). */
/* Mobile fix (2026-10-21): keep the Jetpack newsletter subscribe button
   inside the screen. At 375px the block was 551px wide (nowrap button in a
   285px container), forcing a 644px horizontal scroll on the home page. */
.wp-block-jetpack-subscriptions__form-elements { flex-wrap: wrap; }
.wp-block-jetpack-subscriptions__form-elements > * { min-width: 0; max-width: 100%; }
#subscribe-submit { flex: 1 1 100%; width: 100%; max-width: 100%; min-width: 0; }
#subscribe-submit .wp-block-button__link,
#subscribe-submit button {
  white-space: normal;
  overflow-wrap: anywhere;
  width: 100%;
  max-width: 100%;
}
.wp-block-jetpack-subscriptions__form-elements input[type="email"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


/* ============================================================================
   2026-10-21  Policy pages (8241 accessibility / 8248 privacy / 8249 terms)
   Smaller headings, requested by Moky. NOTE: each selector carries the full
   descendant chain - a comma list like ".a, .b .h1" applies the descendant part
   ONLY to the last selector, which is a bug I hit and fixed on 2026-10-21.
   Footer widget headings are NOT touched (they sit outside .entry-content).
   ============================================================================ */
.page-id-8241 .entry-header .entry-title,
.page-id-8248 .entry-header .entry-title,
.page-id-8249 .entry-header .entry-title {
  font-size: 34px !important;
  line-height: 1.25 !important;
}
.page-id-8241 .entry-content h2,
.page-id-8248 .entry-content h2,
.page-id-8249 .entry-content h2 {
  font-size: 22px !important;
  line-height: 1.35 !important;
  margin-top: 1.8em !important;
  margin-bottom: 0.5em !important;
}
.page-id-8241 .entry-content h3,
.page-id-8248 .entry-content h3,
.page-id-8249 .entry-content h3 {
  font-size: 18px !important;
  line-height: 1.4 !important;
}
@media (max-width: 768px) {
  .page-id-8241 .entry-header .entry-title,
  .page-id-8248 .entry-header .entry-title,
  .page-id-8249 .entry-header .entry-title { font-size: 27px !important; }
  .page-id-8241 .entry-content h2,
  .page-id-8248 .entry-content h2,
  .page-id-8249 .entry-content h2 { font-size: 20px !important; }
}