/* ============================================================
   FONT SIZER - Parkside Group 2026
   Full Responsive Stylesheet
   
   Default (no class): 18px / 28px
   body.big:           20px / 30px  (+2 / +2)
   body.bigger:        22px / 32px  (+4 / +4)
   body.biggest:       24px / 34px  (+6 / +6)
   
   Container: 1100px max-width stays fixed, text reflows.
   Breakpoints shift earlier at larger tiers.
============================================================ */

/* ----- Smooth transition ----- */
body {
  transition: font-size 0.2s ease, line-height 0.2s ease;
}


/* ============================================================
   BIG (+2px base)
============================================================ */
body.big {
  font-size: 20px;
  line-height: 30px;
}

/* -- Content block padding: 100 → 90 -- */
body.big :where(.wp-block-group.has-background) {
  padding: 90px;
}

/* -- Buttons: slight padding increase -- */
body.big .wp-block-button .wp-block-button__link,
body.big .button,
body.big .nav-previous a,
body.big .nav-next a {
  padding: 22px 32px;
}

/* -- Accordion icon (base 24px → 26px) -- */
body.big .wp-block-details summary::after {
  font-size: 26px;
}

/* -- Nav caret (base 13px → 14px) -- */
body.big #primary nav ul li.menu-item-has-children > a::after {
  font-size: 14px;
}


/* ============================================================
   BIGGER (+4px base)
============================================================ */
body.bigger {
  font-size: 22px;
  line-height: 32px;
}

/* -- Content block padding: 100 → 80 -- */
body.bigger :where(.wp-block-group.has-background) {
  padding: 80px;
}

/* -- Hero text container: 40% → 50% -- */
body.bigger #hero .info-inner .info-inner-inner {
  width: 50%;
}

/* -- Buttons -- */
body.bigger .wp-block-button .wp-block-button__link,
body.bigger .button,
body.bigger .nav-previous a,
body.bigger .nav-next a {
  padding: 24px 34px;
}

/* -- Accordion icon → 28px -- */
body.bigger .wp-block-details summary::after {
  font-size: 28px;
}

/* -- Nav caret → 15px -- */
body.bigger #primary nav ul li.menu-item-has-children > a::after {
  font-size: 15px;
}

/* -- Nav spacing: tighten margins so items fit -- */
body.bigger #primary nav ul li a {
  margin: 0 10px;
}


/* ============================================================
   BIGGEST (+6px base)
============================================================ */
body.biggest {
  font-size: 24px;
  line-height: 34px;
}

/* -- Content block padding: 100 → 60 -- */
body.biggest :where(.wp-block-group.has-background) {
  padding: 60px;
}

/* -- Hero text container: 40% → 100% -- */
body.biggest #hero .info-inner .info-inner-inner {
  width: 100%;
}

/* -- Buttons -- */
body.biggest .wp-block-button .wp-block-button__link,
body.biggest .button,
body.biggest .nav-previous a,
body.biggest .nav-next a {
  padding: 26px 36px;
}

/* -- Accordion icon → 30px -- */
body.biggest .wp-block-details summary::after {
  font-size: 30px;
}

/* -- Nav caret → 16px -- */
body.biggest #primary nav ul li.menu-item-has-children > a::after {
  font-size: 16px;
}

/* -- Nav spacing: tighten further -- */
body.biggest #primary nav ul li a {
  margin: 0 8px;
  font-size: .88em;
}


/* ============================================================
   RESPONSIVE — SHIFTED BREAKPOINTS
   
   Strategy: each tier shifts breakpoints up by ~100px per step.
   big:     breakpoints shift ~50px earlier
   bigger:  breakpoints shift ~100px earlier
   biggest: breakpoints shift ~150px earlier
============================================================ */

/* ------------------------------------------------------------
   ~1200px zone (bigger/biggest hit nav squeeze early)
------------------------------------------------------------ */
@media all and (max-width: 1250px) {
  body.biggest #primary nav ul li a {
    font-size: .85em;
    margin: 0 6px;
  }
}

@media all and (max-width: 1200px) {
  body.bigger #primary nav ul li a {
    font-size: .88em;
    margin: 0 8px;
  }
  body.biggest #primary nav ul li a {
    font-size: .83em;
    margin: 0 5px;
  }
}

