/* ===========================
 Global background IMAGE + soft blue overlay (keeps text readable + menu safe)
=========================== */

/* 0) Your image */
:root{
  --bg-img:url("https://png.pngtree.com/background/20230527/original/pngtree-a-background-of-orange-blue-and-yellow-gradients-with-gritty-appearance-image_16233934.jpg");
}

/* 1) Transparent base */
html, body{
  min-height:100%;
  background: transparent !important;
  color:#0f172a;
  position: relative;
}

/* 2) Image + blue overlay behind content */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* soft blue wash to improve text readability */
    linear-gradient(180deg, rgba(220,235,255,.75), rgba(200,225,255,.75)),
    var(--bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(.9) contrast(.97) brightness(1.0);
  transform: translateZ(0);
}

/* 3) Keep content above background */
.site,.site-content,.content-area,.entry-content,.ast-container,
.ast-separate-container .site-content>.ast-container,#primary,#content,.wrap{
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* 4) Mobile: slightly stronger blue overlay for legibility */
@media (max-width:781px){
  html::before{
    background:
      linear-gradient(180deg, rgba(215,235,255,.85), rgba(195,220,255,.85)),
      var(--bg-img);
    background-position: center top;
  }
}

/* 5) Keep hamburger menu visible & fully functional */
@media (max-width:781px){
  .menu-toggle,
  .main-header-menu-toggle,
  .ast-mobile-menu-trigger-minimal{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    visibility:visible !important;
  }
  .menu-toggle,
  .menu-toggle .ast-mobile-svg,
  .ast-mobile-menu-trigger-minimal svg{
    fill:#0b1e36 !important;
    color:#0b1e36 !important;
  }
  .ast-mobile-popup-content,
  .ast-mobile-popup-drawer,
  .ast-off-canvas-enabled .ast-mobile-popup-content{
    background:rgba(255,255,255,.98) !important;
  }
}
/* --- Kill remaining white boxes: Brizy + inline styles + forms --- */

/* Brizy sections/columns/containers */
.brz .brz-section,
.brz .brz-container,
.brz .brz-container__wrap,
.brz .brz-row,
.brz .brz-columns,
.brz .brz-column,
.brz .brz-section__content,
.brz .brz-wrapper,
.brz [class*="__bg"]{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Nuke inline whites from Brizy/Gutenberg blocks */
.brz [style*="background:#fff"],
.brz [style*="background: #fff"],
.brz [style*="background-color:#fff"],
.entry-content [style*="background:#fff"],
.entry-content [style*="background: #fff"],
.entry-content [style*="background-color:#fff"]{
  background: transparent !important;
}

/* Common WP blocks that sometimes add a card look */
.wp-block-group:not(.keep-bg),
.wp-block-columns:not(.keep-bg),
.wp-block-column:not(.keep-bg){
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* WPForms (if any) */
.wpforms-container .wpforms-form{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Tables or media/text blocks that ship with subtle borders */
.wp-block-table:not(.keep-bg),
.wp-block-media-text:not(.keep-bg){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* --- Mobile: prevent header from cutting off top content --- */
:root{ --mobile-header-h: 72px; } /* adjust to 64–88px if needed */

@media (max-width:781px){
  /* Add safe space below the sticky header */
  .ast-header-break-point .site-content{
    padding-top: var(--mobile-header-h) !important;
  }

  /* Brizy pages: neutralize any negative top margins and add padding */
  .ast-header-break-point .brz .brz-section:first-of-type{
    margin-top: 0 !important;
    padding-top: calc(var(--mobile-header-h) + 8px) !important;
  }
}

/* Anchor links won't hide under the header */
html{ scroll-padding-top: var(--mobile-header-h); }
/* --- Tablet: prevent sticky header overlap (portrait & small landscape) --- */
:root{
  --tablet-header-h: 96px; /* adjust to 88–112px if needed */
}

/* Astra’s default header breakpoint is ~921px.
   Cover 782–1024px to be safe for most tablets. */
@media (min-width:782px) and (max-width:1024px){
  .site-content{
    padding-top: var(--tablet-header-h) !important;
  }
  /* Brizy: first section often sits too high */
  .brz .brz-section:first-of-type{
    margin-top: 0 !important;
    padding-top: calc(var(--tablet-header-h) + 8px) !important;
  }
}

/* If your sticky header also shows between 922–1024 on desktop mode,
   keep anchors/content from hiding underneath it */
@media (min-width:922px) and (max-width:1024px){
  html{ scroll-padding-top: var(--tablet-header-h); }
}
/* --- FINAL NUKE: remove stray white page boxes (Astra + Brizy + WP blocks) --- */

/* Astra page canvases */
.ast-separate-container .site-content,
.ast-separate-container .site-main,
.ast-separate-container .site-main > .ast-row,
.ast-separate-container .site-main > .ast-row > article,
.ast-plain-container .site-content,
.ast-plain-container .site-content .ast-container,
.page .site-main,
.page .site-main article,
.page .hentry,
.page .entry-content{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Brizy wrappers */
.brz .brz-section,
.brz .brz-section__content,
.brz .brz-container,
.brz .brz-container__wrap,
.brz .brz-row,
.brz .brz-columns,
.brz .brz-column,
.brz .brz-wrapper{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Catch any inline #fff on blocks or Brizy elements */
.brz [style*="background:#fff"],
.brz [style*="background: #fff"],
.brz [style*="background-color:#fff"],
.entry-content [style*="background:#fff"],
.entry-content [style*="background: #fff"],
.entry-content [style*="background-color:#fff"]{
  background: transparent !important;
}

/* Gutenberg groups/columns unless you explicitly want a card */
.wp-block-group:not(.keep-bg),
.wp-block-columns:not(.keep-bg),
.wp-block-column:not(.keep-bg),
.wp-block-media-text:not(.keep-bg),
.wp-block-table:not(.keep-bg){
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* 1) Make media scale properly */
img, video, svg, canvas {max-width:100%; height:auto;}

/* 2) Let flex/grid children shrink instead of forcing overflow */
* {min-width:0;}

/* 3) Gutenberg/Block editor columns: stack cleanly on mobile */
@media (max-width: 768px){
  .wp-block-columns {flex-wrap:wrap;}
  .wp-block-column {flex-basis:100% !important; margin-right:0 !important;}
}

/* 4) Comfortable side padding on small screens */
@media (max-width: 768px){
  .site-content .entry-content > * {padding-left:16px; padding-right:16px;}
}

/* 5) Responsive headings so big titles don’t crush lines */
h1 {font-size:clamp(28px, 6vw, 44px);}
h2 {font-size:clamp(22px, 5vw, 34px);}
h3 {font-size:clamp(18px, 4.5vw, 28px);}

/* 6) Buttons and long links can wrap on phones */
a, button {word-wrap:break-word; overflow-wrap:anywhere;}

/* 7) Make embeds (maps/videos) responsive */
.responsive-embed, .wp-block-embed__wrapper {position:relative; width:100%; padding-top:56.25%;}
.responsive-embed iframe, .wp-block-embed__wrapper iframe {
  position:absolute; inset:0; width:100%; height:100%;
}

/* 8) Astra header/menu common squish fix */
.ast-mobile-header-wrap .menu-item a {padding:12px 16px;}
/* Reduce site title size on phones */
@media (max-width: 768px) {
  .site-title, 
  .ast-site-title, 
  h1.site-title a {
    font-size: 22px !important;   /* adjust between 18–26px if you prefer */
    line-height: 1.2;
    white-space: normal;          /* lets it wrap instead of overflow */
    word-break: break-word;
  }
}