/*
 * mobile.css - Knappogue Castle static site mobile layout fix.
 *
 * Why this file exists: the 16 pages are SingleFile captures taken at
 * desktop width. Each page has a real desktop hero (".castle-desktop-show",
 * absolute-positioned, fixed pixel widths) and a broken "mobile" version
 * (".castle-mobile-show", empty/zero-height background divs - unusable).
 * The theme's own breakpoint is @media (min-width:56.875em) ~= 910px; below
 * that the desktop hero was simply display:none and nothing replaced it.
 *
 * Strategy: at the mobile breakpoint, show the REAL desktop content, strip
 * the absolute/float/inline-block positioning that only makes sense on a
 * wide canvas, and let everything stack into a single readable column.
 * The Story slideshow (#storypjc) and Cocktails flip cards
 * (.recipe-card-outer) are explicitly EXCLUDED from the "kill positioning"
 * rules below because their JS (story-slideshow.js / cocktails-flip.js)
 * depends on absolute/3D-transform positioning to function.
 *
 * Everything in this file is scoped inside one media query, so desktop
 * (>=56.875em) is byte-for-byte unaffected.
 */
@media screen and (max-width: 56.8125em) {

  /* -----------------------------------------------------------------
   * 0. Horizontal-scroll guards
   * ----------------------------------------------------------------- */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  body {
    box-sizing: border-box;
  }
  /* Guard against fixed-px-width inline styles blowing out the viewport.
     Excludes the slideshow/flip-card internals, which rely on their
     authored widths (they get their own max-width fix further down). */
  .site-content *:not(#storypjc):not(#storypjc *):not(.recipe-card-outer):not(.recipe-card-outer *) {
    max-width: 100%;
  }
  /* Long inline-style pixel widths that are common offenders. */
  .castle-desktop-show img,
  .castle-desktop-show iframe,
  .castle-desktop-show video,
  .video-box,
  .video-frame iframe,
  .product-details-subhead {
    max-width: 100% !important;
  }

  /* -----------------------------------------------------------------
   * 1. Show the real (desktop) content, hide the broken mobile capture
   * ----------------------------------------------------------------- */
  .castle-mobile-show {
    display: none !important;
  }
  .castle-desktop-show {
    display: block !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  /* -----------------------------------------------------------------
   * 2. Flatten the hero/content containers into a single column.
   *    Scoped to the content wrappers used across the 16 pages
   *    (.story-container / .product-container and their children),
   *    and explicitly NOT applied inside the slideshow or flip cards.
   * ----------------------------------------------------------------- */
  .story-container,
  .product-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    padding: 16px !important;
  }

  /* Two-column "story box" rows (text + image/bottle side by side on
     desktop) used on story / our-name / 1951 / product / product-NN /
     limited-edition pages -> stack to full width, in source order. */
  .story-box,
  .story-left,
  .story-right {
    position: static !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    left: auto !important;
    right: auto !important;
    padding-left: 0 !important;
    margin-bottom: 28px !important;
  }
  .story-box:last-child {
    margin-bottom: 0 !important;
  }

  /* Story slideshow (#storypjc): its outer box already has inline
     max-width:432px (not a fixed width), so it naturally shrinks to fit
     the mobile column. But the slide track and each slide underneath
     carry FIXED inline pixel widths (wrapper:4320px, each
     .frs-slide-img:432px) sized for the desktop 432px box - at a
     narrower viewport that leaves the visible window (".frs-slideshow-
     content", overflow:hidden) showing only a left-aligned CROP of each
     slide rather than the whole image.
     story-slideshow.js measures slide width via getBoundingClientRect()
     and drives the wrapper's translate3d() in that same unscaled pixel
     space, so a transform:scale() on an ancestor would corrupt its math
     (the JS-applied translate would itself get re-scaled, double-
     counting the ratio). Percentages avoid that: each is resolved to a
     real pixel value at layout time, in the *same* (unscaled) coordinate
     space the JS already measures via getBoundingClientRect(), so no
     transform interaction is introduced at all.
     There are exactly 10 slides (.frs-slide-img), so: wrapper = 1000% of
     the visible window, each slide = 10% of the wrapper -> 10% of 1000%
     resolves to 100% of the window, i.e. exactly full-bleed, at any
     viewport width. */
  #storypjc, #storypjc .frs-wrapper, #storypjc .frs-slideshow-content {
    max-width: 100% !important;
  }
  #storypjc .frs-slide-img-wrapper {
    width: 1000% !important;
  }
  #storypjc .frs-slide-img {
    width: 10% !important;
  }
  #storypjc .frs-slide-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
  }

  /* process.html's repeated "ingredients/distillation/aging/maturation"
     rows: inline-block 47% text column + floated 50% image column.
     These are inline styles (no shared class), so target generically by
     structural position inside the content container - any direct
     wrapper row, and its two inline-block/float children, full-width. */
  .story-container > div[style*="min-height"] {
    width: 100% !important;
    min-height: 0 !important;
    /* One of these rows ("Aging") additionally carries a fixed
       height:400px inline style sized for the original side-by-side
       50/50 columns. Once the columns stack into one tall column the
       fixed height is far too short, clipping the row and letting the
       next row render on top of the still-overflowing image. */
    height: auto !important;
    text-align: center !important;
  }
  .story-container > div[style*="min-height"] > div[style*="display:inline-block"] {
    display: block !important;
    width: 100% !important;
    float: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  .story-container > div[style*="min-height"] > div[style*="display:inline-block"] img {
    display: block;
    margin: 0 auto;
  }

  /* Generic "kill absolute positioning" for one-off hero elements that
     don't share a class (index hero bottle/headline/12-14-16 row, the
     1951/product-detail bottle shots, our-name quote block, etc.).
     Excludes the slideshow and flip-card subtrees entirely. */
  .castle-desktop-show [style*="position:absolute"]:not(#storypjc):not(#storypjc *):not(.recipe-card-outer):not(.recipe-card-outer *):not(.frs-timer):not(.frs-timer *) {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    display: block !important;
  }
  /* Quote-mark decorative glyphs ride on the absolute rule above for
     desktop placement only; on mobile they'd otherwise stack as their
     own blank line. Hide them rather than let them float oddly inline. */
  .castle-desktop-show div[style*="font-size:140px"] {
    display: none !important;
  }

  /* index.html hero image + headline text + the 12-14-16 row need to be
     centered as a column once position:static lands them in normal flow. */
  .castle-desktop-show > img,
  .castle-desktop-show > div[style*="text-align:center"] {
    text-align: center !important;
  }
  .castle-desktop-show img[src*="bg_index_bottle"],
  .castle-desktop-show img[src*="1951_bottle"],
  .castle-desktop-show img[src*="bottle-slide"],
  .castle-desktop-show img.bottle-slide-12 {
    display: block !important;
    height: auto !important;
    width: auto !important;
    max-width: 70% !important;
    margin: 12px auto !important;
  }

  /* -----------------------------------------------------------------
   * 3. Product detail pages (product-12/14/16.html): bourbon-cask
   *    text column + bottle/arrows column, already covered by the
   *    .story-box rules above. The prev/next triangle arrows sit in
   *    fixed-height side columns (float:left/right, width:30px,
   *    height:100%) with margin-top:380px to vertically center the
   *    triangle - that math only works against a tall column, so on
   *    mobile we re-lay the arrows as a centered row above the bottle
   *    instead of trying to preserve the absolute offset.
   * ----------------------------------------------------------------- */
  /* flex-direction stays "row" (the default) with wrapping: the bottle
     gets flex-basis:100% so it always claims its own full-width line
     (pushing it above everything else via order:1), which leaves the two
     30px-wide arrow boxes (order:2) to flow together onto the next line
     as an actual side-by-side row - a column direction here would stack
     the two arrow boxes under each other instead of next to each other. */
  .product-swipe-12,
  .product-swipe-14,
  .product-swipe-16 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .product-swipe-12 > div[style*="float:left"],
  .product-swipe-12 > div[style*="float:right"],
  .product-swipe-14 > div[style*="float:left"],
  .product-swipe-14 > div[style*="float:right"],
  .product-swipe-16 > div[style*="float:left"],
  .product-swipe-16 > div[style*="float:right"] {
    float: none !important;
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    display: inline-block !important;
    order: 2;
  }
  .product-swipe-12 > div[style*="width:300px"],
  .product-swipe-12 > div[style*="width:400px"],
  .product-swipe-14 > div[style*="width:300px"],
  .product-swipe-14 > div[style*="width:400px"],
  .product-swipe-16 > div[style*="width:300px"],
  .product-swipe-16 > div[style*="width:400px"] {
    order: 1;
    flex: 1 0 100% !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  /* The desktop triangle glyphs use margin-top:380px (vertically centering
     them inside a height:100% tall column) plus opposing margin-left:50px/
     -50px (nudging them together against their float:left/float:right
     parents). On mobile the column is no longer tall, and the negative
     margin-left on the right arrow drags it out of row - zero out both
     axes and let flex centering + gap handle spacing instead. */
  .product-left-arrow,
  .product-right-arrow {
    margin: 0 !important;
    display: inline-block;
    vertical-align: middle;
  }
  .product-swipe-12 > div[style*="float:left"],
  .product-swipe-14 > div[style*="float:left"],
  .product-swipe-16 > div[style*="float:left"] {
    margin-right: 24px !important;
  }
  .circle-container {
    position: static !important;
    bottom: auto !important;
    margin-top: 14px !important;
  }

  /* -----------------------------------------------------------------
   * 4. join-the-conversation.html video embeds: fixed 850px-wide boxes
   *    inside an 85%-width, fixed-860px-tall wrapper.
   * ----------------------------------------------------------------- */
  .castle-desktop-show div[style*="width:85%"] {
    width: 100% !important;
    height: auto !important;
  }
  .video-box {
    width: 100% !important;
    height: auto !important;
    min-height: 220px;
  }
  .video-frame {
    position: relative !important;
    width: 100% !important;
  }
  .video-frame iframe {
    width: 100% !important;
    height: 220px !important;
  }

  /* -----------------------------------------------------------------
   * 5. Cocktails: 24 flip cards (300x420, inline-block). Keep the
   *    .recipe-card-outer / .recipe-card.front/.back 3D transform
   *    positioning completely untouched - only resize the outer card
   *    box so one fits per row on a 390px screen, and let the
   *    pre-existing text-align:center on the container do the centring.
   * ----------------------------------------------------------------- */
  .recipe-card-outer {
    width: 92vw !important;
    max-width: 340px !important;
    height: 115vw !important;
    max-height: 420px !important;
  }
  .recipe-card-inner {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  /* -----------------------------------------------------------------
   * 6. Typography: rein in oversized desktop sizes so text fits/wraps.
   * ----------------------------------------------------------------- */
  .castle-desktop-show {
    font-size: 16px;
  }
  .castle-desktop-show div[style*="font-size:48px"],
  .castle-desktop-show div[style*="font-size:60px"] {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }
  .castle-desktop-show div[style*="font-size:34px"] {
    font-size: 26px !important;
  }
  .castle-desktop-show div[style*="font-size:32px"] {
    font-size: 24px !important;
  }
  .castle-desktop-show div[style*="font-size:26px"],
  .castle-desktop-show div[style*="font-size:24px"] {
    font-size: 19px !important;
  }
  .castle-desktop-show div[style*="letter-spacing:2px"],
  .castle-desktop-show div[style*="letter-spacing:3px"] {
    letter-spacing: 0.5px !important;
  }
  .product-details-text,
  .story-text,
  .nineteen-text {
    font-size: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Class-based (not inline-style) section headers shared across story /
     our-name / product / product-NN / cocktails pages. */
  .story-header,
  .product-header {
    font-size: 22px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.5px !important;
    padding: 16px !important;
    margin-top: 0 !important;
  }
  .nineteen-header {
    font-size: 24px !important;
  }
  .nineteen-subhead {
    width: 90% !important;
    min-width: 0 !important;
    max-width: 320px !important;
  }
  .product-details-subhead {
    width: 90% !important;
    max-width: 300px !important;
  }
  .recipe-card-outer,
  .recipe-card-outer * {
    font-size: 14px;
  }
  .recipe-title {
    font-size: 16px !important;
  }
  legend, h1 { word-break: break-word; }

  /* -----------------------------------------------------------------
   * 7. Legal / plain-text pages (enjoy-responsibly, terms,
   *    privacy-policy) and the generic #content wrapper: comfortable
   *    side padding so text doesn't touch the screen edges.
   * ----------------------------------------------------------------- */
  #content.site-content {
    padding: 16px !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }
  .legal-page {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* -----------------------------------------------------------------
   * 8. Header / hamburger menu.
   * ----------------------------------------------------------------- */
  .site-header-main {
    height: 56px;
  }
  /* Mobile header logo: surface the KNAPPOGUE CASTLE wordmark on the left.
     The theme hides the desktop .castle-header-link below the breakpoint, and
     the original mobile logo container shipped empty in these captures, so we
     re-show the wordmark (Logo.png) and drop the wide gold-rule side pieces. */
  .site-header-main .castle-header-link {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 100%;
    margin: 0;
    padding-left: 6px;
  }
  .site-header-main .castle-side-header {
    display: none !important;
  }
  .site-header-main .castle-middle-header {
    height: 100% !important;
    width: 280px !important;
    max-width: 62vw !important;
    margin: 0 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
  }
  body {
    padding-top: 56px !important;
  }
  #menu-toggle {
    display: inline-block !important;
    position: relative;
    z-index: 1101;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 0;
    background: transparent;
  }
  /* The button markup ships empty (its JS-driven glyph was lost in the
     capture) - draw a hamburger glyph with a pseudo-element box-shadow
     trick (three horizontal bars) since the button has no children. */
  #menu-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 2px;
    background: #ffffff;
    box-shadow: 0 -7px 0 #ffffff, 0 7px 0 #ffffff;
    transform: translate(-50%, -50%);
  }
  body.nav-open #menu-toggle::before {
    background: #ffffff;
    box-shadow: none;
  }
  body.nav-open #menu-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 2px;
    background: #ffffff;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 0 transparent;
  }
  body.nav-open #menu-toggle {
    position: relative;
  }
  body.nav-open #menu-toggle::before {
    transform: translate(-50%, -50%) rotate(-45deg);
    box-shadow: none;
  }

  #site-header-menu {
    display: block !important;
  }
  .main-navigation {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    background: #1b1d1f;
    z-index: 1100;
    box-sizing: border-box;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
  }
  body.nav-open .main-navigation {
    display: block;
  }
  .main-navigation .menu-headermenu-container {
    width: 100%;
  }
  .main-navigation ul.primary-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .main-navigation li {
    width: 100% !important;
    text-align: center !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
  .main-navigation li:first-child {
    border-top: 0;
  }
  .main-navigation a {
    font-size: 18px !important;
    padding: 16px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
  }
  /* Parent items (e.g. Product) had their link narrowed to leave room for the
     now-hidden dropdown toggle, and the sub-menu carries a left margin - both
     knock the text off-centre. Reset so every item centres uniformly. */
  .main-navigation .sub-menu {
    margin: 0 !important;
    padding-left: 0 !important;
  }
  .main-navigation .castle-menu-separator {
    display: none !important;
  }
  /* The theme hides nested submenus with ".main-navigation ul ul"
     (display:none), driven by a dropdown-toggle JS that no longer
     exists. With the toggle button hidden below, the only way to reach
     "Limited Edition" is to always show the submenu, flattened inline
     under its parent item. */
  .main-navigation ul ul,
  .main-navigation .sub-menu {
    display: block !important;
    position: static !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.06);
  }
  .main-navigation .sub-menu li a,
  .main-navigation ul ul li a {
    font-size: 15px !important;
    padding: 12px 20px !important;
  }
  .main-navigation .dropdown-toggle {
    display: none !important;
  }
  /* Original hidden hamburger header strip - keep it hidden, the
     #menu-toggle button above is the only control we wire up. */
  .menu-hamburger-header {
    display: none !important;
  }

  /* -----------------------------------------------------------------
   * 9. Footer: already a simple flexbox - just guard against overflow.
   * ----------------------------------------------------------------- */
  .castle-footer {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    text-align: center;
  }
  .footer-text {
    font-size: 13px;
  }
}