/* ============================================================
   DesignAxis — site-wide UX fixes (8.61.1 audit: phone, tablet,
   desktop). Loaded on every front-end page after the header CSS.
   ============================================================ */

/* ---- Page titles the header plugin was hiding ----
   The header builder hides the theme's header with the selector
   "body.turbo-hide-theme-header header" — every <header> element on the
   page, not just the theme's. The theme also wraps page titles in a
   <header class="entry-header">, so the 404 page lost "That page can't be
   found" and search results lost "Search results for …", leaving a bare
   search box. Brought back on those two pages only: shop, category and
   product pages also have one, and there the plugin's own heading is the
   one to show. */
body.turbo-hide-theme-header.error404 header.entry-header,
body.turbo-hide-theme-header.search header.entry-header{ display:block !important; }

/* ---- Buttons in the brand colours ----
   Log in, Register and other theme buttons still used the theme's stock
   blue (#2872fa) with white text, 4.3:1 — off-brand and under the 4.5:1
   minimum. Matched to the shop's own buttons: dark text on cyan. */
body{
  --theme-button-background-initial-color:#00a8e8;
  --theme-button-background-hover-color:#24c8ff;
  --theme-button-text-initial-color:#001018;
  --theme-button-text-hover-color:#001018;
}

/* ---- The current page in the menu ----
   Brand cyan text on the white header is 2.7:1. A deeper blue keeps it
   clearly "you are here" at 4.9:1; the cyan underline stays. */
.da-header .nav-link.is-active,
.da-header .nav-more:has(.nav-more-menu .is-active) > .nav-more-btn,
.da-mobile a.is-active:not(.da-mobile-cta){ color:#0077b6 !important; }

/* ---- Phone top bar on one line ----
   Three messages wrapped onto two lines (47px) and pushed every page down.
   Two fit on one line; the third is already said by the menu. */
@media (max-width:600px){
  .da-topbar{ font-size:12px; letter-spacing:.02em; }
  .da-topbar-inner{ flex-wrap:nowrap; gap:12px; white-space:nowrap; overflow:hidden; padding:0 12px; }
  .da-topbar-inner > span:nth-child(n+3){ display:none; }
  .da-header .da-cta{ font-size:12px; }
}
@media (max-width:359px){
  .da-topbar-inner > span:nth-child(n+2){ display:none; }
}

/* ---- No zoom when a field is tapped on an iPhone ----
   iOS Safari zooms the page in on any field with text smaller than 16px,
   and the quote, contact and login forms all used 14px. */
@media (max-width:767px){
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="password"], input[type="search"], input[type="url"], select, textarea{
    font-size:16px !important;
  }
}

/* ---- Comfortable tap targets on touch screens ----
   Measured at 19–25px tall on a phone: the "View Service" and
   "Request a Quote" card links and "Have us print it". Padding, not
   bigger type. */
@media (pointer:coarse){
  .service-link, .svc-link{ display:inline-block; padding:12px 0; }
  .da-mat .da-shop-alt{ padding-top:10px !important; padding-bottom:10px !important; }
}

/* ---- Phone add-to-cart bar (ux.js) ----
   On a phone the price sat 838px down and Add to cart 1,136px, under the
   product image. Once the real button is off screen, this bar carries the
   price and a button that presses it. */
.da-atc-bar{ display:none; }
@media (max-width:767px){
  .da-atc-bar{
    display:flex; align-items:center; gap:12px;
    position:fixed; left:0; right:0; bottom:0; z-index:9990; /* under the menu (100000) and its backdrop */
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:#0b1220; border-top:1px solid rgba(0,168,232,.3);
    box-shadow:0 -8px 24px rgba(0,0,0,.35);
    transform:translateY(110%); transition:transform .25s ease;
  }
  .da-atc-bar.is-on{ transform:none; }
  .da-atc-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
  .da-atc-title{ color:#c7d2e6; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .da-atc-price{ color:#eef2ff; font-weight:700; font-size:17px; white-space:nowrap; }
  .da-atc-btn{
    flex:0 0 auto; min-height:44px; padding:0 18px; border:0; cursor:pointer;
    background:#00a8e8; color:#001018; font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.04em;
  }
  body.da-atc-on{ padding-bottom:72px; }
}
@media (prefers-reduced-motion:reduce){ .da-atc-bar{ transition:none; } }