@charset "UTF-8";
/* -----------------------------
   Runtime CSS variables
   ----------------------------- */
:root {
  /* expose resolved brand color at runtime */
  --bg: #2a9d8f;
  --fg: #ffffff;
}

/* -----------------------------
   Base / Reset
   Property order: display, position, box-sizing, size, margin, padding, overflow, typography (font-family, font-size, line-height, font-weight), color/background, border, others (transform, transition)
   ----------------------------- */
html,
body {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  overscroll-behavior-x: none;
  max-width: 100% !important;
  background-color: #3a3435;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  display: block;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
  /* Typography */
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400;
  line-height: 1.4;
  color: var(--fg);
  background: #fff; /* fallback */
  text-align: center;
  /* Headings (compact reset) */
}
body h1 {
  font-weight: 800;
  font-size: 4rem;
  margin: 2rem 0;
  line-height: 1;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  line-height: 1;
}

blockquote p {
  margin-bottom: 1rem !important;
}

/* Force Rubik font on all elements - override WP inline styles */
*,
*::before,
*::after {
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* Target all WordPress block elements specifically */
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
div,
li,
blockquote,
.wp-block-group,
.wp-block-paragraph,
.wp-block-heading,
.wp-block-button,
.wp-block-button__link {
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* Preserve dashicons for admin bar - must come after universal selector */
#wpadminbar *::before {
  font-family: dashicons !important;
}

/* Preserve cookie consent popup styles - exclude from universal overrides */
.cky-consent-container,
.cky-consent-container *,
.cky-modal,
.cky-modal * {
  color: inherit !important;
  font-family: inherit !important;
}

/* Ensure Accept All button has proper contrast */
.cky-btn-accept,
.cky-btn-accept * {
  color: #fff !important;
}

/* Make images responsive */
img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

figure {
  margin: 0;
  padding: 0;
}

/* Gutenberg inner container — constrain content here rather than body */
.wp-block-group__inner-container.is-layout-constrained {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  overflow: visible;
}

/* Small helper: center constrained inner children */
.wp-block-group__inner-container.is-layout-constrained > * {
  box-sizing: border-box;
}

/* -----------------------------
   Layout helpers / page wrapper
   ----------------------------- */
.splash {
  display: block;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
}

section > div {
  max-width: 1200px !important;
}

/* -----------------------------
   Hero
   ----------------------------- */
#hero {
  /* Box & sizing */
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 1rem;
  overflow: visible;
  color: white;
  /* Background */
  background-color: #0e7ec4;
  background-image: url("../YALWaterDark.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Alignment */
  align-items: center;
  justify-content: center;
  text-align: center;
}
#hero .hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
}
#hero .hero-container .content {
  display: block;
  box-sizing: border-box;
  padding: 0 0 4rem 0;
  overflow: visible;
}
#hero .hero-container .content h1 {
  margin-bottom: 1.6rem;
}
#hero .hero-container .content p.content {
  margin: 0 0 2rem 0;
  padding: 0;
  font-weight: 200;
  font-size: 2rem;
  line-height: 1.25;
}
#hero .hero-container .book-image img {
  padding-left: 6vw !important;
  /* Animation: fade and rotate into place */
  animation: bookAppear 1.2s ease-out forwards;
  opacity: 0;
  /* Prevent dragging and touch scroll issues on mobile */
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
  touch-action: none;
}

/* Keyframe animation for book entrance */
@keyframes bookAppear {
  from {
    opacity: 0;
    transform: rotate(-15deg) translateY(30px);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) translateY(0);
  }
}
/* Ensure hero nested containers fill width and respect box-sizing */
#hero,
#hero .wp-block-group__inner-container,
#hero .hero-container,
#hero .content {
  width: 100%;
  box-sizing: border-box;
}

/* Desktop: side-by-side layout */
@media (min-width: 768px) {
  #hero .hero-container > .wp-block-group__inner-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding-top: 8rem;
  }
  #hero .hero-container > .wp-block-group__inner-container .content {
    flex: 1;
  }
  #hero .hero-container > .wp-block-group__inner-container .content h1 {
    font-size: 8rem;
    padding: 0;
  }
  #hero .hero-container > .wp-block-group__inner-container .book-image {
    flex: 1;
  }
  #hero .hero-container > .wp-block-group__inner-container .book-image img {
    padding-left: 0 !important;
  }
}
/* -----------------------------
   Buttons
   ----------------------------- */
.wp-block-button {
  display: inline-block;
  box-sizing: border-box;
  width: auto;
  margin: 1rem auto 2rem auto !important;
  padding: 0;
  border-radius: 6px;
  /* Typography */
  font-size: 1.8rem;
  font-weight: 800;
  text-decoration: none;
  /* Colors & background */
  background-color: #e21f48;
  color: #fff;
  /* Subtle drop shadow */
  box-shadow: 0 8px 10px rgba(14, 36, 64, 0.4);
  /* Interaction */
  transition: background-color 160ms ease-in-out, color 160ms ease-in-out, transform 160ms ease-in-out, opacity 160ms ease-in-out, box-shadow 160ms ease-in-out;
  will-change: background-color, color, transform, opacity, box-shadow;
}
.wp-block-button a {
  background: none;
  margin: 0;
}
.wp-block-button a:visited {
  color: #fff;
}
.wp-block-button a:hover {
  background-color: #fec010;
  color: #e21f48;
  opacity: 0.95;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* -----------------------------
   Features
   ----------------------------- */
#features {
  display: block;
  box-sizing: border-box;
  color: #3a3435;
  background: white;
  padding: 1.6rem;
}
#features div {
  padding: 2rem;
}
#features div h2,
#features div h3 {
  color: #0e7ec4;
  margin: 0 0 2rem 0;
}
#features div h2 {
  font-size: 3.3rem;
  font-weight: 600;
}
#features div h3 {
  font-size: 2.2rem;
  font-weight: 100;
}
#features div p {
  font-size: 1.8rem;
  font-weight: 200;
  margin: 0;
  line-height: 110%;
}

