/* ============================================
   OCEAN'S FREEDOM — COMPLETE MOBILE CSS v1.0
   Covers: iPhone SE (375px) to iPhone 17 Pro Max (430px)
   Plus all Android devices
   ============================================ */

@viewport { width: device-width; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */

.entry-content,
.post-content,
.page-content,
.site-content,
.wp-block-group,
.wp-block-column,
.wp-block-columns {
  max-width: 100% !important;
  overflow-x: hidden !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  font-size: .82rem;
}

.wp-block-embed,
.wp-block-embed__wrapper {
  max-width: 100% !important;
}

/* ============================================
   NAVIGATION
   ============================================ */

@media (max-width: 768px) {
  .site-header, #masthead, .wp-block-site-header {
    padding: 10px 16px !important;
  }

  .site-logo img, .custom-logo, .wp-block-site-logo img {
    max-width: 140px !important;
    height: auto !important;
  }

  .main-navigation, .nav-menu, .wp-block-navigation {
    font-size: .85rem !important;
  }

  .menu-toggle, .hamburger, .nav-toggle {
    display: block !important;
    padding: 8px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .main-navigation ul, .nav-menu ul {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .main-navigation li, .nav-menu li {
    width: 100% !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
  }

  .main-navigation a, .nav-menu a {
    padding: 12px 16px !important;
    display: block !important;
    min-height: 44px !important;
  }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

@media (max-width: 480px) {
  h1, .entry-title { font-size: 1.5rem !important; }
  h2              { font-size: 1.25rem !important; }
  h3              { font-size: 1.1rem !important; }
  h4              { font-size: 1rem !important; }
  p               { font-size: .92rem !important; line-height: 1.65 !important; }
  .entry-content  { font-size: .92rem !important; }
}

@media (max-width: 375px) {
  h1, .entry-title { font-size: 1.3rem !important; }
  h2              { font-size: 1.15rem !important; }
  p               { font-size: .88rem !important; }
}

/* ============================================
   BUTTONS AND TOUCH TARGETS (min 44x44px)
   ============================================ */

@media (max-width: 768px) {
  a, button,
  input[type="submit"],
  input[type="button"],
  .btn, .button,
  .wp-block-button__link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  input[type="email"],
  input[type="text"],
  input[type="password"],
  textarea, select {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 8px !important;
  }
}

/* ============================================
   OCEAN EMAIL CAPTURE BARS
   ============================================ */

@media (max-width: 768px) {
  #of-sticky-bar, #of-email-bar {
    flex-direction: column !important;
    padding: 14px 16px !important;
    gap: 10px !important;
    text-align: center !important;
  }

  #of-sticky-bar form, #of-email-bar form {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  #of-sticky-bar input[type="email"],
  #of-email-bar input[type="email"] {
    width: 100% !important;
    min-width: unset !important;
  }

  #of-sticky-bar button, #of-email-bar button {
    width: 100% !important;
  }

  .ocean-email-capture, [class*="ocean-product-box"], [class*="of-capture"] {
    padding: 20px 16px !important;
    margin: 24px 0 !important;
  }

  .ocean-email-capture form {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .ocean-email-capture input,
  .ocean-email-capture button {
    width: 100% !important;
    min-width: unset !important;
  }
}

/* ============================================
   AFFILIATE / PRODUCT BOXES
   ============================================ */

@media (max-width: 768px) {
  .ocean-product-box, .ocean-affiliate-box,
  [class*="affiliate-box"], [class*="product-box"] {
    flex-direction: column !important;
    text-align: center !important;
    padding: 18px 16px !important;
    gap: 12px !important;
  }

  .ocean-product-box a, .book-btn, .rcb-primary {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ============================================
   3D GLOBE - SCUBA MAP
   ============================================ */

@media (max-width: 768px) {
  #sg-wrap, #scuba-map-container {
    border-radius: 12px !important;
    margin: 0 -4px !important;
  }

  #sg-controls, #scuba-controls {
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  #sg-controls select, .sg-cg select, .scuba-control-group select {
    min-width: unset !important;
    width: 100% !important;
    font-size: .8rem !important;
  }

  #sg-scene, #scuba-map-wrapper {
    height: 320px !important;
    min-height: 320px !important;
  }

  #sg-scene canvas { height: 320px !important; }

  #sg-panel, #scuba-info-panel { padding: 16px !important; }

  .sg-stats, .info-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .sg-mbar, .month-bar { gap: 2px !important; }

  .sg-mc, .month-cell {
    font-size: .55rem !important;
    padding: 4px 1px !important;
  }

  .sg-btns { flex-direction: column !important; gap: 6px !important; }
  .sg-btn, .book-btn { width: 100% !important; text-align: center !important; }
}

/* ============================================
   MARINE ANIMAL FINDER — ALL STEPS
   ============================================ */

