/* =============================================================
   Accessibility widget resilience
   -------------------------------------------------------------
   The accessibility widget (accessibility-widgets) forces these
   properties on EVERY descendant with !important once its text
   features are switched on:

     .snn-bigger-text-xlarge *   { font-size: 28px !important }
     .snn-text-spacing-heavy *   { letter-spacing: .25em !important;
                                   word-spacing: 2em !important }
     .snn-line-height-4em *       { line-height: 4 !important }

   At 28px, `word-spacing: 2em` adds 56px after every space, so long
   unbreakable words no longer fit narrow columns and fixed-height
   decorative boxes overflow their borders.

   Those widget selectors have specificity (0,1,1) and are injected
   into <head> after this file, so every rule below deliberately uses
   two attribute selectors - `body[class*="snn-"][class]` - giving
   (0,2,1) so ours wins regardless of injection order.

   Everything here is scoped to `body[class*="snn-"]`, so it has zero
   effect while no accessibility feature is active.
   ============================================================= */

/* 1. Long words must break instead of escaping their column. */
body[class*="snn-"][class] p,
body[class*="snn-"][class] h1,
body[class*="snn-"][class] h2,
body[class*="snn-"][class] h3,
body[class*="snn-"][class] h4,
body[class*="snn-"][class] h5,
body[class*="snn-"][class] h6,
body[class*="snn-"][class] span,
body[class*="snn-"][class] li,
body[class*="snn-"][class] td,
body[class*="snn-"][class] th,
body[class*="snn-"][class] label,
body[class*="snn-"][class] a,
body[class*="snn-"][class] button {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 2. Buttons and button-like links must grow with their text. */
body[class*="snn-"][class] button,
body[class*="snn-"][class] .btn,
body[class*="snn-"][class] a.btn,
body[class*="snn-"][class] a.btn-block {
    height: auto !important;
    min-height: 0 !important;
    white-space: normal !important;
}

/* 3. Accordion icons are decorative wrappers with a fixed height:15px
      (see style.css `.accordion .btn-block .icon`). The forced
      line-height:4 makes their line box 112px tall, which bursts out
      of the button border. Let them size to their glyph. */
body[class*="snn-"][class] .accordion .btn-block .icon,
body[class*="snn-"][class] .accordion .btn-block .icon::before,
body[class*="snn-"][class] .accordion .btn-block .icon>i {
    height: auto !important;
    line-height: 1 !important;
}

/* 4. Same class of defect: any other decorative absolutely positioned
      box with a hard-coded height that now gets a huge line box. */
body[class*="snn-"][class] .btn-profile,
body[class*="snn-"][class] .card-thumbnail>i,
body[class*="snn-"][class] .badge {
    line-height: 1.2 !important;
}

/* 5. Grid/flex children need min-width:0 or they refuse to shrink and
      force a horizontal scrollbar once text gets wider. */
body[class*="snn-"][class] .row>*[class*="col-"],
body[class*="snn-"][class] .row>* {
    min-width: 0;
}

/* 6. Fixed-height text cards clip their own content once text grows.
      .card-box-hotel is height:500px (style.css:6173) and holds an image
      strip, a height:80px title slot and the hotel blurb. At 28px with
      line-height:4 the blurb alone needs several hundred pixels, so it
      spills past the white card. Convert the fixed height into a floor so
      the card keeps its intended minimum but always grows as needed. */
body[class*="snn-"][class] .card-box-hotel {
    height: auto !important;
    min-height: 500px !important;
}

/* 7. Same defect class, other fixed-height text boxes.
      .card-box is height:400px / height:490px (style.css:4154, 4244). */
body[class*="snn-"][class] .card-box {
    height: auto !important;
    min-height: 400px !important;
}

/* 8. JXBApp fan cards are height:480px / height:420px (style.css:2689,
      3117) and carry text labels. */
body[class*="snn-"][class] .jxbapp-page .fan-cards {
    height: auto !important;
    min-height: 420px !important;
}

body[class*="snn-"][class] .jxbapp-page .fan-card {
    height: auto !important;
    min-height: 480px !important;
}

/* 9. Inline height locks inside cards cannot be overridden by a class
      rule, and the hotel markup hard-codes them on the thumbnail and the
      title slot. Relax the title slot so long hotel names are not cut. */
body[class*="snn-"][class] .card-box-hotel>div[style*="height"] {
    height: auto !important;
    min-height: 80px !important;
}

/* 10. Desktop nav is a single non-wrapping flex row
       (.nav-menu>ul{display:flex}, style.css:177) whose items are
       white-space:nowrap (style.css:182). At 28px + word-spacing:2em the
       menu needs ~1924px inside a 1140px container and bursts out of the
       header on both axes. Let it wrap and re-flow. */
body[class*="snn-"][class] .nav-menu>ul {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
}

body[class*="snn-"][class] .nav-menu>ul>li {
    white-space: normal !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* 11. Drop-down panels are absolutely positioned with min-width:180px
       (style.css:224). Their item text is far wider than that, so each
       panel grew to ~450px and stacked ~1600px tall. Cap the width to the
       viewport and cap the height, keeping overflow reachable by scroll
       instead of spilling across the page. */
body[class*="snn-"][class] .nav-menu .drop-down li {
    min-width: 0 !important;
    max-width: 100% !important;
}

body[class*="snn-"][class] .nav-menu .drop-down ul {
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body[class*="snn-"][class] .nav-menu .drop-down>a::after {
    padding-left: 0 !important;
    margin-left: 4px !important;
}

/* 12. Footer social icons are 36x36 round boxes with line-height:1
       (style.css:1902). The forced line-height:4 gives the glyph a
       ~112px line box inside a 36px circle, spilling 87px vertically
       under every icon. The <i> inside needs the same treatment, since
       the widget targets every descendant. */
body[class*="snn-"][class] #footer .social-links a,
body[class*="snn-"][class] #footer .social-links a>i {
    line-height: 1 !important;
}

body[class*="snn-"][class] #footer .social-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 36px !important;
    padding: 8px 0 !important;
}

body[class*="snn-"][class] #footer .social-links a>i {
    display: block !important;
    line-height: 1 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* 13. `section { overflow: hidden }` (style.css:735) hides the tail of a
       grown section. The overflow-y:visible does not help on its own
       because overflow-x:hidden + overflow-y:visible computes to
       overflow-y:auto per CSS, so relax both axes and instead stop the
       source of the bleed. */
body[class*="snn-"][class] section {
    overflow: visible !important;
}

/* 14. The real source of the bleed: `.card-box` is `float: left`
       (style.css:4152) and `.card-box-hotel` inherits it, so each card
       is taken out of flow. Its grid column collapses to 0px tall and the
       card paints outside the column and the section. Un-float so the
       column actually contains the card. */
body[class*="snn-"][class] .card-box,
body[class*="snn-"][class] .card-box-hotel {
    float: none !important;
}

/* 15.  Cards are wrapped in a bare inline <a>. An inline box holding a
       block child grows a line box around it, and with the forced
       line-height:4 that box is ~112px tall. Make the wrapper a block. */
body[class*="snn-"][class] a:has(> .card-box),
body[class*="snn-"][class] a> .card-box {
    display: block !important;
}

/* 16.  The mobile drawer is a fixed, intentionally scrollable panel
       (overflow-y:auto, style.css:424). Keep it scrollable rather than
       letting the tall text push the page around. */
body[class*="snn-"][class] .mobile-nav {
    overflow-y: auto !important;
}

body[class*="snn-"][class] .mobile-nav a,
body[class*="snn-"][class] .mobile-nav>ul>li {
    white-space: normal !important;
}

/* 17.  Director portrait circle is a fixed 260x260 with overflow:hidden
       (style.css:3774-3783). Its only child is an <img>, but the forced
       28px font on the wrapper's line box adds descender space below the
       image, clipping ~124px. Collapse the wrapper line box. */
body[class*="snn-"][class] #testimonials .profile .pic {
    line-height: 0 !important;
    font-size: 0 !important;
}

