/* ============================================================================
   page-reset.css — BRITE-129
   ----------------------------------------------------------------------------
   style.min.css carries bare element selectors with no scoping, so they reach
   into the content of ANY page added to this site. Three of them shipped bugs
   on the homepage (BRITE-74); a full audit found more (BRITE-129).

   This file neutralises the ones that fail SILENTLY — where the page looks
   plausible but wrong, rather than obviously broken.

   HOW TO USE
     1. <link rel="stylesheet" href="{{ asset('assets/css/page-reset.css') }}">
        AFTER style.min.css and responsive.css, BEFORE your page's own CSS.
     2. Put class="br-page" on a wrapper around your page content.

   It is OPT-IN and scoped under .br-page, so it cannot affect any existing
   screen. Nothing outside a .br-page wrapper changes.

   The full inventory of bare selectors is in docs/brite-129-bare-selectors.md.
   The five below are neutralised; the rest are documented but left alone
   because they are conventional defaults rather than traps.

   NOT NEUTRALISED, and you cannot fix it from here:
     iframe { border: none !important }  in style.min.css
   An embedded map or video cannot have a visible border unless the page
   declares one with !important of its own. Nothing in this file can undo an
   !important from another stylesheet without imposing the same thing back,
   so it is documented rather than pretended-away. An earlier version of this
   file carried `.br-page iframe { border: 0 }`, which was INERT — it lost to
   the !important and neutralised nothing while implying it had.
   ========================================================================== */

/* 1. header { background-color: white; box-shadow: ... }
      A <header> used as a semantic grouping element inside a section gets a
      white block painted behind it. On a dark panel this renders the heading
      and copy INVISIBLE. This is the one that nearly shipped on the homepage. */
.br-page header {
    background-color: transparent;
    box-shadow: none;
}

/* 2. th, td { border: 1px solid #000 !important }
      !important, so it beats inline and component styling. Every table gains a
      black grid the design does not have. Needs !important to undo. */
.br-page th,
.br-page td {
    border: 0 !important;
}

/* 3. a { display: inline-block }
      An inline-block link is an atomic box: it CANNOT break across lines. A
      link in body copy jumps whole to the next line and leaves a ragged gap.
      Verified in a browser at 360px — "read our full terms and conditions"
      renders as one unbreakable run. */
.br-page a {
    display: inline;
}

/* 4. td br { display: none }
      Line breaks inside table cells vanish with no indication. Content the
      author wrote simply does not appear. */
.br-page td br {
    display: inline;
}

/* 5. hr { opacity: .09 }
      A divider at 9% opacity is effectively invisible on white. */
.br-page hr {
    opacity: 1;
}