@media (max-width: 768px) {
  #maf4, #maf5, #af2, #animal-finder {
    border-radius: 14px !important;
    margin: 0 -4px !important;
  }

  .maf4-hero, .maf5-hero, .af2-hero {
    padding: 24px 16px 18px !important;
  }

  .maf4-hero h1, .maf5-hero h1, .af2-hero h2, .maf4-hero h2 {
    font-size: 1.2rem !important;
  }

  .maf4-panel, .maf5-panel, .af2-panel {
    padding: 16px 14px 10px !important;
  }

  /* Animal grid — 3 columns */
  .ag5, .animal-grid, #ag, .ag {
    grid-template-columns: repeat(3, 1fr) !important;
    max-height: 320px !important;
    gap: 6px !important;
  }

  .ac5, .ac, .animal-card {
    padding: 8px 4px 7px !important;
    border-radius: 10px !important;
  }

  .ac5 .em5, .ac .em, .emoji { font-size: 1.35rem !important; }
  .ac5 .nm5, .ac .nm, .aname { font-size: .57rem !important; }

  /* Month grid — 3 cols */
  .mg5, .month-grid4, .month-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
  }

  .mc5, .month-card4, .month-card { padding: 8px 4px !important; }
  .mc5 .ml5, .month-card4 .ml4    { font-size: .75rem !important; }
  .mc5 .ms5, .month-card4 .ms4    { font-size: .55rem !important; }

  /* Level grid — 1 col */
  .lg5, .level-grid4, .level-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Buttons */
  .maf5-btns, .maf4-btns, .af2-btns {
    padding: 10px 14px 16px !important;
    flex-wrap: wrap !important;
  }

  .btn5-find, .btn4-search, .btn5-next, .btn4-next, .af2-btn-search {
    width: 100% !important;
    text-align: center !important;
    font-size: .88rem !important;
  }

  /* Results */
  #maf5-results, #maf4-results, #af2-results {
    padding: 0 14px 20px !important;
  }

  .rcard5, .rcard4, .result-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .rc5-top, .rc4-top, .rc-top { flex-wrap: wrap !important; gap: 8px !important; }

  .rc5-right, .rc4-right {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .rc5-btns, .rc4-btns, .rc-btns { flex-direction: column !important; gap: 6px !important; }
  .rb4, .rc-btn { width: 100% !important; text-align: center !important; }

  .pcard, .personality-card {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  .pcard-traits, .personality-traits { justify-content: center !important; }
  .dna-btn5, .dna-btn { width: 100% !important; }

  .stat-strip5 { flex-wrap: wrap !important; }
  .ss5 { min-width: 50% !important; padding: 10px 4px !important; }

  .season-cal, .season-grid-section { padding: 14px 10px !important; }
  .scal-table table, .sg-table table { font-size: .58rem !important; }
  .sgc { width: 20px !important; height: 16px !important; }

  .budget-controls { grid-template-columns: 1fr !important; }
  .bc-options { flex-wrap: wrap !important; }
  .bco { font-size: .68rem !important; padding: 4px 8px !important; }

  .bb-row { flex-wrap: wrap !important; gap: 4px !important; }
  .bb-cta { flex-direction: column !important; gap: 6px !important; }
  .bb-cta a { text-align: center !important; width: 100% !important; }

  .pack-grid { grid-template-columns: 1fr !important; }

  .share5-btns, .share-btns4, .share-btns { flex-direction: column !important; gap: 6px !important; }
  .sb5, .sb4, .sbtn { width: 100% !important; text-align: center !important; }

  .qp-row, .quick-picks { gap: 4px !important; }
  .qpb, .maf-surprise-btn { font-size: .68rem !important; padding: 5px 10px !important; }

  .conservation-facts, .con-facts { grid-template-columns: 1fr !important; gap: 6px !important; }

  .buddy-form { flex-direction: column !important; }
  .buddy-input, .buddy-submit { width: 100% !important; }

  .sound-bar {
    bottom: 70px !important;
    right: 12px !important;
    padding: 6px 12px !important;
    font-size: .68rem !important;
  }
}

/* ============================================
   IPHONE SE / SMALL ANDROID (375px)
   ============================================ */

@media (max-width: 390px) {
  .maf4-hero h1, .maf5-hero h1 { font-size: 1.1rem !important; }
  .hero-badge, .maf5-hero .hero-badge {
    font-size: .58rem !important;
    padding: 4px 10px !important;
  }
  .conservation-tag { font-size: .62rem !important; }
}

/* 2-col animal grid on very small screens */
@media (max-width: 360px) {
  .ag5, .animal-grid, #ag, .ag {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* iPhone 17 / Pro Max (391-430px) — 4-col grids fit */
@media (min-width: 391px) and (max-width: 430px) {
  .ag5, .animal-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .mg5, .month-grid4 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ============================================
   WORDPRESS ADMIN BAR
   ============================================ */

@media (max-width: 768px) {
  html.admin-bar { margin-top: 46px !important; }
}

/* ============================================
   SAFE AREA INSETS (Dynamic Island / notch)
   ============================================ */

#of-sticky-bar, #of-email-bar {
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  padding-left:   max(16px, env(safe-area-inset-left)) !important;
  padding-right:  max(16px, env(safe-area-inset-right)) !important;
}

.sound-bar {
  bottom: max(70px, calc(60px + env(safe-area-inset-bottom))) !important;
  right:  max(12px, env(safe-area-inset-right)) !important;
}

/* ============================================
   PRINT
   ============================================ */

@media print {
  .sound-bar, #of-sticky-bar, .maf5-btns, .maf4-btns { display: none !important; }
}