/* Background utilities (use on Group/Cover blocks via "Advanced → Additional CSS class(es)") */
.bg-sand { background: var(--wp--preset--color--sand) !important; }
.bg-sky  { background: var(--wp--preset--color--sky) !important; }
.bg-almond { background: var(--wp--preset--color--almond-milk) !important; }
.text-black { color: var(--wp--preset--color--black) !important; }

/* Subheading look (Barlow Condensed Bold) */
.is-subheading {
  font-family: var(--wp--preset--font-family--barlow-condensed) !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  text-transform: none;
}

/* Section padding presets for comfy stripes */
.section-pad { padding: 48px 0; }
.section-pad-lg { padding: 72px 0; }

/* Logo wrapper container in the header */
.site-logo-wrapper {
  display: flex;
  justify-content: center;   /* centers horizontally */
  align-items: center;       /* vertical centering */
  padding: 32px 0;           /* some breathing room */
}
/* NAV BAR WRAPPER */
.site-nav-wrapper {
  display: flex;
  justify-content: center;
  background: var(--wp--preset--color--almond, #F7F5ED);  /* subtle background */
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  position: sticky;     /* optional: sticks while scrolling */
  top: 0;               /* sticky anchor */
  z-index: 20;
}

/* NAV LINKS */
.site-nav-wrapper .wp-block-navigation a {
  font-family: "Barlow Condensed";
  font-size: 18px;
  padding: 4px 14px;
  text-decoration: none;
  color: var(--wp--preset--color--black, #2E2E2E);
}

.site-nav-wrapper .wp-block-navigation a:hover {
  color: var(--wp--preset--color--sky, #96B0D9);
}

/* The SVG logo itself */
.site-logo-wrapper img,
.site-logo-wrapper svg {
  height: auto;      /* or 64px; tune this */
  width: min(90vw,560px);       /* keep aspect ratio */
  display: block;
}
/* HERO LOGO WRAPPER */
.hero-logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 32px;
  padding: 0 16px;
}

/* HERO LOGO IMAGE (BIG SVG) */
.hero-logo-wrapper img,
.hero-logo-wrapper svg {
  width: min(100vw, 560px);  /* responsive, capped */
  margin: auto;
  height: auto;        /* keep aspect ratio */
  display: block;
}