/* =========================================================
   responsive.css — overrides for phones & tablets (incl. iPad 14.1)
   Depends on existing selectors in styles.css and markup you shared.
   ========================================================= */

/* -----------------------------
   0) Root tweaks & safe gutters
   ----------------------------- */
:root{
  /* Keep existing values; only refine gutters on small screens */
  --brand-blue: #0d6efd; /* Bootstrap primary, per request */
}

/* Slightly larger side padding on narrow screens to avoid edge flush */
@media (max-width: 991.98px){
  .container,
  .hero-inner{ padding-left: clamp(16px, 5vw, 24px); padding-right: clamp(16px, 5vw, 24px); }
}

/* -----------------------------
   1) Sticky NAV that NEVER shrinks
   ----------------------------- */
.navbar.jd-nav{
  position: sticky; top: 0; z-index: 1050;
}

/* Neutralise the shrink behaviour added by scripts.js */
.navbar.jd-nav.shrink{
  min-height: var(--nav-height);       /* keep full height */
  background: #fff;                    /* solid, not translucent */
  box-shadow: none;                    /* no extra shadow on scroll */
}
.navbar.jd-nav.shrink .jd-logo{
  height: calc(var(--nav-height) - 2 * var(--nav-logo-pad-y));
  transform: none;
}

/* -----------------------------
   2) Mobile / iPad: navigation
   ----------------------------- */

/* Blue hamburger button + visible focus */
.navbar-light .navbar-toggler{
  border-color: rgba(13,110,253,.45); /* brand blue */
}
.navbar-light .navbar-toggler:focus{ box-shadow: 0 0 0 .2rem rgba(13,110,253,.25); }

