/* mobile.css — responsive overrides for gulfbeachbride.com
   Loaded by every page. Activates below 900px. */

/* Burger is injected on every page by mobile.js; hide it by default at desktop */
.ml-burger { display: none; }

@media (max-width: 900px) {

  html, body { overflow-x: hidden; }
  img { max-width: 100%; height: auto; }

  /* ───── Press strip (forced single line) ───── */
  .ml-press {
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 8px !important;
    font-size: 8.5px !important;
    letter-spacing: 0.18em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  /* ───── Header bar (logo + badge reparented INTO nav-wrap by mobile.js) ───── */
  .ml-nav-wrap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 12px 60px 12px 14px !important;
    background: #2D4A5C !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 72px;
  }

  /* Logo: inline, small, no drop shadow (reparented child of nav-wrap on mobile) */
  .ml-nav-wrap > .ml-nav-logo {
    position: static !important;
    top: auto !important; left: auto !important;
    display: flex; align-items: center;
    flex-shrink: 0;
  }
  .ml-nav-wrap > .ml-nav-logo img {
    height: 48px !important;
    width: auto !important;
    filter: none !important;
    display: block;
  }

  /* Fallback: if logo wasn't reparented (still in .ml-stage), hide it on mobile to avoid the floating-above-nav bug */
  .ml-stage > .ml-nav-logo { display: none !important; }
  .ml-stage > .ml-couples-choice { display: none !important; }

  /* Couples' Choice badge inside nav-wrap */
  .ml-nav-wrap > .ml-couples-choice {
    display: flex !important;
    align-items: center;
    position: static !important;
    margin: 0 !important;
    flex-shrink: 0;
  }
  .ml-nav-wrap > .ml-couples-choice img {
    width: 48px !important;
    height: 48px !important;
    filter: none !important;
    display: block;
  }

  /* ───── Hamburger button (visible on mobile only; hidden on desktop by the default rule outside this @media block) ───── */
  .ml-burger {
    display: flex !important;
    position: absolute;
    top: 50%; right: 14px;
    transform: translateY(-50%);
    width: 42px; height: 42px;
    background: transparent;
    border: 1px solid rgba(230, 207, 148, 0.7);
    border-radius: 4px;
    flex-direction: column;
    gap: 5px; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    z-index: 100;
  }
  .ml-burger span {
    display: block; width: 20px; height: 2px;
    background: #FFFCF6;
    transition: transform .25s ease, opacity .2s ease;
  }
  body.mobile-nav-open .ml-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.mobile-nav-open .ml-burger span:nth-child(2) { opacity: 0; }
  body.mobile-nav-open .ml-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ───── Nav drawer ───── */
  .ml-nav {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 84px 28px 40px !important;
    background: #2D4A5C !important;
    z-index: 90;
    transform: translateX(100%) !important;
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
    overflow-y: auto;
    font-size: 14px !important;
    letter-spacing: 0.24em !important;
    text-align: left !important;
  }
  body.mobile-nav-open .ml-nav { transform: translateX(0) !important; }
  body.mobile-nav-open { overflow: hidden; }

  .ml-nav > li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 252, 246, 0.10);
    list-style: none;
  }
  .ml-nav > li > a,
  .ml-nav > li > .ml-nav-trigger {
    display: block !important;
    width: 100%;
    padding: 18px 4px !important;
    text-align: left !important;
    border-bottom: none !important;
    text-shadow: none !important;
    background: transparent !important;
    color: #FFFCF6 !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    text-transform: uppercase !important;
  }
  .ml-nav > li > a:hover,
  .ml-nav > li > .ml-nav-trigger:hover { color: #E6CF94 !important; }

  /* Locations submenu — always expanded inside drawer */
  .ml-nav-menu,
  .ml-nav-menu.wide {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 14px 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .ml-nav-menu.wide ul {
    columns: 2 !important;
    column-gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .ml-nav-menu.wide .ml-nav-menu-heading {
    padding: 0 0 8px !important;
    color: #C9A35F !important;
    font-size: 10px !important;
  }
  .ml-nav-menu a {
    color: #F2E4C2 !important;
    padding: 7px 0 !important;
    font-size: 13px !important;
    font-style: italic;
  }
  .ml-nav-menu a:hover { background: transparent !important; color: #E6CF94 !important; }
  .ml-nav .caret { display: none !important; }

  /* ───── HOME ONLY: float header over the video hero (no solid teal bar) ───── */
  body:has(.ml-hero-video) .ml-nav-wrap {
    position: absolute !important;
    top: 32px !important;     /* press strip height */
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(180deg, rgba(11,19,24,0.55) 0%, rgba(11,19,24,0.15) 70%, transparent 100%) !important;
    z-index: 30 !important;
    min-height: 64px !important;
  }
  body:has(.ml-hero-video) .ml-burger span {
    background: #FFFCF6 !important;
  }
  /* Add headroom so hero copy doesn't sit under the floating header */
  body:has(.ml-hero-video) .ml-hero {
    padding-top: 140px !important;
  }

  /* ───── HERO — works for landing, meet-mel, inquire, locations, preferred-vendors ───── */
  .ml-hero, .mm-hero, .iq-hero, .loc-hero, .pv-hero {
    min-height: 520px !important;
    padding: 72px 18px 56px !important;
  }
  .ml-hero-inner { max-width: 100% !important; }

  /* Meet Mel hero — shift framing left on mobile so more of subject's left side is in view */
  .mm-hero {
    background-position: 28% 35% !important;
  }

  .ml-h1, .mm-h1, .iq-h1, .loc-h1, .pv-h1 {
    font-size: 50px !important;
    line-height: 1.05 !important;
    text-wrap: balance;
  }
  .ml-h1 .script, .mm-h1 .script, .iq-h1 .script, .loc-h1 .script, .pv-h1 .script {
    font-size: 1.05em !important;
  }
  .ml-lead, .pv-lead {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin: 14px auto 0 !important;
    padding: 0 6px;
  }
  .ml-eyebrow, .mm-eyebrow, .iq-eyebrow, .loc-eyebrow, .pv-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.26em !important;
  }
  .ml-eyebrow.rule::before, .ml-eyebrow.rule::after,
  .mm-eyebrow.rule::before, .mm-eyebrow.rule::after,
  .iq-eyebrow.rule::before, .iq-eyebrow.rule::after {
    width: 20px !important;
  }
  .ml-cta-row {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 26px !important;
    align-items: center !important;
  }
  .ml-cta-row a,
  .ml-cta-row button,
  .ml-cta-gallery {
    width: 100% !important;
    max-width: 320px !important;
    min-width: 0 !important;
    font-size: 12px !important;
    letter-spacing: 0.26em !important;
    padding: 14px 24px !important;
    min-height: 50px !important;
  }
  .ml-divider { margin-top: 36px !important; }

  /* Hero quote-style paragraph (used in meet-mel hero) */
  .mm-hero p, .iq-hero p, .loc-hero p, .pv-hero p {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  /* ───── Sections ───── */
  .ml-section, .mm-section, .iq-section, .loc-section, .pv-section {
    padding: 56px 18px !important;
  }
  .ml-section-header, .pv-section-header { margin-bottom: 36px !important; }

  .ml-h2, .loc-h2, .pv-h2 {
    font-size: 34px !important;
    line-height: 1.1 !important;
    text-wrap: balance;
  }
  .ml-h2 .script, .loc-h2 .script, .pv-h2 .script { font-size: 1.10em !important; }

  .ml-sub, .pv-sub {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-top: 16px !important;
    padding: 0 4px;
  }

  /* Standalone h2's set inline in markup — catch by font-family */
  section h2[style*="Cormorant Garamond"] {
    font-size: 34px !important;
    line-height: 1.1 !important;
  }

  /* ───── Meet Mel page-specific ───── */
  .mm-bio-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 0 4px;
  }
  .mm-bio p, .mm-bio p.lead, .mm-bio p.italic-close {
    font-size: 16px !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
  }
  .mm-bio p.lead { font-size: 22px !important; line-height: 1.4 !important; }
  .mm-sig { font-size: 44px !important; margin-top: 24px !important; }
  .mm-portrait { max-width: 360px; margin: 0 auto; }
  .mm-ig-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 32px !important;
  }

  /* ───── Inquire page ───── */
  .ml-form-grid,
  .iq-grid,
  .loc-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .iq-form-card,
  .loc-contact-card,
  .iq-studio {
    padding: 24px !important;
    max-width: 100% !important;
  }
  #inquire form,
  section form {
    padding: 24px !important;
  }
  #inquire form input,
  #inquire form textarea,
  form input,
  form textarea {
    font-size: 16px !important; /* prevents iOS auto-zoom on focus */
  }
  .iq-h2 {
    font-size: 34px !important;
    line-height: 1.1 !important;
  }
  .iq-sub, .iq-consent { max-width: 100% !important; }

  /* ───── Preferred Vendors page ───── */
  .pv-planners-grid,
  .pv-region-grid,
  .pv-venues {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .pv-region-card { padding: 24px !important; }
  .pv-planner { padding: 20px !important; }

  /* ───── Location page grids (loc-feature-image, intro, body) ───── */
  .loc-intro {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .loc-feature-image { max-width: 100% !important; }
  .loc-body p { font-size: 16px !important; line-height: 1.75 !important; }

  /* Generic 3-up grid */
  .ml-3up {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Quote / testimonial */
  .ml-quote {
    font-size: 24px !important;
    line-height: 1.35 !important;
    margin-top: 22px !important;
    padding: 0 8px;
  }
  .ml-quote .open { font-size: 52px !important; }
  .ml-attr { font-size: 10px !important; margin-top: 14px !important; }

  /* ───── Footer ───── */
  footer { padding: 28px 18px 22px !important; }
  footer img { height: 88px !important; }
  footer > div[style*="flex"],
  footer > div:last-child > div {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }
  footer a { word-break: break-word; }

  /* ───── Defensive: any inline 2/3-col grid on subpages ───── */
  div[style*="grid-template-columns: 1fr 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr 1fr"],
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  div[style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  div[style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  div[style*="grid-template-columns: repeat(2"],
  div[style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  div[style*="grid-template-columns: 1.1fr 1fr"],
  div[style*="grid-template-columns:1.1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.1fr"],
  div[style*="grid-template-columns:1fr 1.1fr"],
  div[style*="grid-template-columns: 1fr 1.15fr"],
  div[style*="grid-template-columns:1fr 1.15fr"],
  div[style*="grid-template-columns: 1.15fr 1fr"],
  div[style*="grid-template-columns:1.15fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Defensive: huge inline h1/h2 font sizes — shrink */
  h1[style*="font-size:96px"], h1[style*="font-size: 96px"] { font-size: 50px !important; }
  h2[style*="font-size:56px"], h2[style*="font-size: 56px"],
  h2[style*="font-size:48px"], h2[style*="font-size: 48px"] { font-size: 34px !important; }
}

/* Tablet portrait fine-tune */
@media (min-width: 600px) and (max-width: 900px) {
  .ml-h1, .mm-h1, .iq-h1, .loc-h1, .pv-h1 { font-size: 64px !important; }
  .ml-h2, .loc-h2, .pv-h2 { font-size: 44px !important; }
  .ml-section, .mm-section, .pv-section, .loc-section { padding: 80px 32px !important; }
  .mm-bio-grid { padding: 0 16px; }
  .mm-ig-grid { grid-template-columns: 1fr 1fr 1fr !important; }
}