/* =========================================================
   Personacare — mobile.css
   Phone and tablet refinements. Loaded after style.css and
   after any page-level <style>, so these rules win.

   Nothing here changes the desktop layout: every rule sits
   inside a max-width media query, a (hover:none) query, or
   uses a variable that only matters on small screens.
   ========================================================= */

/* --- height of the sticky navbar, kept up to date by main.js --- */
:root{ --pa-nav-h: 74px; }

/* Anchor links (#ws1, #cluster-2, article ids) must not land
   underneath the sticky navbar. */
[id]{ scroll-margin-top: calc(var(--pa-nav-h) + 14px); }

/* Respect the system "reduce motion" setting. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* =========================================================
   1. Touch devices: hover effects should not stick after a tap
   ========================================================= */
@media (hover: none){
  .pa-card:hover,
  .pa-focus-card:hover,
  .btn:hover,
  .btn-persona-primary:hover,
  .btn-persona-outline:hover,
  .btn-whatsapp:hover,
  .pa-whatsapp-float:hover{ transform:none; }

  .pa-pill:hover{ background: var(--pa-white); color: var(--pa-ink); border-color:#ece2d4; }
  .pa-video-thumb:hover .pa-video-play{ background: rgba(59,52,46,0.25); }
}

/* Visible focus ring for keyboard and switch-control users. */
a:focus-visible, button:focus-visible,
.btn:focus-visible, .accordion-button:focus-visible{
  outline: 3px solid var(--pa-gold);
  outline-offset: 2px;
}

/* =========================================================
   2. Navbar
   ========================================================= */
.pa-logo-img{ max-width:300px; }

@media (max-width: 991.98px){
  .pa-navbar{ padding:.55rem 0; }
  .pa-navbar.scrolled{ padding:.4rem 0; }

  /* The logo was rendering up to 300px wide, crowding the menu button. */
  .pa-logo-img{ max-width:none !important; max-height:46px; width:auto; }

  .navbar-toggler{
    width:46px; height:46px; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    color: var(--pa-ink);
  }
  .navbar-toggler .bi{ font-size:1.75rem !important; line-height:1; }
  .navbar-toggler:focus{ box-shadow:none; }

  /* The open menu now reads as a panel instead of floating text
     over whatever is scrolling behind it. */
  .pa-navbar .navbar-collapse{
    background: var(--pa-cream);
    border:1px solid #ece2d4;
    border-radius: var(--pa-radius-md);
    box-shadow: var(--pa-shadow-soft);
    margin-top:.7rem;
    padding:.4rem .25rem;
    /* Deliberately a fixed figure, with no reference to --pa-nav-h. The menu
       lives inside the navbar, so any height measured from the navbar while
       the menu is open feeds back on itself and crushes the panel. */
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .pa-nav .nav-item + .nav-item{ border-top:1px solid #f0e8dc; }
  .pa-nav .nav-link{
    padding:.85rem 1rem !important;   /* comfortable 44px+ tap target */
    display:flex; align-items:center; gap:.5rem;
  }
  .pa-nav .nav-link::after{ display:none; }   /* underline slide is a desktop effect */
  .pa-nav .nav-link.active{
    background: rgba(185,138,94,.10);
    border-radius: var(--pa-radius-sm);
  }
  /* The home item is an icon only — label it on mobile. */
  .pa-nav .nav-item:first-child .nav-link::before{
    content:"Home"; font-size:1rem; order:2;
  }
  .pa-nav .nav-item:first-child .nav-link .bi{ order:1; }
}

@media (max-width: 575.98px){
  .pa-logo-img{ max-height:40px; }
}

/* =========================================================
   3. Rhythm: section and container spacing
   ========================================================= */
@media (max-width: 767.98px){
  .container{ padding-left:1.15rem; padding-right:1.15rem; }

  .section-py{ padding-top:3rem; padding-bottom:3rem; }
  .pa-page-header{ padding:2.2rem 0 2.2rem; }
  .pa-hero{ padding:1.75rem 0 2.5rem; }

  /* Several section headings carry an inline margin-top:120px,
     which leaves a near-empty screen on a phone. */
  [style*="margin-top:120px"]{ margin-top:3.25rem !important; }

  .mb-5{ margin-bottom:2.25rem !important; }
  .my-4{ margin-top:1.25rem !important; margin-bottom:1.25rem !important; }
}

/* =========================================================
   4. Type scale
   ========================================================= */
@media (max-width: 767.98px){
  body{ font-size:1rem; line-height:1.65; }

  h1{ line-height:1.22; }
  h2{ font-size:1.55rem; line-height:1.3; }
  h3{ font-size:1.3rem; }
  h4{ font-size:1.15rem; }
  h5{ font-size:1.05rem; }

  /* 1.35rem serif was close to heading size and dominated small screens. */
  .lead-serif{ font-size:1.1rem; line-height:1.65; }

  .section-eyebrow{ font-size:.7rem; letter-spacing:.14em; }
  .section-eyebrow::before{ width:18px; }

  /* Justified text on a narrow column creates rivers of white space. */
  [style*="text-align: justify"],
  [style*="text-align:justify"]{ text-align:left !important; }
}

/* =========================================================
   5. Cards, badges and other components
   ========================================================= */
@media (max-width: 767.98px){
  .pa-card{ padding:1.5rem 1.25rem; border-radius: var(--pa-radius-sm); }
  .pa-focus-card{ padding:1.15rem 1.1rem; gap:.8rem; border-radius: var(--pa-radius-sm); }
  .pa-icon-circle{ width:46px; height:46px; font-size:1.15rem; margin-bottom:.85rem; }

  .pa-credential{ padding:1rem .6rem; border-radius: var(--pa-radius-sm); }
  .pa-credential .num{ font-size:1.6rem; line-height:1.15; }
  .pa-credential .fs-90{ font-size:.78rem; line-height:1.35; display:block; }

  .pa-publisher-badge{ padding:.45rem .95rem; font-size:.82rem; margin:.15rem; }
  .pa-pill{ padding:.4rem .85rem; font-size:.8rem; margin:.18rem; }

  .pa-hero-badge{ font-size:.78rem; padding:.35rem .8rem; }

  .pa-form-card{ padding:1.5rem 1.15rem; border-radius: var(--pa-radius-md); }
  .pa-coming-soon{ padding:2.25rem 1.25rem; border-radius: var(--pa-radius-md); }
  .pa-quote blockquote{ font-size:1.18rem; line-height:1.5; }

  /* Timeline: the 56px dot plus 4.2rem indent left very little text width. */
  .pa-timeline::before{ left:21px; }
  .pa-timeline-item{ padding-left:3.4rem; margin-bottom:1.75rem; }
  .pa-timeline-dot{ width:44px; height:44px; font-size:1.05rem; border-width:3px; }

  /* Captions sitting inside a rounded image frame need breathing room. */
  .pa-hero-visual p{ padding:.6rem .9rem; margin:0; font-size:.85rem; }

  .pa-accordion .accordion-button{ font-size:1rem; padding:1.05rem 0; }
  .pa-accordion .accordion-body{ font-size:.95rem; }
}

/* =========================================================
   5b. Hero photo and the two note cards beside it
   ========================================================= */
@media (max-width: 991.98px){
  /* The hero photo carries an inline max-width (700px) meant for the
     desktop column. On a phone that is wider than the screen, so the
     picture was being cut off at the right. Fit it to the column. */
  .pa-hero-figure img{ max-width:100% !important; width:100%; height:auto; }

  /* The note cards used to be hidden below 992px. They now sit under the
     photo as ordinary cards instead of floating over its corners. */
  .pa-hero-figure{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.7rem;
    margin-bottom:.25rem;
  }
  .pa-hero-figure > *:not(.pa-floating-card){
    grid-column:1 / -1;
    margin-bottom:.3rem;
  }
  .pa-hero-figure .pa-floating-card{
    display:block;
    position:static;
    margin:0;
    padding:.8rem .9rem;
    border:1px solid #ece2d4;
    box-shadow: var(--pa-shadow-card);
    /* the inline top/left/right offsets are ignored once it is static */
  }
  .pa-hero-figure .pa-floating-card .fs-4{ font-size:1.15rem !important; }
  .pa-hero-figure .pa-floating-card .fs-90{ font-size:.8rem; line-height:1.35; }
  .pa-hero-figure .pa-floating-card strong{ line-height:1.3; }
}

/* On the narrowest phones two cards side by side get too cramped. */
@media (max-width: 420px){
  .pa-hero-figure{ grid-template-columns:1fr; gap:.6rem; }
}

/* A single stat row of four items reads better as a 2x2 grid. */
@media (max-width: 575.98px){
  .pa-hero-stats{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:.9rem 1rem !important;
  }
  .pa-hero-stats .fs-5{ font-size:1.15rem !important; }
  .pa-hero-stats .fs-90{ font-size:.8rem; line-height:1.3; display:block; }
}

/* =========================================================
   6. Forms
   ========================================================= */
@media (max-width: 767.98px){
  /* iOS zooms the whole page in when a focused field is under 16px. */
  .pa-form .form-control,
  .pa-form .form-select,
  .pa-form textarea{ font-size:16px; padding:.75rem .9rem; }
  .pa-form label{ font-size:.88rem; }
  .pa-form .form-check-label{ line-height:1.5; }
  .btn-lg{ padding:.8rem 1.4rem; font-size:1rem; }
}

/* =========================================================
   7. Floating buttons and footer
   ========================================================= */
@media (max-width: 767.98px){
  .pa-whatsapp-float{
    width:52px; height:52px; font-size:1.45rem;
    right:14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .pa-back-top{
    width:38px; height:38px;
    right:21px; bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* Keep the floating buttons from covering the last lines of the footer. */
  .pa-footer{ padding:2.75rem 0 1.25rem; }
  .pa-footer .container > .d-flex{ gap:.5rem; text-align:center; padding-bottom:3.5rem; }
  .pa-footer h6{ margin-bottom:.8rem; font-size:1rem; }
  .pa-footer .row > [class*="col-"]{ margin-bottom:.25rem; }
}

/* =========================================================
   8. Blog / article page
   ========================================================= */
@media (max-width: 767.98px){
  /* 16:7 crops a portrait-ish lead photo down to a sliver on a phone. */
  .pa-article-lead img{ aspect-ratio:4/3; }
  .pa-article-title{ line-height:1.25; }
  .pa-article-standfirst{ font-size:1.05rem; }
  .pa-article-body{ font-size:1rem; line-height:1.75; }
  .pa-article-body h3{ font-size:1.22rem; margin:2rem 0 .8rem; }
  .pa-article-body h4{ font-size:1.08rem; margin:1.7rem 0 .7rem; }
  .pa-article-body .pa-pullquote{ padding:1.1rem 1.1rem; font-size:1.05rem; margin:1.8rem 0; }
  .pa-article + .pa-article{ margin-top:3.5rem; }
  .pa-article-divider{ margin-top:3rem; }

  .pa-article-index a{ flex-wrap:wrap; gap:.15rem .6rem; }
  .pa-index-meta{ white-space:normal; }

  /* The mini player used to sit on top of the WhatsApp button. */
  .pa-miniplayer{
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 20px);
    padding:.55rem .6rem;
  }
  .pa-audio-tool{ padding:.35rem .55rem; }
}

/* =========================================================
   9. Last resort against sideways scrolling
   ========================================================= */
@media (max-width: 767.98px){
  img, svg, video, iframe{ max-width:100%; height:auto; }
  pre, table{ max-width:100%; overflow-x:auto; }
}