/* Override Bootstrap's default toggler icon to blue */
.navbar-light .navbar-toggler-icon{
  background-image:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(13,110,253)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile menu: stacked items with blue separators */
@media (max-width: 991.98px){
  .navbar.jd-nav .navbar-collapse{ /* Bootstrap collapse target #nav */
    transition: height .25s ease;   /* smooth open/close */
  }
  .navbar.jd-nav .navbar-nav .nav-item + .nav-item{
    border-top: 1px solid var(--brand-blue);
  }
  .navbar.jd-nav .nav-link{
    padding: 14px 0;                /* comfy tap targets */
  }
}

/* Backdrop & body lock used by scripts.js (no class invention, just styling existing hook) */
body.nav-open{ overflow: hidden; }
.nav-backdrop{
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(0,0,0,.25);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
body.nav-open .nav-backdrop{
  opacity: 1; pointer-events: auto;
}

/* -----------------------------
   3) Hero areas: full width, no bleed
   ----------------------------- */

/* Home hero: prefer cover on small devices to avoid side gaps/bleed */
@media (max-width: 1199.98px){
  .home-hero{
    background-size: cover;          /* override base 'contain' */
    background-position: center;     /* centre the art */
    background-color: #000;          /* keeps dark surround if any */
  }
}

/* About hero already uses cover; keep centred and readable on tablets */
@media (max-width: 1199.98px){
  .about-hero{
    background-size: cover;
    background-position: center;
    min-height: 56vh;                /* steady header height on iPad */
  }
}

/* Footer scenic band: avoid side gutters showing behind the art on small screens */
@media (max-width: 1199.98px){
  .footer-bg, .footer-scenic{
    background-size: cover;          /* prevent "letterboxing" on mobile/iPad */
    background-position: center bottom;
  }
}

/* About: show the hero photo FIRST, then clean text (no panel) */
@media (max-width: 991.98px){
  /* Turn the background into a real block using the same URL */
  .about-hero::before{
    content: "";
    display: block;
    width: 100%;
    /* Use a reasonable default ratio; you can tweak later per final webp set */
    aspect-ratio: 1800 / 900;
    background-image: var(--about-hero-img);
    background-size: cover;
    background-position: center;
  }

  /* Prevent the parent from overlaying more image behind the text */
  .about-hero{
    background-image: none !important;   /* we’ve moved it to ::before */
    min-height: auto;                    /* let content define height */
  }

  /* Stack + clean text block */
  .about-hero .hero-row{
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: clamp(12px, 2vw, 24px);
  }

  /* Remove drop shadow & border from the text panel */
  .about-hero-copy{
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 1rem;
  }
}

/* -----------------------------
   4) Stacking behaviour & spacing
   ----------------------------- */

/* Your Bootstrap grid already stacks < lg; ensure custom rows do too */
@media (max-width: 991.98px){
  .hero-row, .org-logos-row{
    flex-direction: column;          /* explicit for safety */
    align-items: center;
    text-align: center;
  }
  .hero-copy,
  .heron-copy,
  .about-hero-copy{
    max-width: 42rem;
    margin-left: auto; margin-right: auto;
    text-align: center;
  }
  .org-logos hr{
    margin-left: auto;               /* keep centred under logo */
    margin-right: auto;
	align:center;
  }
}

/* -----------------------------
   5) Buttons: brief blue press state
   ----------------------------- */

/* Keep your existing styles; add a quick blue active/press feedback */
.btn-outline-dark:active,
.btn-outline-dark:focus:active{
  background-color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #fff !important;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

/* Also when user taps (mobile Safari synthesises :active on tap) */
@media (hover: none){
  .btn-outline-dark:active{
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
  }
}

/* -----------------------------
   6) Small type & rhythm polish
   ----------------------------- */

/* Prevent text hugging edges when images stack above copy */
@media (max-width: 767.98px){
  .hero-copy,
  .heron-copy{ padding-top: .75rem; }
}

/* Ensure heron image doesn't overflow on tiny devices */
@media (max-width: 575.98px){
  .heron{ width: min(90vw, 680px); }
}

/* -----------------------------
   7) Accessibility niceties
   ----------------------------- */

/* Larger focus ring on nav links for keyboard users */
.navbar.jd-nav .nav-link:focus-visible{
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* Preserve smooth scrolling defined in styles.css; ensure anchor offsets still feel right */
@media (max-width: 991.98px){
  [id]{ scroll-margin-top: calc(var(--nav-height, 82px) + 8px); }
}
/*------------------
/* 8) Benefits
-------------------*/
/* Benefits stack alignment (≤ lg) */
@media (max-width: 991.98px){
  /* Give both blocks the same readable width */
  #benefits-list .col-lg-7,
  #benefits-list .col-lg-5.org-logos{
    width: clamp(280px, 88vw, 560px);
  }

  /* Text block: sit on the RIGHT, but keep left-aligned text */
  #benefits-list .col-lg-7{
    margin-left: auto;        /* push to the right edge */
    margin-right: 0;
    text-align: left;
  }

  /* Logos block: sit on the LEFT */
  #benefits-list .col-lg-5.org-logos{
    margin-right: auto;       /* push to the left edge */
    margin-left: 0;
    justify-content: flex-start;   /* override center from styles.css */
    align-items: flex-start;
  }

  /* Keep the rule under PBANZ centred within the logos block width */
  #benefits-list .org-logos hr{
    width: clamp(160px, 70%, 320px);
    margin-left: 0;           /* align with left edge of logos block */
    margin-right: auto;
  }

  #benefits-list .org-logos hr{
    margin-left: 0;         /* flush with the left of the logos */
    margin-right: 0;        /* remove centring */
    align-self: flex-start; /* ensure it follows logo alignment */
  }
}

/*-----------------------------
/* 9) Desktop computer
-------------------------------*/
/* =========================================================
   Desktop layout corrections (≥ 992px)
   ========================================================= */

/* 1) About page hero: Jo & dog image left, text panel right */
@media (min-width: 992px){
  .about-hero .hero-row.hero-jo{
    flex-direction: row;           /* side by side */
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }

  .about-hero .about-hero-copy{
    max-width: 40rem;
    background: rgba(255,255,255,.88); /* restore panel on desktop */
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    border-radius: 10px;
    padding: 2rem;
  }
}

