/* ---------------------------------------------------------------------------
   site-tweaks.css

   Responsive-scale and spacing corrections for the static export of the
   charlie-child theme.

   Why this file exists
   --------------------
   The theme sizes things with `vw` clamps and hard pixel heights, with nothing
   constrained by the window height, so the page never gets smaller when the
   window does:

     .home .bannerarea   height: 100vh            -> hero fills the whole window
     .office-photo       height: min(70vw,763px)  -> 763px tall on any laptop
     html, body          font-size: clamp(16px, 1.5vw, 20px)  -> 20px ceiling
     h1 / h2             64px / 65px ceilings
     .contentarea        padding: 90-100px

   Linked last in the document (immediately before </body>, because the theme's
   own override sheet is itself linked inside <body>). Bump the ?v= query on
   the <link> if you change this file.
   --------------------------------------------------------------------------- */

/* 1. Type scale ----------------------------------------------------------- */
html, body { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55; }

h1, .blog #main h1 a { font-size: clamp(26px, 3vw, 42px); letter-spacing: 1px; }
h2 { font-size: clamp(22px, 2.6vw, 32px); letter-spacing: 1px; }
h3 { font-size: clamp(19px, 2.2vw, 28px); }
h4 { font-size: clamp(16px, 1.4vw, 20px); letter-spacing: .6px; }
h5, h6 { font-size: clamp(15px, 1.2vw, 18px); }

.banner-title p { font-size: clamp(26px, 2.8vw, 44px); letter-spacing: 1px; }
.banner-title h1, h1.page-title { font-size: clamp(22px, 2.6vw, 34px); letter-spacing: 1px; }
.services-content-holder h2 { font-size: clamp(24px, 3vw, 40px); letter-spacing: 1px; }
.banner-buttons { font-size: clamp(15px, 1.05vw, 19px); }
.page-header span { font-size: clamp(15px, 1.4vw, 19px); margin-bottom: 24px; }
.faq-summary strong { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: 1px; }

.top-bar .container .row a,
.top-bar .container .row button { font-size: clamp(13px, .85vw, 15px); letter-spacing: .6px; }
.navbar .main-nav-container ul li a { font-size: clamp(13px, .85vw, 15px); letter-spacing: .6px; }
.navbar .main-nav-container ul.sub-menu li a { font-size: clamp(12px, .8vw, 14px); }

.main-btn, a.main-btn, a.main-btn:visited,
.main2-btn, a.main2-btn, a.main2-btn:visited,
.main3-btn, a.main3-btn, a.main3-btn:visited,
.main4-btn, a.main4-btn, a.main4-btn:visited {
  font-size: clamp(12px, .8vw, 14px);
  letter-spacing: .8px;
}

/* 2. Hero and photos capped by the window height -------------------------- */
@media (min-width: 1026px) {
  .home .bannerarea {
    height: min(74vh, 700px);
    min-height: 0;
    max-height: none;
    padding: 56px 0;
  }
}
@media (min-width: 2000px) {
  .home .bannerarea { min-height: 0; }
}
/* inner-page banner: keep it a band, not a screenful */
.internal-page .bannerarea { min-height: min(393px, 40vh); padding: 44px 0; }

@media (max-width: 1025px) {
  .home .bannerarea { min-height: min(480px, 62vh); padding: 48px 0 32px; }
  .internal-page .bannerarea { min-height: min(300px, 38vh); padding: 36px 0; }
}

.office-photo { height: min(70vw, 62vh, 620px); }
.fifty-fifty-photo { height: min(60vw, 62vh, 620px); }
.cta_welcome_7 .fifty-fifty-left { height: min(82vw, 62vh, 620px); }
.cta_welcome_7 .fifty-fifty-right { height: auto; }

/* the two decorative panels track the shorter photos */
.contentarea:before { min-height: min(600px, 54vh); }
.fifty-fifty-skeleton:before { min-height: min(666px, 56vh); }

/* 3. Tighter vertical rhythm --------------------------------------------- */
/* the desktop masthead is 177px tall because the logo has no height cap:
   a#logo is 222px wide and the logo art is 223x117, so it renders 116px tall */
.bottom-header { padding: 12px 4%; }
#logo img { height: 68px; width: auto; }

.contentarea { padding: 56px 0; }
.services-section { padding: 64px 0; }
.services-slider { padding: 44px 0; }
.testimonials-section { padding: 72px 25px; }
.cta-section { padding: 64px 0; }
.cta-section .container { gap: 24px 0; }
.fifty-fifty-skeleton { padding: 64px 25px; }
.cta_welcome_7 .fifty-fifty-right { padding: 40px; }
.cta_welcome_7 .fifty-inner-box { gap: 22px; }
.faq-summary { padding: 1rem 1.25rem; }

/* 4. Smaller mobile chrome ----------------------------------------------- */
@media (max-width: 1025px) {
  .mobile-top-cta-bar .mobile-top-cta-link {
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .3px;
    padding: 8px 14px;
  }
  .mobile-logo { padding: 10px 14px; }
  .mobile-logo picture,
  .mobile-logo img { max-height: 42px; }
}