/* ============================================================
   utilities.css — token-based replacements for the 5 Bootstrap
   responsive display utilities, plus two reboot-loss patches.

   Created:    2026-05-23
   Author tag: CANADA HITECH — https://canadahitech.com
   Purpose:    Replaces Bootstrap's `.d-none`, `.d-md-inline-flex`,
               `.d-md-none`, `.d-lg-none`, `.d-lg-block`; restores
               `[hidden]` global behavior; pins `<legend>` layout
               so Bootstrap reboot loss is neutralized.

   AUTHORIZATION:
   The general Canada HiTech html-coding-standards skill (§1.6, §7)
   mandates Bootstrap v5.3 as the project baseline. This file is
   part of a one-time deviation removing Bootstrap from EtqanShop
   entirely. The deviation is authorized by:

     - Project owner: Basam Jawad Kalaf
     - Date: 2026-05-23
     - Governing skill clause: CANADA_HITECH_ECOMMERCE_DESIGN_SKILL.md
       v2.1, line 23 — "Where this skill is silent on a topic, the
       project prompt decides." The eCommerce skill is silent on
       Bootstrap as a hard mandate.
     - Anticipated work item: PAGES_BUILT.md line 241, item 11 —
       explicitly anticipates Bootstrap removal across all 13 pages
       during the wiring phase.
     - Read-only audits:
         BOOTSTRAP_REMOVAL_AUDIT_2026-05-23.md
         BOOTSTRAP_REMOVAL_FOLLOWUP_2026-05-23.md

   Cascade position: loaded AFTER css/shared/components.css and
   AFTER css/shared/internal.css, BEFORE page-specific css/pages/*.
   ============================================================ */

/* ============================================================
   Display utilities (Bootstrap d-* replacements)
   Breakpoints match the project's existing house media-query
   ladder (576 / 768 / 992 / 1200 — see audit §5.2).
   !important matches Bootstrap parity.
   ============================================================ */

.d-none {
  display: none !important;
}

@media (min-width: 768px) {
  .d-md-none        { display: none !important; }
  .d-md-inline-flex { display: inline-flex !important; }
}

@media (min-width: 992px) {
  .d-lg-none  { display: none !important; }
  .d-lg-block { display: block !important; }
}

/* ============================================================
   [hidden] global — replaces Bootstrap Reboot's universal rule.
   Audit §4.4 finding: house has only scoped [hidden] rules
   (.tabs__panel[hidden], .scroller__arrow[hidden],
    .pd-sticky[hidden]). This makes the rule global so future
   markup using the HTML5 `hidden` attribute behaves correctly.
   ============================================================ */

[hidden] {
  display: none !important;
}

/* ============================================================
   <legend> element rule — pins layout so loss of Bootstrap
   reboot's "width: 100%; float: left" doesn't change rendering.
   Audit §4.4 finding: shipping.html has 2 <legend> elements
   (.ship-form__legend); house styles only typography, not box
   geometry.
   ============================================================ */

legend {
  width: 100%;
  padding: 0;
  margin-bottom: var(--space-sm);   /* 8px — verified in global.css:120 */
}

/* ============================================================
   <address> reboot equivalent — Bootstrap reboot provides
   `address { font-style: normal; margin-bottom: 1rem; line-height: inherit; }`.
   House has no <address> rule, so without this patch, every <address>
   (1 per page, in the footer) would render italic and lose 16px
   bottom margin — which would shift the entire page above by 16px
   if address is a non-final flow element.
   Discovered during Wave A verification (2026-05-23).
   ============================================================ */

address {
  margin-bottom: var(--space-md);
  font-style: normal;
  line-height: inherit;
}

/* ============================================================
   .breadcrumb margin patch — Bootstrap 5.3 ships a bare
   `.breadcrumb { margin-bottom: 1rem; ... }` rule. House `.breadcrumb`
   in internal.css:62 sets background, border, and padding but
   omits margin-bottom. Without Bootstrap, the breadcrumb loses its
   16px bottom margin, shifting every page-section below it up by
   16px and shortening the total page height by 16px.
   Discovered during Wave A verification (2026-05-23).
   ============================================================ */

.breadcrumb {
  margin-bottom: var(--space-md);
}

/* ============================================================
   .form-label margin patch — Bootstrap 5.3 ships
   `.form-label { margin-bottom: 0.5rem; }` (8px). House `.form-label`
   in internal.css:339 sets typography (font-family, font-size,
   font-weight, color) but omits margin-bottom. Without Bootstrap,
   every form-label collapses against its input. On checkout.html this
   produced a cumulative -24px shift (3 form-rows × 8px).
   Discovered during Wave B verification (2026-05-23).
   ============================================================ */

.form-label {
  margin-bottom: var(--space-sm);
}

/* ============================================================
   Form-element font inheritance — Bootstrap reboot has
   `button, input, optgroup, select, textarea {
      font-family: inherit; font-size: inherit; line-height: inherit;
   }`.
   House global.css:211 covers `button` only (and lacks line-height).
   Adding the missing siblings here so form elements without an
   explicit class (e.g. bare `<input type="search">` in the mobile
   nav, bare `<button>` in nav-categories) inherit body typography
   instead of falling to UA defaults.
   Discovered during Wave B verification (2026-05-23).
   ============================================================ */

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  line-height: inherit;
}

/* ============================================================
   [type="search"] reboot equivalent — Bootstrap reboot includes:
   `[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }`.
   Without it, on macOS WebKit `<input type="search">` (the header
   search and mobile search inputs) renders with native searchfield
   styling — extra padding and a different baseline that subtly
   changes the header layout.
   Discovered during Wave B verification (2026-05-23).
   ============================================================ */

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}