/* ==========================================================================
   AARONGANTT.COM — mobile layout
   --------------------------------------------------------------------------
   The site is a static Wix export: every page is one 980px-wide fixed canvas,
   where each component is placed with `left:<X>px` inside a container centred
   via `margin-left: calc((100% - 980px) * 0.5)`. Below 980px that canvas just
   overflows, so a phone only ever sees the left ~40% of the page.

   This file reflows that canvas into a single column on narrow screens.
   EVERYTHING here lives inside `@media (max-width: 979px)` — the desktop
   layout at >=980px is deliberately left untouched.

   Sizing model (the part that's easy to get wrong): components keep their own
   `#comp-x{width:Npx}` rule and are merely *capped* with `max-width:100%`.
   Forcing `width:100%` instead would inflate 26px decorative marks to the full
   viewport. Images then get `height:auto` so the <img>'s intrinsic ratio, not
   the desktop pixel height, decides how tall the box is.

   Per-page rules key off Wix component ids (`#comp-*`), which are unique
   site-wide, so they can live in this shared file without leaking between
   pages. Each one is commented with which page it belongs to and why.
   ========================================================================== */

/* The slide-in menu chrome injected by js/mobile-menu.js. Declared here,
   OUTSIDE the media query, purely to keep it inert on desktop: these elements
   exist in the DOM on every viewport but must never render above 979px. */
.agm-btn,
.agm-panel,
.agm-backdrop {
  display: none;
}