/* ------------------------------------------------------------
   ~1100px zone (base theme shrinks nav here)
   big hits this ~50px early, bigger ~100px, biggest ~150px
------------------------------------------------------------ */
@media all and (max-width: 1150px) {
  body.big #primary nav ul li a {
    font-size: .9em;
    margin: 0 10px;
  }
}

@media all and (max-width: 1100px) {
  body.bigger #primary nav ul li a {
    font-size: .85em;
    margin: 0 7px;
  }
}

@media all and (max-width: 1050px) {
  body.biggest #primary nav ul li a {
    font-size: .8em;
    margin: 0 5px;
  }
}

/* ------------------------------------------------------------
   ~1000px zone (hero h1 drops, content-blocks margin shrinks)
   Shifted: big@1050, bigger@1100, biggest@1150
------------------------------------------------------------ */
@media all and (max-width: 1150px) {
  body.biggest #hero h1 {
    font-size: 3em;
  }
  body.biggest .content-blocks {
    margin: -50px auto 0 auto;
  }
  body.biggest .copyright {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

@media all and (max-width: 1100px) {
  body.bigger #hero h1 {
    font-size: 3em;
  }
  body.bigger .content-blocks {
    margin: -50px auto 0 auto;
  }
  body.bigger .copyright {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

@media all and (max-width: 1050px) {
  body.big #hero h1 {
    font-size: 3em;
  }
  body.big .content-blocks {
    margin: -50px auto 0 auto;
  }
  body.big .copyright {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

/* ------------------------------------------------------------
   ~900px zone (mobile nav kicks in)
   Shifted: big@950, bigger@1000, biggest@1050
------------------------------------------------------------ */
@media all and (max-width: 1050px) {
  body.biggest header { clear: both; position: relative; }
  body.biggest #logo { width: 100%; text-align: left; }
  body.biggest #primary { width: 100%; position: static; float: right; z-index: 999999; }
  body.biggest nav .menu-primary-menu-container {
    display: block; position: fixed; top: 0; left: -100%;
    background-color: rgba(0, 102, 73, .95);
    width: 80%; height: 100%; overflow-y: scroll; z-index: 9999;
    padding-top: 75px;
  }
  body.biggest .open nav .menu-primary-menu-container { left: 0; }
  body.biggest #primary nav.primary_nav ul.menu { display: block; }
  body.biggest nav .menu-primary-menu-container > ul { padding: 15px 0 0 0; width: 100%; }
  body.biggest nav ul li { display: block; padding: 0; float: none; }
  body.biggest #primary nav ul li a {
    color: #fff; padding: 20px 30px; display: block; height: auto;
    font-size: .94em; margin: 0;
  }
  body.biggest #primary nav ul li:first-child a { padding-left: 30px; }
  body.biggest #primary nav ul.sub-menu { width: 100%!important; }
  body.biggest #primary nav ul li ul.sub-menu,
  body.biggest #primary nav ul li ul.sub-menu li ul.sub-menu {
    padding: 0; margin: 0; box-shadow: none; width: 100%; background: none;
    display: block; clear: both; overflow: hidden; position: relative; left: 0; opacity: 1;
  }
  body.biggest #primary nav ul li ul.sub-menu li a {
    padding: 20px 30px 20px 50px; color: #fff; border-bottom: 0;
  }
  body.biggest #primary nav ul li:hover > a,
  body.biggest #primary nav ul li.current-menu-item > a,
  body.biggest #primary nav ul li.current_page_item > a,
  body.biggest #primary nav ul li.current-page-ancestor > a,
  body.biggest #primary nav ul li.current-menu-ancestor > a {
    color: #fff; background-color: #009e4d; border-bottom: none;
  }
  body.biggest #navbtn { display: block; }
  /* Footer: 900px equivalent — two-column wrap */
  body.biggest :root footer .widget_footer_contact > :where(.is-layout-flex) { flex-wrap: wrap; }
  body.biggest footer .is-layout-flex > :is(*, div) { flex-basis: 46%; }
  body.biggest footer .is-layout-flex > i,
  body.biggest footer .is-layout-flex.wp-block-social-links > li { flex-basis: unset; }
}