/* 2) About page CTA: flying heron and text side by side */
@media (min-width: 992px){
  .about-cta .hero-row.hero-heron{
    flex-direction: row;           /* heron left, text right */
    align-items: center;
    justify-content: center;
    gap: 2rem;
    text-align: left;
  }

  .about-cta .heron-copy{
    max-width: 40rem;
  }
}
/* About hero: two-column layout on desktop (image left, text right) */
@media (min-width: 992px){
  /* Stop using a background; we’ll place the photo as a block */
  .about-hero{
    background-image: none !important;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
  }

  /* Left column: Jo & Dog photo (from the same --about-hero-img URL) */
  .about-hero::before{
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;                /* tweak later if you prefer */
    background-image: var(--about-hero-img);
    background-size: cover;
    background-position: center 60%;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
  }

  /* Right column: the existing text block */
  .about-hero .hero-row{
    margin: 0;
    justify-content: center;
    align-items: center;
    text-align: left;
  }
  .about-hero .about-hero-copy{
    max-width: 40rem;
    background: rgba(255,255,255,.88);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    border-radius: 10px;
    padding: clamp(16px, 2vw, 24px);
  }

  /* Kill the old overlay gradient since we’re not layering over bg */
  .about-hero::after{ display: none; }
}
/* About hero: full-width image with text panel overlaid on right (desktop) */
@media (min-width: 992px){
  .about-hero{
    background-image: var(--about-hero-img);
    background-size: cover;
    background-position: center 50%;
    position: relative;
    min-height: 80vh; /* adjust as needed for image height */
  }

  /* Reset our mobile ::before trick, only keep background here */
  .about-hero::before{ display: none; }

  /* Position the row relative to hero */
  .about-hero .hero-row{
    position: relative;
    display: flex;
    justify-content: flex-end; /* push to the right side */
    align-items: center;
    min-height: inherit;
    padding: 3rem; /* breathing room from edges */
  }

  /* The text panel itself */
  .about-hero .about-hero-copy{
    max-width: 40rem;
    background: rgba(255,255,255,.9);
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    border-radius: 10px;
    padding: clamp(20px, 2vw, 32px);
    text-align: left;
  }
}

/* === ABOUT (desktop): full-width photo + text panel on the RIGHT, overlaid === */
@media (min-width: 992px){
  .about-hero{
    /* force the background back on desktop */
    background-image: var(--about-hero-img) !important;
    background-size: cover !important;
    background-position: center 55% !important;
    min-height: 78vh;
    position: relative;
    display: block !important;      /* undo any grid/flex versions */
  }

  /* kill the mobile image block when on desktop */
  .about-hero::before{ display: none !important; }

  /* pin the panel to the right, vertically centred */
  .about-hero .hero-row{
    position: absolute;
    right: max(var(--gutter, 16px), 4vw);
    top: 50%;
    transform: translateY(-50%);
    width: min(42rem, 44vw);        /* readable width on wide screens */
    justify-content: flex-end;
    text-align: left;
    margin: 0;                      /* ignore container margins */
  }

  .about-hero .about-hero-copy{
    background: rgba(255,255,255,.9);
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    border-radius: 10px;
    padding: clamp(18px, 2vw, 32px);
  }
}

/* 3) Home page hero: Jo photo left, Jo Doyle text right */
@media (min-width: 992px){
  .home-hero .hero-row.hero-jo{
    flex-direction: row;           /* photo left, text right */
    align-items: center;
    justify-content: center;
    gap: 2rem;
    text-align: left;
  }
/* Home hero: full-bleed on desktop */
@media (min-width: 992px){
  .home-hero{
    background-size: cover;          /* was contain */
    background-position: center;     /* no letterboxing */
  }
}

  .home-hero .hero-copy{
    border-top: none;              /* remove mobile’s top border */
    padding-top: 0;
    max-width: 34rem;
  }
}

/* 4) Home page hero row with heron: heron left, text right */
@media (min-width: 992px){
  .home-hero .hero-row.hero-heron{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    text-align: left;
  }

  .home-hero .heron-copy{
    max-width: 34rem;
  }
}