@media (max-width: 979px) {

  /* ------------------------------------------------------- 0. slide-in menu
     Replaces the wrapped rows of nav links with a hamburger + panel. The
     panel's links are cloned from the Wix menu at runtime. */

  /* The original inline nav is redundant once the panel exists. */
  wix-dropdown-menu,
  #DrpDwnMn0 {
    display: none !important;
  }

  /* In the header flow, beneath the logo, aligned left. The bars are pushed
     to `padding-left` rather than the button being nudged over, so they line
     up with the logo's own 18px inset while the tap target stays 64x44. */
  .agm-btn {
    display: flex !important;
    position: relative;
    box-sizing: border-box;
    width: 64px;
    height: 44px;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0 0 18px;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* The button is a child of the header mesh container, whose generic rule
     (section 3) centres children with `margin-left:auto !important`. That
     rule has the same specificity as `.agm-btn` but sits later in the file,
     so it would win — this contextual selector outranks it. */
  [data-mesh-id$="-gridContainer"] > .agm-btn {
    margin: 2px auto 0 0 !important;
  }

  /* Once open, the panel covers the hamburger, so hide it and let the panel's
     own close button (plus the backdrop and Escape) do the closing. */
  .agm-open .agm-btn {
    opacity: 0;
    pointer-events: none;
  }

  /* Three bars drawn from one element: the middle bar is the box itself, the
     outer two are its pseudo-elements offset above and below it. */
  .agm-bars {
    position: relative;
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: background-color 0.2s ease;
  }

  .agm-bars::before,
  .agm-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.25s ease;
  }

  .agm-bars::before {
    top: -6px;
  }

  .agm-bars::after {
    top: 6px;
  }

  /* Close (X) control, pinned to the top-right of the panel itself. */
  .agm-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .agm-x,
  .agm-x::before,
  .agm-x::after {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
  }

  .agm-x {
    background: transparent;
    position: relative;
  }

  .agm-x::before,
  .agm-x::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
  }

  .agm-x::before {
    transform: rotate(45deg);
  }

  .agm-x::after {
    transform: rotate(-45deg);
  }

  .agm-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
  }

  .agm-open .agm-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s ease, visibility 0s;
  }

  .agm-panel {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 74%;
    max-width: 290px;
    height: 100%;
    padding: 64px 0 24px;
    box-sizing: border-box;
    background: #0b0b0b;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    overflow-y: auto;
    /* Closed: slid out AND visibility:hidden, so the links leave the tab order. */
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.28s ease, visibility 0s linear 0.28s;
  }

  .agm-open .agm-panel {
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.28s ease, visibility 0s;
  }

  .agm-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .agm-list a {
    display: block;
    padding: 15px 26px;
    color: rgba(255, 255, 255, 0.72);
    font-family: worksans-extralight, "work sans", sans-serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .agm-list a.agm-current {
    color: #fff;
    box-shadow: inset 3px 0 0 #fff;
  }

  /* Lock the page behind the panel. */
  .agm-open,
  .agm-open body {
    overflow: hidden !important;
  }

  /* ---------------------------------------------------------------- 1. shell
     Drop the 980px minimum so the document is exactly as wide as the phone,
     and stop residual overflow from creating a horizontal scrollbar. */

  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Wix sizes the page backdrop layers with
     `margin-left: calc((100% - var(--site-width))/2); width: var(--site-width)`.
     Using `100vw` here would include the scrollbar while `100%` does not,
     which offsets those layers by half the scrollbar width (~7px). */
  :root,
  body {
    --site-width: 100%;
  }

  #SITE_CONTAINER,
  #site-root,
  #masterPage,
  #SITE_PAGES,
  #PAGES_CONTAINER,
  #SITE_HEADER,
  #SITE_HEADER_WRAPPER,
  #SITE_FOOTER,
  #SITE_FOOTER_WRAPPER,
  #main_MF,
  .main_MF {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Section shells carry pixel heights sized for the desktop canvas; once the
     content reflows those heights are wrong, so let them grow to fit. */
  #SITE_PAGES,
  #PAGES_CONTAINER,
  [data-mesh-id$="inlineContent"] {
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  /* The page backdrop is an absolutely-positioned layer that paints the site's
     black background. It must keep its full height — `height:auto` collapses
     it to 0 and the page shows through to the browser's default white. */
  #BACKGROUND_GROUP,
  [id^="pageBackground_"] {
    height: 100% !important;
    width: 100% !important;
  }

  /* Belt and braces: every page of this site is on black. */
  body {
    background-color: #000 !important;
  }

  /* ------------------------------------------------------------- 2. the mesh
     Wix places children on an explicit grid (`grid-area: r/c/r/c`) so they can
     overlap. `display:block` makes them stack in DOM order instead — which is
     already top-to-bottom reading order. */

  [data-mesh-id$="-gridContainer"] {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Wedges are zero-width invisible struts that only hold desktop grid rows
     open. Stacked, they just inject dead vertical space. */
  [data-mesh-id*="-wedge-"] {
    display: none !important;
  }

  /* ---------------------------------------------------- 3. the mesh children
     Undo the centring margin and the absolute `left:` offset, and cap the
     width. NOTE: no `width` here on purpose — see the sizing model above. */

  [data-mesh-id$="-gridContainer"] > *,
  [data-mesh-id$="-gridContainer"] > interact-element > * {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-area: auto !important;
    justify-self: auto !important;
    align-self: auto !important;
    float: none !important;
  }

  /* Section-level boxes should span the column even though their desktop rule
     pins them to 980px. */
  [data-mesh-id$="-gridContainer"] > [id^="comp-"]:not(.wixui-image),
  [data-mesh-id$="-gridContainer"] > section,
  [data-mesh-id$="-gridContainer"] > div[id^="comp-"]:not(.wixui-image) {
    width: auto !important;
  }

  /* Let component shells grow with their reflowed contents.
     `bgLayers_*` is excluded on purpose: it's an absolutely-positioned
     background stack whose children are also absolute, so `height:auto`
     collapses it to 0 and the section's background image/video disappears. */
  [id^="comp-"],
  [id^="comp-"] > div:not([id^="bgLayers_"]),
  .wixui-box,
  .wixui-column-strip,
  .wixui-repeater {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Background media stack: always fill its section. */
  [id^="bgLayers_"],
  [id^="bgMedia_"],
  [id^="videoContainer_"],
  [id^="bgLayers_"] > div {
    height: 100% !important;
    min-height: 0 !important;
  }

  [id^="videoContainer_"] video {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    object-fit: cover !important;
  }

  /* --------------------------------------------------------------- 4. images
     Cap the box, then let the <img> intrinsic ratio set the height. The <img>
     carries width/height attributes, so width:100% + height:auto reproduces
     the correct aspect ratio without needing the desktop pixel values. */

  .wixui-image {
    height: auto !important;
    max-width: 100% !important;
  }

  .wixui-image > div,
  .wixui-image [data-testid="linkElement"] {
    width: 100% !important;
    height: auto !important;
  }

  .wixui-image img,
  [id^="img_comp-"] {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  /* ----------------------------------------------------------- 5. typography
     Stop desktop line boxes and fixed text-box widths from overflowing. */

  .wixui-rich-text,
  .wixui-rich-text__text,
  [class*="wixui-rich-text"] p,
  [class*="wixui-rich-text"] span {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* ------------------------------------------------------------ 6. media */

  video,
  iframe {
    max-width: 100% !important;
  }

  /* ------------------------------------------------------------- 7. header
     The logo is a 522px-wide image and the nav is a 912px-wide single-line
     list — both need to become column-friendly. */

  /* The thin corner "frame line" marks are pinned to the far edges of the
     980px canvas (one at left:0, one at left:954px). Stacked into a column
     they read as stray lines floating in empty space. */
  #comp-lmh2imu5,
  #comp-lmh2i703 {
    display: none !important;
  }

  #SITE_HEADER {
    height: auto !important;
    padding: 44px 0 10px !important;
    box-sizing: border-box !important;
  }

  /* The header is a row on mobile: hamburger first, then the logo beside it.
     Overrides the generic `display:block` mesh rule in section 2. */
  [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  /* The script appends the button last, so `order` puts it on the left
     without depending on DOM position.

     The nudge: the logo image is 522x84, and its big "AARON GANTT" line is
     centred at 36.9% of that height (rows 13-49) — the subtitle underneath
     drags the box's own centre down to 50%. `align-items:center` therefore
     parks the button below the "A". Shift it up by the difference,
     logoHeight * (0.50 - 0.369). The logo scales with the viewport, so the
     correction has to as well: logoHeight = (viewport - 72px) * 84/522,
     which works out to roughly 2.1vw - 1.7px. */
  [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] > .agm-btn {
    order: -1 !important;
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    top: calc(1.7px - 2.1vw) !important;
  }

  /* Logo takes whatever the row has left. */
  #comp-lse6nzf4 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 6px 0 10px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Nav: unpin the absolutely-positioned list and let the items wrap.
     The <li>s carry inline `width:131px; height:18px`, hence !important. */
  wix-dropdown-menu,
  #DrpDwnMn0 {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .XwCBRN > nav,
  .R_TAzU {
    position: static !important;
    height: auto !important;
    width: 100% !important;
  }

  .y7qwii {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: normal !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }

  .y7qwii > li,
  .y7qwii > .Tg1gOB {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .y7qwii .UiHgGh {
    display: block !important;
    width: auto !important;
    height: auto !important;
    /* comfortable tap target */
    padding: 10px 4px !important;
  }

  .y7qwii .JS76Uv {
    line-height: 1.2 !important;
    font-size: 15px !important;
    padding: 0 10px !important;
  }

  /* Keep the desktop hover-dropdown panels from appearing in the flow. */
  .XwCBRN .h3jCPd {
    display: none !important;
  }

  /* ------------------------------------------------------------- 8. footer
     Instagram / SOC / Local 600 sit on two desktop grid rows (Instagram at
     left:0, the two badges at left:354 and left:503). The generic stacking
     puts them in a single column; keep them on one row instead.
     This overrides the generic mesh-child rule above by source order — both
     selectors have the same specificity. */

  [data-mesh-id="SITE_FOOTERinlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px 22px !important;
    box-sizing: border-box !important;
  }

  [data-mesh-id="SITE_FOOTERinlineContent-gridContainer"] > * {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* Scale the badges down so all three fit one row even at 320px
     (88 * 3 + two 12px gaps = 288). */
  #comp-lmh0yooc,
  #comp-lcztbjfj {
    width: 88px !important;
    height: auto !important;
  }

  /* The social bar sizes its list item and <img> from --item-size, so setting
     that one variable matches Instagram to the two badges. */
  #iaswh9cj {
    width: 88px !important;
    height: 88px !important;
    --item-size: 88px;
  }

  #iaswh9cj ul,
  #iaswh9cj li {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The original icon asset is only 49px square, so at 88px it would be soft.
     Swap in a 264px copy for mobile via `content` rather than editing the
     <img> in the HTML — that keeps the desktop markup (and its srcset)
     completely untouched. Browsers without `content` on <img> just keep the
     original, which is a slight blur, not a break. */
  #iaswh9cj img {
    content: url("/images/instagram-264.png");
  }

  /* --------------------------------------------------------- 9. text insets
     Full-bleed text is uncomfortable to read; media stays edge-to-edge. */

  .wixui-rich-text {
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ------------------------------------------- 10. custom players (agw-*)
     These were hand-built to replace dead Wix widgets. They're already fluid;
     they only need protecting from the generic height/width resets above. */

  /* reel.html — the native <video> hero. Its children are absolutely
     positioned, so `height:auto` alone collapses it; give it the 16:9 ratio
     its desktop size (1109x624) already implies. */
  .wixui-video-player {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }

  /* reel.html — shrink the oversized desktop play button. */
  #agReelPlay svg {
    width: 72px !important;
    height: 72px !important;
  }

  /* works.html — the thumbnail strip. The side gutters exist to hold the
     scroll arrows; on touch you just swipe, so reclaim that width. */
  .agw-striprow {
    padding: 0 8px !important;
  }

  .agw-arrow {
    display: none !important;
  }

  .agw-tile {
    flex: 0 0 190px !important;
  }

  .agw-ftitle {
    font-size: 15px !important;
    padding: 34px 14px 12px !important;
  }

  /* booking.html — the form already collapses to one column via its own
     `@media(max-width:760px)`; it just needs edge insets and touch sizing. */
  .agf-form {
    box-sizing: border-box !important;
    padding: 0 20px !important;
  }

  /* 16px is the threshold below which iOS auto-zooms on focus. */
  .agf-field input,
  .agf-field select,
  .agf-field textarea {
    font-size: 16px !important;
  }

  .agf-submit {
    width: 100% !important;
    padding: 14px 18px !important;
  }

  .agf-modal {
    padding: 28px 22px !important;
  }

  .agf-modal-msg {
    font-size: 19px !important;
  }

  /* ------------------------------------------------ 11. per-page corrections
     Cases where the generic reflow above is right for the site but wrong for
     one specific component. Keyed off site-unique Wix component ids. */

  /* bio — the portrait is floated so desktop paragraphs wrap around it. At
     phone width that leaves a ~90px-wide column of text beside it, which is
     unreadable. Drop the float and let it sit above the copy. */
  .wixui-rich-text img[style*="float"] {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 240px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 18px !important;
  }

  /* clients — a plain-text list of client names sits *underneath* the logo
     sheet image on desktop (same grid cell, image painted over it), so it is
     never seen. Stacking un-overlaps it, which would insert ~500px of
     apparently-blank space above the logos. Keep it hidden. */
  #comp-jd6t7agv {
    display: none !important;
  }

  /* clients — the logo sheet has no internal margin, so full-bleed it sits
     flush against both screen edges. Inset it. */
  #comp-lmi7hzj4 {
    box-sizing: border-box !important;
    padding: 0 16px !important;
  }

  /* index — hero background video.
     The source is 1920x802 (2.39:1 cinemascope). The desktop hero is a nearly
     square 980x1008 box, so `object-fit:cover` crops the sides hard — at a
     phone's proportions that left only ~26% of the frame visible.
     The hero is sized off the video's own ratio, then made taller in two 20%
     steps: 802 -> 962 -> 1154. Since the box is already full-bleed, "bigger"
     can only mean taller, and with object-fit:cover that trades back width —
     about 70% of the frame stays visible now, versus 100% at the native ratio.

     `aspect-ratio` is measured against the element's own width, unlike a vw
     min-height: this page reserves a scrollbar, so the hero is ~15px narrower
     than 100vw and a vw-based height would still clip a few percent. */
  #comp-lmgz8x7f,
  #comp-lmgz8x7u {
    aspect-ratio: 1920 / 1154 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Breathing room above and below the hero. Margin rather than padding so it
     sits outside the aspect-ratio box and doesn't shrink the video.
     The gap is black-on-black, so it reads as the video sitting lower rather
     than as a visible band — hence the generous value above it. */
  #comp-lmgz8x7f {
    margin-top: 48px !important;
    margin-bottom: 26px !important;
  }

}