/* biggest: 800px equivalent — full stack & center */
@media all and (max-width: 950px) {
  body.biggest footer .is-layout-flex > :is(*, div) {
    flex-basis: 100%; justify-content: center; align-items: center; text-align: center;
  }
  body.biggest footer .wp-block-social-links {
    text-align: center; justify-content: center;
  }
  body.biggest footer .is-layout-flex > i,
  body.biggest footer .is-layout-flex.wp-block-social-links > li { flex-basis: unset; }
}

@media all and (max-width: 1000px) {
  body.bigger header { clear: both; position: relative; }
  body.bigger #logo { width: 100%; text-align: left; }
  body.bigger #primary { width: 100%; position: static; float: right; z-index: 999999; }
  body.bigger nav .menu-primary-menu-container {
    display: block; position: fixed; top: 0; left: -100%;
    background-color: rgba(0, 102, 73, .95);
    width: 80%; height: 100%; overflow-y: scroll; z-index: 9999;
    padding-top: 75px;
  }
  body.bigger .open nav .menu-primary-menu-container { left: 0; }
  body.bigger #primary nav.primary_nav ul.menu { display: block; }
  body.bigger nav .menu-primary-menu-container > ul { padding: 15px 0 0 0; width: 100%; }
  body.bigger nav ul li { display: block; padding: 0; float: none; }
  body.bigger #primary nav ul li a {
    color: #fff; padding: 20px 30px; display: block; height: auto;
    font-size: .94em; margin: 0;
  }
  body.bigger #primary nav ul li:first-child a { padding-left: 30px; }
  body.bigger #primary nav ul.sub-menu { width: 100%!important; }
  body.bigger #primary nav ul li ul.sub-menu,
  body.bigger #primary nav ul li ul.sub-menu li ul.sub-menu {
    padding: 0; margin: 0; box-shadow: none; width: 100%; background: none;
    display: block; clear: both; overflow: hidden; position: relative; left: 0; opacity: 1;
  }
  body.bigger #primary nav ul li ul.sub-menu li a {
    padding: 20px 30px 20px 50px; color: #fff; border-bottom: 0;
  }
  body.bigger #primary nav ul li:hover > a,
  body.bigger #primary nav ul li.current-menu-item > a,
  body.bigger #primary nav ul li.current_page_item > a,
  body.bigger #primary nav ul li.current-page-ancestor > a,
  body.bigger #primary nav ul li.current-menu-ancestor > a {
    color: #fff; background-color: #009e4d; border-bottom: none;
  }
  body.bigger #navbtn { display: block; }
  /* Footer: 900px equivalent — two-column wrap */
  body.bigger :root footer .widget_footer_contact > :where(.is-layout-flex) { flex-wrap: wrap; }
  body.bigger footer .is-layout-flex > :is(*, div) { flex-basis: 46%; }
  body.bigger footer .is-layout-flex > i,
  body.bigger footer .is-layout-flex.wp-block-social-links > li { flex-basis: unset; }
}

/* bigger: 800px equivalent — full stack & center */
@media all and (max-width: 900px) {
  body.bigger footer .is-layout-flex > :is(*, div) {
    flex-basis: 100%; justify-content: center; align-items: center; text-align: center;
  }
  body.bigger footer .wp-block-social-links {
    text-align: center; justify-content: center;
  }
  body.bigger footer .is-layout-flex > i,
  body.bigger footer .is-layout-flex.wp-block-social-links > li { flex-basis: unset; }
}

