/* === Mobile Fix Pack v1 === */
/* Base sane defaults */
img { max-width: 100%; height: auto; display: block; }
iframe, video { max-width: 100%; height: auto; }
* { box-sizing: border-box; }

/* Container */
.container, .wrap, .site-content, main, article, .content {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Typography */
h1, .hero-title { line-height: 1.15; word-break: break-word; }
p { line-height: 1.6; }
body { -webkit-text-size-adjust: 100%; }

/* Nav */
.nav, .menu, .navbar, .topnav { display: flex; flex-wrap: wrap; gap: 12px; }

/* Article images */
article img, .post img, .hero img, .post-hero img { width: 100%; height: auto; }

/* Prevent any fixed widths from breaking mobile */
[class*="col-"], [class*="grid"], .sidebar, .content { min-width: 0; }

/* If any images were hard-coded with width/height attributes, let them scale */
img[width], img[height] { height: auto !important; width: auto; max-width: 100% !important; }

/* Responsive type & spacing */
@media (max-width: 1024px) {
  h1, .hero-title { font-size: clamp(28px, 4.5vw, 40px); }
}
@media (max-width: 768px) {
  h1, .hero-title { font-size: clamp(24px, 6vw, 32px); }
  h2 { font-size: clamp(20px, 4.8vw, 28px); }
  p, li { font-size: 16px; }
  .container, .wrap, .site-content, main, article, .content { padding: 0 16px; }
  .site-header, .site-footer { padding: 12px 16px; }
  .hero, .post-hero { margin-bottom: 16px; }
}


/* === Custom Mobile Tweaks (User Requests) === */
@media (max-width: 768px) {
  /* Red + Pink box: stretch logo text into one line */
  .site-header .site-title, .site-footer .site-title,
  .site-header h1, .site-footer h1,
  .site-header .logo, .site-footer .logo {
    display: block;
    text-align: center;
    font-size: 22px;
    white-space: nowrap;
  }

  /* Blue vs Green: make blue box (main title) larger than green subheading */
  h1, .hero-title { font-size: 26px !important; }
  h2, .hero-subtitle { font-size: 20px !important; }

  /* Orange button: enlarge on mobile */
  .btn, .button, .cta-button {
    font-size: 20px !important;
    padding: 18px 24px !important;
    display: block;
    width: 100%;
    text-align: center;
  }
}


/* === Custom Mobile Tweaks v2 (precise selectors) === */
@media (max-width: 768px) {

  /* Header & footer logos on ONE LINE */
  .site__header-inner .logo,
  .site__footer-top .logo {
    white-space: nowrap !important;
    display: block !important;
    text-align: center !important;
    font-style: normal;
    font-size: clamp(18px, 6vw, 26px) !important; /* scales but fits */
    line-height: 1.1 !important;
    letter-spacing: 0.2px;
  }
  /* ensure any <em> inside doesn't force line breaks */
  .site__header-inner .logo em,
  .site__footer-top .logo em { font-style: normal !important; white-space: nowrap !important; }

  /* Blue vs Green: Main title larger, subheading smaller */
  /* The main headline is the text node of the 2nd H2; we size H2 up */
  h2 + h2 { font-size: clamp(22px, 7vw, 30px) !important; line-height: 1.2 !important; }
  /* The subheading is inside a span within that H2; make it smaller */
  h2 + h2 > span { font-size: clamp(16px, 5vw, 20px) !important; }

  /* Big CTA button */
  a.offlink.button {
    display: block !important;
    width: 100% !important;
    font-size: clamp(18px, 5.8vw, 24px) !important;
    padding: 20px 24px !important;
    box-sizing: border-box;
  }
  /* Remove any container padding so it fills the white area */
  .video-button, .cta, .cta-wrap { padding-left: 0 !important; padding-right: 0 !important; }
}


/* === Custom Mobile Tweaks v3.1: fix header logo centering === */
@media (max-width: 768px) {
  .site__header-inner .logo {
    display: block !important;
    text-align: center !important;
    white-space: normal !important; /* allow wrapping if needed */
    font-size: clamp(18px, 5.5vw, 24px) !important;
    line-height: 1.2 !important;
    margin: 0 auto !important;
  }
  .site__header-inner .logo em {
    font-style: normal !important;
    white-space: normal !important;
  }
}


/* === Custom Mobile Tweaks v5: hide menu on mobile === */
@media (max-width: 768px) {
  .site__header-btn,
  .site__header-wrap,
  .menu,
  .menu__item {
    display: none !important;
    visibility: hidden !important;
  }
}


/* === Mobile: completely hide hamburger + menu === */
@media (max-width: 768px) {
  .site__header-btn,
  .menu,
  .menu__item,
  .menu__wrap,
  .site__menu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}