/*
  Responsive overrides (no frameworks)
  Goals:
  - Preserve existing visual identity (colors, logos, background images)
  - Improve mobile readability and prevent horizontal overflow
  - Avoid content rewrites (only typos corrected elsewhere)
*/

/* Safer defaults for responsive rendering */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent long URLs from forcing horizontal scroll */
a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Consistent header logo sizing across pages */
.page-header {
  padding: 0;
}

.page-header a {
  display: inline-block;
}

.site-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 90px; /* desktop */
}

/* Blog layout wrapper (blog pages use a custom shell) */
.blog-shell {
  background-color: rgb(24, 24, 24);
  border: #000;
}

/* Make inline images in blog content behave on small screens */
.blog-shell img:not(.site-logo) {
  max-width: 100%;
  height: auto;
}

/*
  Mobile-first adjustments
  NOTE: Many pages include inline padding/margins; where necessary we override
  those inline styles using !important in mobile breakpoints.
*/
@media only screen and (max-width: 767px) {
  /* 1) Bigger hero logo */
  #landing .landing-logo {
    display: block;
    width: 80vw;          /* bigger than 70vw */
    max-width: 420px;     /* allow larger on big phones */
    min-width: 240px;     /* keep presence on small phones */
    height: auto;
    margin: 0 auto 10px auto;
  }

  /* 2) Remove the two top empty full-width spacer rows */
  #landing .section > .col.empty.full {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) Stack the thirds columns and center text */
  #landing .columns.thirds .col {
    width: 100% !important;
    float: none !important;
    display: block !important;
    text-align: center !important;
  }
  #landing .columns.thirds .col[style*="text-align: right"] {
    text-align: center !important;
  }

  /* 4) Hide the middle “spacer” column in the thirds row (the empty one) */
  #landing .columns.thirds > .col:nth-child(2) {
    display: none !important;
  }

  /* 5) Reduce vertical padding in the landing blocks */
  #landing .columns.tall > .col {
    padding: 14px 22px !important; /* tighter */
  }

  /* 6) Tighten heading/paragraph spacing */
  #landing h3 {
    margin: 6px auto 6px auto !important;
  }
  #landing p {
    margin: 0 auto 10px auto !important;
  }

  /* 7) Prevent any iOS horizontal bleed */
  #landing {
    overflow-x: hidden;
  }


@media only screen and (max-width: 767px) {

  /* ABOUT / SERVICES (mobile) — consolidated */

  :root {
    --about-bottom-clearance: 208px; /* brute-force dial (working value) */
  }

  /* Ensure background always paints the entire panel */
  #about.bg-image-wrap {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    padding-bottom: 0 !important;
  }

  /* Content padding: top rhythm + side gutters */
  #about .section {
    padding-top: 48px !important;
    padding-bottom: 10px !important; /* keep section itself tight */
    padding-left: clamp(14px, 4vw, 22px) !important;
    padding-right: clamp(14px, 4vw, 22px) !important;
  }

  /* Keep your between-block spacing as-is */
  #about .section > div[style*="text-align: center"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 64px auto 0 auto !important;
    max-width: 36rem;
  }

  /* First block closer to the top */
  #about .section > div[style*="text-align: center"]:first-of-type {
    margin-top: 20px !important;
  }

  /* Heading spacing */
  #about h2 {
    margin: 0 0 10px 0 !important;
  }

  /* Description copy */
  #about a.white {
    display: block;
    margin: 0 auto;
    line-height: 1.45;
  }

  /* Apply clearance only where it's needed: the final block */
  #about .section > div[style*="padding-bottom"] {
    padding-bottom: var(--about-bottom-clearance) !important;
  }

  /* Remove spacer element below panel on mobile */
  #about .columns.spacing.flex.hero-height {
    display: none !important;
  }




  /* FOOTER / GET IN TOUCH (mobile) — consolidated */

  /* Background + overall footer framing */
  #touch.footer {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center 25% !important; /* dial: 20% (more top) → 50% (more middle) */
    padding: 0 !important;                      /* avoid wrapper padding creating misalignment */
    padding-bottom: 28px !important;
  }

  /* Controlled "hero" spacer to show more image above text */
  #touch .col.full.spaced {
    display: block !important;
    height: 180px !important;   /* dial: 80–180px */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Content row: consistent gutters + left alignment */
  #touch .columns.white {
    padding-top: 0 !important; /* overrides inline 1% */
    padding-left: clamp(14px, 4vw, 22px) !important;
    padding-right: clamp(14px, 4vw, 22px) !important;
    text-align: left !important;
    box-sizing: border-box;
  }

  /* Stack columns and eliminate potential column padding double-indent */
  #touch .columns.white .col.double {
    width: 100% !important;
    float: none !important;
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Vertical rhythm */
  #touch .wayp-down {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  /* Heading spacing (supports h4.large or h2.large) */
  #touch h2.large,
  #touch h4.large {
    margin: 0 0 10px 0 !important;
    line-height: 1.15;
  }




  /* Reduce excessive side padding on blog pages */
  .blog-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Blog content: undo desktop-centric inline margins */
  .blog-shell img:not(.site-logo) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* Inline-styled list items often add large right padding; remove on mobile */
  .blog-shell li {
    padding-right: 0 !important;
  }

  /* Slightly reduce heading size on very content-heavy pages */
  .blog-shell h1 {
    font-size: 32px;
    line-height: 40px;
  }
}

@media only screen and (max-width: 559px) {
  .site-logo {
    max-height: 56px;
  }
}