@media all and (max-width: 950px) {
  body.big header { clear: both; position: relative; }
  body.big #logo { width: 100%; text-align: left; }
  body.big #primary { width: 100%; position: static; float: right; z-index: 999999; }
  body.big nav .menu-primary-menu-container {
    display: block; position: fixed; top: 0; left: -100%;
    background-color: rgba(0, 102, 73, .95);
    width: 80%; height: 100%; overflow-y: scroll; z-index: 9999;
    padding-top: 75px;
  }
  body.big .open nav .menu-primary-menu-container { left: 0; }
  body.big #primary nav.primary_nav ul.menu { display: block; }
  body.big nav .menu-primary-menu-container > ul { padding: 15px 0 0 0; width: 100%; }
  body.big nav ul li { display: block; padding: 0; float: none; }
  body.big #primary nav ul li a {
    color: #fff; padding: 20px 30px; display: block; height: auto;
    font-size: .94em; margin: 0;
  }
  body.big #primary nav ul li:first-child a { padding-left: 30px; }
  body.big #primary nav ul.sub-menu { width: 100%!important; }
  body.big #primary nav ul li ul.sub-menu,
  body.big #primary nav ul li ul.sub-menu li ul.sub-menu {
    padding: 0; margin: 0; box-shadow: none; width: 100%; background: none;
    display: block; clear: both; overflow: hidden; position: relative; left: 0; opacity: 1;
  }
  body.big #primary nav ul li ul.sub-menu li a {
    padding: 20px 30px 20px 50px; color: #fff; border-bottom: 0;
  }
  body.big #primary nav ul li:hover > a,
  body.big #primary nav ul li.current-menu-item > a,
  body.big #primary nav ul li.current_page_item > a,
  body.big #primary nav ul li.current-page-ancestor > a,
  body.big #primary nav ul li.current-menu-ancestor > a {
    color: #fff; background-color: #009e4d; border-bottom: none;
  }
  body.big #navbtn { display: block; }
  /* Footer: 900px equivalent — two-column wrap */
  body.big :root footer .widget_footer_contact > :where(.is-layout-flex) { flex-wrap: wrap; }
  body.big footer .is-layout-flex > :is(*, div) { flex-basis: 46%; }
  body.big footer .is-layout-flex > i,
  body.big footer .is-layout-flex.wp-block-social-links > li { flex-basis: unset; }
}

/* big: 800px equivalent — full stack & center */
@media all and (max-width: 850px) {
  body.big footer .is-layout-flex > :is(*, div) {
    flex-basis: 100%; justify-content: center; align-items: center; text-align: center;
  }
  body.big footer .wp-block-social-links {
    text-align: center; justify-content: center;
  }
  body.big footer .is-layout-flex > i,
  body.big footer .is-layout-flex.wp-block-social-links > li { flex-basis: unset; }
}

/* ------------------------------------------------------------
   ~800px zone (content-blocks margin, reduced paddings)
   Shifted: big@850, bigger@900, biggest@950
   Footer stacking is now handled above with the nav blocks.
------------------------------------------------------------ */
@media all and (max-width: 950px) {
  body.biggest .content-blocks {
    margin: 50px auto 0 auto;
  }
  body.biggest :where(.wp-block-group.has-background) {
    padding: 35px;
  }
}

@media all and (max-width: 900px) {
  body.bigger .content-blocks {
    margin: 50px auto 0 auto;
  }
  body.bigger :where(.wp-block-group.has-background) {
    padding: 40px;
  }
}

@media all and (max-width: 850px) {
  body.big .content-blocks {
    margin: 50px auto 0 auto;
  }
  body.big :where(.wp-block-group.has-background) {
    padding: 45px;
  }
}

/* ------------------------------------------------------------
   Small screens — all tiers still available, 
   but structural adjustments for tight space
------------------------------------------------------------ */
@media all and (max-width: 600px) {
  body.big :where(.wp-block-group.has-background) { padding: 30px; }
  body.bigger :where(.wp-block-group.has-background) { padding: 25px; }
  body.biggest :where(.wp-block-group.has-background) { padding: 20px; }

  body.big #hero h1 { font-size: 2.8em; }
  body.bigger #hero h1 { font-size: 2.5em; }
  body.biggest #hero h1 { font-size: 2.2em; }

  body.big h1 { font-size: 3.2em; }
  body.bigger h1 { font-size: 2.8em; }
  body.biggest h1 { font-size: 2.5em; }

  body.bigger #hero .info-inner .info-inner-inner,
  body.biggest #hero .info-inner .info-inner-inner {
    width: 100%;
  }

  /* Buttons: keep padding modest on small screens */
  body.big .wp-block-button .wp-block-button__link,
  body.big .button { padding: 20px 28px; }
  body.bigger .wp-block-button .wp-block-button__link,
  body.bigger .button { padding: 20px 26px; }
  body.biggest .wp-block-button .wp-block-button__link,
  body.biggest .button { padding: 18px 24px; }

  /* Password form padding */
  body.big form.post-password-form { padding: 60px 40px; }
  body.bigger form.post-password-form { padding: 50px 30px; }
  body.biggest form.post-password-form { padding: 40px 25px; }
}