body[class*="snn-"][class] #testimonials .profile .pic img {
    max-height: 100% !important;
    height: auto !important;
}

/* 18.  Director hover actions are 40-45px circles (style.css:3826, 3853).
       Same descender problem as the social icons. */
body[class*="snn-"][class] #testimonials .director-actions,
body[class*="snn-"][class] #testimonials .director-actions a,
body[class*="snn-"][class] #testimonials .director-actions a>i {
    line-height: 1 !important;
}

body[class*="snn-"][class] #testimonials .director-actions a {
    overflow: hidden !important;
}

/* 19.  Home hero carousel captions sit in a hard-coded height:80px slot
       (`<div style="height:80px" class="mt-1">` holding the hotel name).
       Long names at 28px need far more, so they burst out. */
body[class*="snn-"][class] div[style*="height: 80px"],
body[class*="snn-"][class] div[style*="height:80px"] {
    height: auto !important;
    min-height: 80px !important;
}

/* 20.  Bootstrap .sr-only is a 1x1 clip box; the forced line box makes it
       report a huge scroll size. It is intentionally hidden, so keep it
       collapsed rather than letting it influence layout. */
body[class*="snn-"][class] .sr-only {
    line-height: 0 !important;
}

/* 21.  Sections that used overflow:hidden purely to stop a decorative
        horizontal bleed must still not create a sideways scrollbar now
        that rule 13 relaxes both axes. Clip only the inline axis on the
        page wrapper instead. */
body[class*="snn-"][class] {
    overflow-x: hidden;
}

/* 22.  JXBApp phone mock-ups are sized with `aspect-ratio: 9/19.5`
        (style.css:2721) plus overflow:hidden. The ratio fixes the height
        from the width, so once the text inside needs more room the extra
        content is clipped instead of the frame growing. Let the height
        follow the content and drop the ratio. */
body[class*="snn-"][class] .jxbapp-page .phone-frame {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
}

/* 23.  JXBApp feature cards are overflow:hidden (style.css:2434) with no
        fixed height, but the decorative `.ecosystem-hub::after` ring sits
        14px outside via inset:-14px, which the clip then trims into a
        visible notch once text pushes the card taller. */
body[class*="snn-"][class] .jxbapp-page .feature-card-v2 {
    overflow: visible !important;
}

/* 24.  The ecosystem diagram is a deliberately absolute-positioned
        illustration (`.ecosystem-nodes`, `.ecosystem-center`,
        style.css:2138/2191). Its children are meant to overhang the
        canvas, so let the canvas clip rather than report the overhang as
        page-level spill. */
body[class*="snn-"][class] .jxbapp-page .ecosystem-diagram {
    overflow: hidden !important;
}

/* 25.  Merchandise sections are overflow:hidden decorative blocks. Same
        clip-notch problem as rule 23. */
body[class*="snn-"][class] section.merchandise-section,
body[class*="snn-"][class] section.merchandise-hero {
    overflow: visible !important;
}