/* ===========================================================================
   pm-mobile.css — mobile-first readability layer (28 October 2026)
   ---------------------------------------------------------------------------
   Loaded after pm-design-system.css. It keeps the brand exactly as it is
   (green #00BF63, black, white, Maharlika, the real logo) and changes only
   how the pages read on a phone:

   1. Headings and labels in normal sentence case instead of ALL CAPITALS,
      which is slower to read for everyone and harder for second-language
      readers.
   2. The decorative network lines stay behind the hero on large screens but
      are hidden on phones, where they ran straight through the text.
   3. A "Book a seat" button sits in the header on phones, so booking is one
      tap from anywhere on the site.
   4. Bigger body text, full-width buttons and 48px+ touch targets on phones.

   To undo everything: remove the one <link> to this file from
   includes/layout/head.php. Nothing else depends on it.
   =========================================================================== */

/* -- 1. Sentence case everywhere, all screen sizes ------------------------ */
.pm-display,
.pm-h1,
.pm-h2,
.pm-h3--caps,
.pm-eyebrow,
.pm-label,
.pm-stat__label,
.pm-price__note,
.pm-field__label,
.pm-table th,
.pm-nav__link,
.pm-btn,
.pm-btn--link,
.pm-brand__word {
  text-transform: none;
  letter-spacing: 0;
}

.pm-display { letter-spacing: -0.01em; }
.pm-h1,
.pm-h2 { letter-spacing: -0.005em; line-height: 1.12; }
.pm-btn { font-size: 15px; letter-spacing: 0.01em; }
.pm-nav__link { font-size: 15px; }
.pm-eyebrow,
.pm-label { font-size: 14px; }
.pm-stat__label,
.pm-price__note { font-size: 14px; }
.pm-field__label { font-size: 15px; }

/* The header "Book a seat" button: hidden on large screens, where the nav
   already carries the same button. */
.pm-header__book { display: none; }

/* -- 2–4. Phones and small tablets --------------------------------------- */
@media (max-width: 900px) {

  /* Comfortable reading size. */
  body.pm { font-size: 17px; }
  .pm-lede { font-size: 18px; line-height: 1.55; color: var(--pm-black); }
  .pm-body { font-size: 16px; line-height: 1.6; }

  /* Headline sizes that fit a phone without breaking words. */
  .pm-display { font-size: clamp(32px, 9vw, 42px); line-height: 1.08; max-width: none; }
  .pm-h1 { font-size: clamp(28px, 8vw, 36px); max-width: none; }
  .pm-h2 { font-size: clamp(24px, 6.6vw, 30px); }

  /* The network motif ran through the hero text. Hide it on phones. */
  .pm-motif { display: none; }

  /* Header: logo, Book a seat, Menu — all reachable with a thumb. */
  .pm-header__bar { min-height: 64px; gap: 10px; }
  .pm-brand__logo { height: 34px; width: auto; }
  .pm-header__book {
    display: inline-flex;
    margin-left: auto;
    min-height: 44px;
    padding: 0 16px;
    font-size: 15px;
  }
  html[data-pm-js="on"] .pm-nav-toggle { margin-left: 0; min-height: 44px; }

  /* Open menu: large, plain links. */
  html[data-pm-js="on"] .pm-nav__link { font-size: 22px; }

  /* Main actions full width, stacked, easy to hit. */
  .pm-btn-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .pm-btn-row > .pm-btn { width: 100%; min-height: 52px; }
  .pm-section-head { gap: 14px; }
  .pm-section-head__action { width: 100%; }

  /* Figures row: two across instead of a long single column. */
  .pm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-stat__value { font-size: 30px; }

  /* Form controls: big enough to tap, text big enough that phones do not
     zoom in when a field is focused (needs 16px+). */
  .pm-input,
  .pm-select,
  .pm-textarea { font-size: 16px; min-height: 52px; }

  /* Event cards: price and buttons get room to breathe. */
  .pm-card { padding: 22px; }
}

/* -- 5. Typeface (28 Oct 2026) --------------------------------------------
   Google Sans Flex everywhere; San Francisco on Apple devices, then each
   system's own sans-serif, if Google Fonts is unreachable. Every rule in the
   design system reads var(--pm-font), so this one line changes the whole site. */
:root {
  --pm-font: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Arial, sans-serif;
}
/* ".pm h1" in the design system pins every heading to 400, which suited
   Maharlika. The extra .pm here outranks it so a sans-serif reads firmly. */
.pm .pm-display, .pm .pm-h1, .pm .pm-h2 { font-weight: 600; }
.pm .pm-h3, .pm .pm-h4, .pm .pm-stat__value, .pm .pm-price, .pm .pm-listing__range { font-weight: 500; }
.pm .pm-btn, .pm .pm-eyebrow, .pm .pm-label, .pm .pm-field__label { font-weight: 500; }
.pm strong, .pm b { font-weight: 600; }

/* -- 6. No network lines, tighter spacing (28 Oct 2026) -------------------
   Removes the green network-line graphic on every screen size and
   tightens the space between and inside sections, on desktop and mobile. */

/* The green network lines: gone everywhere. */
.pm-motif { display: none !important; }

/* Space between sections. */
.pm-section { padding-top: clamp(32px, 4.5vw, 64px); padding-bottom: clamp(32px, 4.5vw, 64px); }
.pm-section--tight { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 40px); }

/* Space inside sections. */
.pm-section-head { padding-bottom: 14px; gap: 12px; }
.pm .pm-mt-lg { margin-top: 18px; }
.pm .pm-mt-sm { margin-top: 6px; }
.pm-btn-row { gap: 10px; }
.pm-card { padding: clamp(18px, 2vw, 24px); }
.pm-card__foot { padding-top: 12px; }
.pm-cell { padding: clamp(16px, 2vw, 24px); }
.pm-lede { margin-bottom: 0; }

/* Header and footer: slimmer. */
.pm-header__bar { min-height: 64px; }
.pm-footer { padding-top: clamp(32px, 4vw, 56px); padding-bottom: 24px; }

/* Event images: wide instead of square, so a course card is not a full
   screen tall on a phone. */
.pm-banner { aspect-ratio: 16 / 9; }

@media (max-width: 900px) {
  .pm-section { padding-top: 28px; padding-bottom: 28px; }
  .pm-section--tight { padding-top: 20px; padding-bottom: 20px; }
  .pm-display { font-size: clamp(30px, 8.5vw, 38px); }
  .pm-grid--ruled > * { padding: 16px; }
  .pm-stat__value { font-size: 26px; }
  .pm-stat__label { margin-top: 4px; }
}

/* -- 7. Vision and mission band (28 Oct 2026) ---------------------------- */
.pm-vm__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.pm-vm__text { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: var(--pm-on-dark-muted, #d0d0d0); max-width: 62ch; }
.pm-vm__text--lead { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; font-weight: 500; color: var(--pm-white); max-width: 28ch; }
@media (min-width: 900px) {
  .pm-vm__grid { grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
  .pm-vm__item + .pm-vm__item { border-left: 1px solid var(--pm-on-dark-rule, #333); padding-left: 56px; }
}