/* -----------------------------
   Inspired
   ----------------------------- */
#inspired {
  display: block;
  box-sizing: border-box;
  background: #0e7ec4;
  color: #fff;
  padding: 4rem;
}
@media (min-width: 768px) {
  #inspired div {
    max-width: 800px !important;
  }
}
#inspired h2 {
  color: #fec010;
  font-family: "Playwrite DE Grund", cursive !important;
  font-weight: 600;
  font-size: 3rem;
  margin: 0;
}
#inspired ul {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0 0;
}
#inspired ul li {
  font-size: 1.8rem;
  font-weight: 600;
  border-top: 1px dotted white;
  margin: 0;
  padding: 1rem 0;
}

/* -----------------------------
   Testimonials
   ----------------------------- */
#testimonials {
  display: block;
  box-sizing: border-box;
  padding: 3rem 2rem;
  background-color: white;
  color: #3a3435;
  text-align: left;
}
#testimonials div {
  margin: 0 auto;
}
#testimonials blockquote {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 4rem 0;
  border: none;
}
#testimonials blockquote .cite {
  display: block;
  text-align: right;
  padding: 0;
  font-size: 1.8rem;
  font-weight: 600;
}
#testimonials blockquote .cite p.name {
  margin-bottom: 0 !important;
}
#testimonials blockquote .cite p.title {
  font-size: 80%;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 0 !important;
}

/* -----------------------------
   Call To Action
   ----------------------------- */
#call-to-action {
  display: block;
  box-sizing: border-box;
  background: #fec010;
  color: #3a3435;
  padding: 4rem;
  text-align: center;
}
#call-to-action h2 {
  font-size: 2.6rem;
  margin: 0 0 1rem 0;
}
#call-to-action p {
  line-height: 140%;
  font-size: 2.2rem;
  font-weight: 400;
  margin: 0 0 2rem 0;
}
#call-to-action p strong {
  font-weight: 800;
}

/* -----------------------------
   About
   ----------------------------- */
#about {
  display: block;
  box-sizing: border-box;
  background: #0e7ec4;
  color: #fff;
  padding: 3rem 2rem;
}
#about div {
  max-width: 800px;
  margin: 0 auto;
}
#about div .wp-block-image img {
  /* Force a square and make circular. Use !important to override inline sizes from WP blocks */
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block;
  margin: 0 auto 1rem auto;
}
#about div h2 {
  font-size: clamp(1.4rem, 6vw, 3rem);
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
}
#about div p {
  font-size: 1.8rem;
  font-weight: 200;
  line-height: 1.6;
}

/* -----------------------------
   Footer
   ----------------------------- */
footer {
  display: block;
  box-sizing: border-box;
  background: #3a3435;
  color: #fff;
  padding: 2rem;
  text-align: center;
  margin: 0 auto;
  font-size: 1rem;
}

/* -----------------------------
   Utilities / Defensive mobile rules
   These protect against horizontal panning when third-party assets or inline styles
   introduce over-wide elements. Keep these scoped and as last-resort fallbacks.
   ----------------------------- */
@media (max-width: 800px) {
  html,
  body {
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    min-width: 0 !important;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  /* hide webkit scrollbars */
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  *::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
  /* cap element widths and ensure box-sizing — last-resort safety net */
  * {
    box-sizing: border-box !important;
    max-width: 100vw !important;
  }
  /* Targeted image fixes for WP blocks */
  #hero .book-image img,
  figure.wp-block-image img,
  .wp-block-group__inner-container .wp-block-image img,
  .wp-block-image.size-full img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    max-width: calc(100% - 2rem) !important;
    width: auto !important;
  }
  #hero,
  #hero .hero-container {
    overflow-x: hidden !important;
  }
}
/* Admin-bar visual fix — override WP inline margin and push content via body padding */
html {
  margin-top: 0 !important;
}

/* Push content down so admin bar doesn't overlay. Use !important to override inline rules. */
body.admin-bar {
  padding-top: 32px !important;
}

/* Mobile admin bar height (matches WP behavior) */
@media screen and (max-width: 782px) {
  body.admin-bar {
    padding-top: 46px !important;
  }
  /* admin inline may set html margin for small screens; ensure it is cleared */
  html {
    margin-top: 0 !important;
  }
}
/* Ensure admin bar sits above all site content */
#wpadminbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999999 !important;
}

#privacy-policy-content {
  max-width: 800px !important;
  margin: 0 auto;
  text-align: left;
  padding: 3rem !important;
  color: black;
}

/*# sourceMappingURL=splash.css.map */