/*
Theme Name: Ocean Park Child Care
Theme URI: https://oceanparkchildcare.example
Author: Ocean Park Child Care
Author URI: https://oceanparkchildcare.example
Description: A warm, playful full-site-editing block theme for Ocean Park Child Care. Built from the Ocean Park single-page design: play-based early learning, bright colour, rounded shapes and fully responsive layouts. Every section ships as an editable block pattern.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ocean-park
Tags: full-site-editing, block-patterns, one-column, two-columns, custom-colors, custom-logo, custom-menu, editor-style, block-styles, wide-blocks, education
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
  --ink: #073b75;
  --blue: #09bdbd;
  --deep: #07539a;
  --sky: #e8fbfa;
  --cream: #fffaf5;
  --coral: #ff9077;
  --yellow: #ffbd16;
  --green: #20c4b8;
  --paper: #fffefb;
  --op-font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --op-font-display: "Fraunces", Georgia, serif;
}

/* =========================================================
   2. SCOPED RESET  (everything lives under body.op)
   ========================================================= */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body.op {
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--op-font-sans);
  margin: 0;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body.op *,
body.op *::before,
body.op *::after {
  box-sizing: border-box;
}

body.op h1,
body.op h2,
body.op h3,
body.op h4,
body.op h5,
body.op h6,
body.op p,
body.op figure,
body.op ul,
body.op ol {
  margin: 0;
  padding: 0;
}

body.op ul,
body.op ol {
  list-style: none;
}

body.op a {
  color: inherit;
  text-decoration: none;
}

body.op em {
  font-family: var(--op-font-display);
  font-weight: 500;
  font-style: normal;
}

body.op img,
body.op svg,
body.op video {
  display: block;
  max-width: 100%;
  height: auto;
}

body.op strong {
  font-weight: 800;
}

/* Neutralise WordPress automatic block spacing. Wrapped in :where() so it has
   ZERO specificity - it is a default that every component rule below can beat.
   Without :where() this selector outranks rules like ".op .hero h1" and strips
   the margins off every heading on the site. */
:where(body.op main .is-layout-flow > *),
:where(body.op main .is-layout-constrained > *),
:where(body.op main > .wp-block-post-content > *) {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* =========================================================
   3. SHARED PRIMITIVES
   ========================================================= */
.op .section {
  max-width: 1240px;
  margin-inline: auto;
  padding: 110px 40px;
}

.op .eyebrow,
.op .sectionTag {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
}

.op .sectionTag {
  border: 1px solid #b7d3e3;
  border-radius: 999px;
  padding: 9px 14px;
  display: inline-block;
}

.op .lead {
  color: #365c72;
  max-width: 580px;
  font-size: 19px;
  line-height: 1.65;
}

.op .largeBody {
  color: #516876;
  font-size: 19px;
  line-height: 1.75;
}

/* --- Buttons: plain <a class="button"> and core button blocks --- */
.op .button,
.op .opBtn .wp-block-button__link,
.op .opBtnTeal .wp-block-button__link,
.op .opBtnLight .wp-block-button__link {
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 17px 24px;
  font-family: var(--op-font-sans);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.25s, transform 0.25s;
}

.op .button:hover,
.op .opBtn .wp-block-button__link:hover,
.op .opBtnTeal .wp-block-button__link:hover,
.op .opBtnLight .wp-block-button__link:hover {
  background: var(--deep);
  color: #fff;
  transform: translateY(-2px);
}

.op .button span {
  font-size: 17px;
}

.op .buttonSmall,
.op .opBtnTeal .wp-block-button__link {
  background: var(--blue);
  padding: 13px 20px;
  box-shadow: 0 9px 24px #09bdbd32;
}

.op .buttonLight,
.op .opBtnLight .wp-block-button__link {
  background: #fff;
  color: var(--ink);
  position: relative;
  z-index: 2;
}

.op .opBtnLight .wp-block-button__link:hover,
.op .buttonLight:hover {
  background: #f2fdfc;
  color: var(--ink);
}

.op .textLink,
.op .underLink {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: 800;
  display: inline-block;
}

.op .textLink span {
  color: var(--blue);
  margin-left: 8px;
}

.op .underLink {
  margin-top: 20px;
}

/* --- Keyboard focus. Only shows for keyboard users, never on mouse click. --- */
.op a:focus-visible,
.op button:focus-visible,
.op summary:focus-visible,
.op input:focus-visible,
.op textarea:focus-visible,
.op select:focus-visible,
.op .wp-block-button__link:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.op .programSection a:focus-visible,
.op .actionBand a:focus-visible,
.op .visitCard a:focus-visible,
.op .visitCard .wp-block-button__link:focus-visible {
  outline-color: #ffffff;
}

/* Skip-to-content affordance for screen reader and keyboard users. */
.op .skipLink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100001;
  background: var(--ink);
  color: #fff;
  padding: 14px 22px;
  border-radius: 0 0 12px 0;
  font-weight: 800;
  font-size: 14px;
}

.op .skipLink:focus {
  left: 0;
}

.op .wave {
  width: 100%;
  height: 70px;
  fill: var(--paper);
  position: absolute;
  bottom: -1px;
  left: 0;
}

/* =========================================================
   4. SITE HEADER + CUSTOM NAVIGATION
   ========================================================= */

/* Sticky bar.
   This must sit on the <header> element, NOT on .siteHeader. A sticky element
   can only travel inside its own parent's box - and .siteHeader's parent is
   exactly its own height, so sticking it there would do nothing at all.
   The <header> template part's parent is the whole page, which gives it room.

   top: uses the admin-bar height variable so the bar does not slide under the
   WordPress toolbar when you are logged in.

   Do NOT add will-change/transform/filter here: any of those would make this
   element the containing block for the position:fixed mobile drawer, and the
   drawer would stop covering the viewport. */
body.op header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 500;
}

.op .siteHeader {
  transition: box-shadow 0.25s;
}

/* .is-stuck is toggled by assets/js/navigation.js once the page scrolls. */
.op .siteHeader.is-stuck {
  box-shadow: 0 10px 30px rgba(7, 59, 117, 0.09);
}

/* Anchor links must clear the sticky bar, or the target lands underneath it. */
.op main [id] {
  scroll-margin-top: 112px;
}

.op .siteHeader {
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid #d3eeee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  min-height: 96px;
  padding: 8px max(28px, calc(50vw - 660px));
  position: relative;
}

.op .siteHeader .brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  line-height: 0;
}

/* Wide logo lockup (about 2.9:1) - size by HEIGHT so the width follows. */
.op .siteHeader .brand img {
  object-fit: contain;
  width: auto !important;
  height: 68px !important;
  max-width: min(330px, 52vw);
}

.op .opNav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--op-font-sans);
}

.op .opNav a {
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.op .opNav a:hover {
  color: var(--blue);
}

.op .opNav a[aria-current="page"] {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.op .headerCta {
  flex: 0 0 auto;
}

/* --- Hamburger button --- */
.op .opBurger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 11px;
  background: #eafaf9;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  flex: 0 0 auto;
}

.op .opBurger span {
  display: block;
  height: 2.5px;
  width: 100%;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s, opacity 0.2s;
}

.op .opBurger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.op .opBurger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.op .opBurger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* --- Slide-in drawer --- */
.op .opDrawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: 280px;
  max-width: 84vw;
  background: #fff;
  box-shadow: -18px 0 50px rgba(7, 59, 117, 0.18);
  transform: translateX(105%);
  transition: transform 0.28s ease, visibility 0.28s;
  visibility: hidden;
  z-index: 100000;
  padding: 84px 26px 34px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.op .opDrawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.op .opDrawer a {
  display: block;
  width: 100%;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  padding: 15px 0;
  border-bottom: 1px solid #e6f3f3;
  text-decoration: none;
}

.op .opDrawer a:hover,
.op .opDrawer a[aria-current="page"] {
  color: var(--blue);
}

.op .opDrawer .button {
  margin-top: 24px;
  border-bottom: 0;
  justify-content: center;
  padding: 15px 22px;
}

.op .opDrawerClose {
  position: absolute;
  top: 20px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: #eafaf9;
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.op .opBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 59, 117, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
  z-index: 99999;
}

.op .opBackdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

body.op-nav-open {
  overflow: hidden;
}

/* If the core Navigation block is used anywhere, keep its overlay compact
   rather than full-screen. */
.op .wp-block-navigation__responsive-container.is-menu-open {
  width: 280px !important;
  max-width: 84vw !important;
  left: auto !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  padding: 78px 26px 34px !important;
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: -18px 0 50px rgba(7, 59, 117, 0.18) !important;
  z-index: 100000 !important;
}

.op .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.op .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  width: 100% !important;
}

.op .wp-block-navigation__responsive-container.is-menu-open a {
  color: var(--ink) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  padding: 14px 0 !important;
  display: block !important;
  width: 100% !important;
}

/* =========================================================
   4b. INNER PAGE BANNER
   ========================================================= */
.op .pageHeader {
  background: linear-gradient(125deg, #e5fbf9 0%, #f7ffff 58%, #eef8ff 100%);
  padding: 88px max(40px, calc(50vw - 620px)) 108px;
  position: relative;
  overflow: hidden;
}

.op .pageHeader::before {
  content: "";
  border: 38px solid #09bdbd18;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  position: absolute;
  bottom: -110px;
  left: -150px;
}

.op .pageHeaderInner {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

.op .pageHeader h1 {
  letter-spacing: -0.05em;
  font-size: clamp(44px, 5.4vw, 74px);
  line-height: 1;
  font-weight: 750;
  margin: 18px 0 22px;
}

.op .pageHeader h1 em {
  color: var(--blue);
}

/* =========================================================
   5. HERO
   ========================================================= */
.op .hero {
  background: linear-gradient(125deg, #e5fbf9 0%, #f7ffff 58%, #eef8ff 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 710px;
  padding: 60px max(40px, calc(50vw - 620px)) 100px;
  position: relative;
  overflow: hidden;
}

.op .hero::before {
  content: "";
  border: 42px solid #09bdbd18;
  border-radius: 50%;
  width: 360px;
  height: 360px;
  position: absolute;
  bottom: -90px;
  left: -180px;
}

.op .heroCopy {
  z-index: 2;
  max-width: 610px;
  position: relative;
}

.op .hero h1 {
  letter-spacing: -0.055em;
  margin: 20px 0 28px;
  font-size: clamp(52px, 6vw, 88px);
  font-weight: 750;
  line-height: 0.95;
  font-family: var(--op-font-sans);
}

.op .hero h1 em {
  color: var(--blue);
}

.op .heroActions {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.op .heroActions .wp-block-button {
  margin: 0;
}

.op .trustRow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 45px;
}

.op .trustRow p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.op .tinyFaces {
  display: flex;
}

.op .tinyFaces i {
  background: var(--yellow);
  border: 3px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: -7px;
  font-style: normal;
}

.op .tinyFaces i:nth-child(2) {
  background: var(--coral);
}

.op .tinyFaces i:nth-child(3) {
  background: var(--green);
}

.op .heroArt {
  height: 570px;
  position: relative;
}

.op .arch {
  background: #fff;
  border-radius: 220px 220px 32px 32px;
  display: grid;
  place-items: center;
  width: 455px;
  height: 510px;
  position: absolute;
  bottom: 0;
  right: 15px;
  overflow: hidden;
  box-shadow: 0 30px 80px #0768a522;
}

.op .arch::before {
  content: "";
  border: 34px solid #0abfbc10;
  border-radius: 50%;
  width: 440px;
  height: 440px;
  position: absolute;
  top: -170px;
  right: -150px;
}

.op .arch::after {
  content: "";
  background: linear-gradient(165deg, #0000 0 28%, #0abfbc 29% 40%, #0000 41% 51%, #146bc0 52% 66%, #0000 67%);
  height: 82px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.op .arch img.heroPhoto {
  z-index: 1;
  object-fit: cover;
  object-position: 53% center;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  position: relative;
}

.op .arch:hover img.heroPhoto {
  transform: scale(1.025);
}

.op .sunShape {
  background: var(--yellow);
  color: #8b6700;
  width: 190px;
  height: 190px;
  font-family: var(--op-font-display);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 25px;
  position: absolute;
  top: -10px;
  right: -45px;
  transform: rotate(9deg);
}

.op .floatCard {
  z-index: 2;
  background: #fff;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  padding: 15px 20px;
  position: absolute;
  box-shadow: 0 15px 40px #073b7522;
}

.op .floatCard strong {
  font-family: var(--op-font-display);
  font-size: 24px;
  color: var(--ink);
  font-weight: 600;
}

.op .floatCard small {
  color: #647d8c;
}

.op .cardRead {
  top: 105px;
  right: 390px;
  transform: rotate(-5deg);
}

.op .cardPlay {
  bottom: 65px;
  right: -10px;
  transform: rotate(5deg);
}

.op .doodle {
  color: var(--coral);
  font-size: 58px;
  position: absolute;
}

.op .doodleStar {
  top: 45px;
  left: 80px;
}

.op .doodleLoop {
  color: var(--blue);
  bottom: 55px;
  left: 60px;
}

.op .bubble {
  border: 2px solid #4acbc6;
  border-radius: 50%;
  position: absolute;
}

.op .bubbleOne {
  width: 26px;
  height: 26px;
  top: 12%;
  left: 44%;
}

.op .bubbleTwo {
  width: 12px;
  height: 12px;
  top: 19%;
  left: 47%;
}

/* =========================================================
   6. INTRO + PILLARS
   ========================================================= */
.op .introGrid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: end;
  gap: 110px;
}

.op .intro h2,
.op .centerHead h2,
.op .dayCopy h2,
.op .faq h2,
.op .promise h2 {
  letter-spacing: -0.045em;
  font-size: clamp(43px, 5vw, 68px);
  line-height: 1.02;
  font-weight: 750;
  font-family: var(--op-font-sans);
  margin: 20px 0 28px;
}

.op .pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 75px;
}

.op .pillar {
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 325px;
  padding: 24px;
  position: relative;
}

/* The number and the body copy are matched by class AND by position, so the
   pillars look right whether the page uses the current markup or an older
   copy saved before the classes existed. :not(.icon) keeps the 56px icon
   rule safe from this higher-specificity selector. */
.op .pillar .pillarNum,
.op .pillar > span,
.op .pillar > p:not(.icon):first-of-type {
  opacity: 0.55;
  font-size: 12px;
  font-weight: 900;
}

.op .pillar .icon {
  font-family: var(--op-font-display);
  margin: auto 0 15px;
  font-size: 56px;
  line-height: 1;
}

.op .pillar h3 {
  font-family: var(--op-font-display);
  margin: 0 0 10px;
  font-size: 27px;
  font-weight: 600;
}

.op .pillar .pillarBody,
.op .pillar > p:not(.icon):not(:first-of-type) {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.op .coral { background: #ffe2db; }
.op .yellow { background: #fff0b6; }
.op .blue { background: #d9f6f4; }
.op .green { background: #dceffb; }

/* =========================================================
   7. ACTION BAND (full-bleed photo)
   ========================================================= */
.op .actionBand {
  color: #fff;
  border-radius: 34px;
  display: flex;
  align-items: flex-end;
  max-width: 1380px;
  min-height: 600px;
  margin: 0 auto 70px;
  position: relative;
  overflow: hidden;
}

.op .actionBand > .wp-block-image,
.op .actionBand > figure {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.op .actionBand > .wp-block-image img,
.op .actionBand > figure img,
.op .actionBand > img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
}

.op .actionBand:hover .wp-block-image img,
.op .actionBand:hover > img {
  transform: scale(1.02);
}

.op .actionShade {
  background: linear-gradient(90deg, #032f5fc7 0%, #073b7570 48%, #0000 77%), linear-gradient(#0000 45%, #032f5f6b);
  position: absolute;
  inset: 0;
}

.op .actionCopy {
  z-index: 2;
  max-width: 600px;
  padding: 70px;
  position: relative;
}

.op .actionCopy .eyebrow {
  color: #79eee6;
}

.op .actionCopy h2 {
  letter-spacing: -0.05em;
  margin: 16px 0 18px;
  font-size: clamp(48px, 6vw, 76px);
  line-height: 0.96;
  font-weight: 750;
  color: #fff;
}

.op .actionCopy h2 em {
  color: #79eee6;
}

.op .actionCopy p:not(.eyebrow) {
  max-width: 500px;
  margin-bottom: 28px;
  font-size: 17px;
  line-height: 1.65;
  color: #fff;
}

.op .actionStat {
  z-index: 2;
  background: var(--yellow);
  width: 210px;
  height: 210px;
  color: var(--ink);
  text-align: center;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 26px;
  position: absolute;
  bottom: 36px;
  right: 36px;
  transform: rotate(5deg);
  box-shadow: 0 15px 35px #032f5f34;
}

.op .actionStat strong,
.op .actionStat p:first-child {
  font-family: var(--op-font-display);
  font-size: 27px;
  font-weight: 600;
}

.op .actionStat span,
.op .actionStat p:last-child {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
}

/* =========================================================
   8. PROGRAMS (dark band)
   ========================================================= */
.op .programSection {
  background: linear-gradient(145deg, #073b75, #064d8d);
  color: #fff;
  padding-top: 55px;
  position: relative;
}

.op .programSection > .wave {
  fill: var(--paper);
  top: -1px;
  bottom: auto;
  transform: rotate(180deg);
}

.op .programInner {
  padding-top: 115px;
}

.op .centerHead {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.op .centerHead .eyebrow {
  color: #5de2da;
}

.op .centerHead h2 {
  margin: 18px 0;
  color: #fff;
}

.op .centerHead h2 em {
  color: #5de2da;
}

.op .centerHead > p:last-child {
  color: #b8d3e1;
}

.op .programCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 55px;
}

.op .programCards > .wp-block-group,
.op .programCards article {
  color: var(--ink);
  background: #fff;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 28px;
}

.op .programCards .featured {
  transform: translateY(-14px);
  box-shadow: 0 0 0 4px #09bdbd;
}

.op .ageBubble {
  width: 105px;
  height: 105px;
  font-family: var(--op-font-display);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
}

.op .ageBubble small {
  font-family: var(--op-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 700;
}

.op .peach { background: #ffe0da; }
.op .butter { background: #fff0b9; }
.op .aqua { background: #d9f6f4; }

.op .cardLabel {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--deep);
  margin: 28px 0 6px;
  font-size: 11px;
  font-weight: 900;
}

.op .programCards h3 {
  font-family: var(--op-font-display);
  margin: 0;
  font-size: 38px;
  font-weight: 600;
}

.op .programCards .cardBody {
  color: #61727c;
  font-size: 14px;
  line-height: 1.65;
}

.op .programCards .cardLink,
.op .programCards a.cardLink {
  border-top: 1px solid #d8e2e8;
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 18px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.op .note {
  text-align: center;
  color: #9bc7d6;
  margin-top: 38px;
  font-size: 12px;
}

/* =========================================================
   9. A DAY WITH US
   ========================================================= */
.op .day {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 100px;
}

.op .dayVisual {
  min-height: 630px;
  position: relative;
}

.op .photoPlaceholder {
  text-align: center;
  background: linear-gradient(160deg, #d9f8f4, #fff0bf 66%, #ffd6ce);
  border-radius: 260px 260px 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 610px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 12px #fff;
}

.op .photoPlaceholder > .wp-block-image,
.op .photoPlaceholder > figure {
  margin: 0;
  width: 100%;
  height: 100%;
}

.op .photoPlaceholder img {
  object-fit: cover;
  object-position: center;
  z-index: 2;
  width: 100%;
  height: 100%;
  position: relative;
}

.op .photoCaption {
  z-index: 3;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: #ffffffeb;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  padding: 17px 20px;
  position: absolute;
  bottom: 32px;
  left: 36px;
  right: 36px;
  box-shadow: 0 12px 30px #073b7520;
}

.op .photoCaption strong,
.op .photoCaption .capTitle {
  font-family: var(--op-font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
}

.op .photoCaption small,
.op .photoCaption .capSub {
  color: #557487;
  margin-top: 4px;
  font-size: 13px;
}

.op .sticker {
  background: var(--coral);
  text-align: center;
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-content: center;
  width: 135px;
  height: 135px;
  font-weight: 900;
  position: absolute;
  bottom: 50px;
  right: -35px;
  transform: rotate(8deg);
  z-index: 4;
}

.op .sticker i {
  font-family: var(--op-font-display);
  font-weight: 500;
  font-style: normal;
}

.op .dayCopy > p:not(.eyebrow) {
  color: #587080;
  font-size: 17px;
  line-height: 1.7;
}

.op .dayList {
  margin-top: 35px;
  padding: 0;
  list-style: none;
}

.op .dayRow,
.op .dayList li {
  border-bottom: 1px solid #dbe5e9;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  padding: 18px 0;
  align-items: start;
}

.op .dayRow .dayTime,
.op .dayList li > span {
  color: var(--blue);
  font-weight: 900;
}

.op .dayRow .dayText,
.op .dayList li div {
  display: flex;
  flex-direction: column;
}

.op .dayRow .dayText strong,
.op .dayRow .dayTitle {
  font-weight: 800;
  color: var(--ink);
}

.op .dayRow .daySub,
.op .dayList li small {
  color: #788c98;
  margin-top: 4px;
  font-size: 13px;
}

/* =========================================================
   10. PROMISE
   ========================================================= */
.op .promise {
  background: #e6f8f6;
}

.op .promiseGrid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 90px;
}

.op .promise h2 {
  margin: 16px 0;
}

.op .promise h2 em {
  color: var(--blue);
}

.op .promiseItems {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.op .promiseItem {
  background: #fff;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 10px;
  margin: 0;
  padding: 23px;
  box-shadow: 0 8px 30px #073b7508;
}

.op .promiseItem .tick {
  background: var(--yellow);
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 14px;
}

.op .promiseItem .promiseTitle {
  font-weight: 800;
  color: var(--ink);
  align-self: center;
}

.op .promiseItem .promiseSub {
  color: #657b88;
  grid-column: 2;
  margin-top: 5px;
  line-height: 1.5;
  font-size: 13px;
}

/* =========================================================
   11. FAQ
   ========================================================= */
.op .faq {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 100px;
}

.op .faq > div > p:last-child,
.op .faqIntro p:last-child {
  color: #677e8b;
  max-width: 420px;
  line-height: 1.7;
}

.op .questions details,
.op .questions .wp-block-details {
  border-bottom: 1px solid #cad8df;
  padding: 22px 0;
}

.op .questions summary {
  cursor: pointer;
  font-family: var(--op-font-display);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 22px;
  font-weight: 700;
  list-style: none;
  color: var(--ink);
}

.op .questions summary::-webkit-details-marker,
.op .questions summary::marker {
  display: none;
  content: "";
}

.op .questions summary::after {
  content: "+";
  font-family: var(--op-font-sans);
  color: var(--blue);
  font-size: 27px;
  line-height: 1;
  transition: transform 0.2s;
  flex: 0 0 auto;
}

.op .questions details[open] summary::after {
  transform: rotate(45deg);
}

.op .questions details p,
.op .questions .wp-block-details p {
  color: #637984;
  margin: 15px 45px 0 0;
  line-height: 1.65;
  font-family: var(--op-font-sans);
  font-size: 16px;
  font-weight: 400;
}

/* =========================================================
   12. VISIT / CONTACT
   ========================================================= */
.op .visit {
  padding: 40px;
}

.op .visitCard {
  background: linear-gradient(120deg, #08bcb8, #13c7bf);
  color: #fff;
  border-radius: 32px;
  display: grid;
  grid-template-columns: 260px 1fr auto;
  align-items: center;
  gap: 45px;
  max-width: 1240px;
  min-height: 360px;
  margin-inline: auto;
  padding: 50px 60px;
  position: relative;
  overflow: hidden;
}

.op .visitCard::after {
  content: "";
  border: 50px solid #ffffff1e;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  position: absolute;
  top: -110px;
  right: -90px;
}

.op .visitCard .wp-block-image,
.op .visitCard figure {
  margin: 0;
}

.op .visitCard img {
  background: #fff;
  border-radius: 22px;
  width: 260px;
  padding: 14px;
}

.op .visitCard .eyebrow {
  color: #eafffd;
}

.op .visitCard h2 {
  margin: 10px 0 15px;
  font-size: 48px;
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: #fff;
}

.op .visitCard p:not(.eyebrow) {
  max-width: 590px;
  line-height: 1.6;
  color: #fff;
}

.op .visitCard .wp-block-buttons {
  position: relative;
  z-index: 2;
}

.op .contactDetails {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1240px;
  margin: 22px auto 0;
}

.op .contactDetails > .wp-block-group,
.op .contactDetails > div {
  color: #426276;
  background: #fff;
  border: 1px solid #d6e8ee;
  border-radius: 20px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-height: 108px;
  padding: 22px;
  line-height: 1.55;
}

.op .contactDetails .cIcon {
  font-size: 22px;
  line-height: 1.2;
}

.op .contactDetails a,
.op .contactDetails address,
.op .contactDetails p {
  margin: 0;
  font-size: 14px;
  font-style: normal;
}

.op .contactDetails a {
  color: var(--ink);
  font-weight: 750;
}

.op .contactDetails strong {
  color: var(--ink);
}

/* Enquiry form slot */
.op .formPanel {
  background: #fff;
  border: 1px solid #d6e8ee;
  border-radius: 28px;
  max-width: 1240px;
  margin: 22px auto 0;
  padding: 44px 48px;
  box-shadow: 0 14px 45px #073b750d;
}

.op .formPanel h2 {
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 750;
  letter-spacing: -0.04em;
  margin: 12px 0 10px;
}

.op .formPanel > p {
  color: #61798a;
  line-height: 1.65;
  margin-bottom: 26px;
}

/* WPForms restyle via its own CSS variables */
.op .wpforms-container {
  --wpforms-field-border-radius: 14px;
  --wpforms-field-border-size: 1px;
  --wpforms-field-border-color: #d6e8ee;
  --wpforms-field-text-color: #073b75;
  --wpforms-label-color: #073b75;
  --wpforms-label-sublabel-color: #61798a;
  --wpforms-label-error-color: #d6455d;
  --wpforms-button-background-color: #073b75;
  --wpforms-button-text-color: #ffffff;
  --wpforms-button-border-radius: 999px;
  --wpforms-button-size-padding-h: 26px;
  --wpforms-button-size-font-size: 14px;
  --wpforms-field-size-input-height: 52px;
  --wpforms-field-size-font-size: 15px;
  max-width: 720px;
}

.op .wpforms-container .wpforms-submit {
  font-weight: 800 !important;
  letter-spacing: 0.01em;
}

.op .wpforms-container .wpforms-submit:hover {
  background-color: #07539a !important;
}

/* =========================================================
   13. FOOTER
   ========================================================= */
/* The contact cards sit at the top of the footer, so the footer opens with
   almost no padding - the preceding .visit section already supplies the gap. */
.op .siteFooter {
  max-width: 1240px;
  margin-inline: auto;
  padding: 20px 40px 25px;
}

.op .siteFooter .contactDetails {
  margin: 0 auto;
}

.op .footerTop {
  margin-top: 96px;
}

.op .footerTop {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1fr 1fr;
  align-items: start;
  gap: 50px;
}

.op .footerTop img {
  width: auto !important;
  height: 86px !important;
  max-width: 100%;
  object-fit: contain;
}

.op .footerTop figure {
  margin: 0;
}

.op .footerTop .footerTagline {
  font-family: var(--op-font-display);
  margin: 5px 0;
  font-size: 22px;
  line-height: 1.25;
}

.op .footerCol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}

.op .footerCol .footerColTitle {
  margin-bottom: 8px;
}

.op .footerCol .footerColTitle strong {
  font-weight: 800;
  color: var(--ink);
}

.op .footerCol a,
.op .footerCol p a {
  color: #5e7480;
}

.op .footerCol a:hover {
  color: var(--blue);
}

.op .footerBottom {
  color: #708591;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-top: 1px solid #d8e3e8;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 50px;
  padding-top: 20px;
  font-size: 11px;
}

/* =========================================================
   14. RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .op .siteHeader {
    min-height: 84px;
  }

  .op .siteHeader .brand img {
    height: 56px !important;
  }

  .op .opNav {
    display: none;
  }

  .op .opBurger {
    display: flex;
  }

  .op .hero {
    grid-template-columns: 1fr;
    padding-top: 65px;
  }

  .op .heroArt {
    height: 470px;
  }

  .op .arch {
    height: 430px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .op .cardRead {
    right: auto;
    left: 0;
  }

  .op .introGrid,
  .op .day,
  .op .promiseGrid,
  .op .faq {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .op .pillars {
    grid-template-columns: 1fr 1fr;
  }

  .op .actionBand {
    margin: 0 24px 70px;
  }

  .op .actionCopy {
    padding: 50px;
  }

  .op .programCards {
    grid-template-columns: 1fr;
  }

  .op .programCards .featured {
    transform: none;
  }

  .op .dayVisual {
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
  }

  .op .visitCard {
    grid-template-columns: 170px 1fr;
  }

  .op .visitCard img {
    width: 170px;
  }

  .op .visitCard .wp-block-buttons {
    grid-column: 2;
    justify-self: start;
  }

  .op .contactDetails {
    grid-template-columns: 1fr 1fr;
  }

  .op .footerTop {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .op .siteHeader {
    min-height: 78px;
    padding: 8px 18px;
    gap: 12px;
  }

  .op main [id] {
    scroll-margin-top: 92px;
  }

  .op .siteHeader .brand img {
    height: 44px !important;
  }

  .op .headerCta {
    display: none;
  }

  .op .section {
    padding: 75px 22px;
  }

  .op .hero {
    min-height: auto;
    padding: 55px 22px 80px;
  }

  .op .hero h1 {
    font-size: 46px;
  }

  .op .lead {
    font-size: 16px;
  }

  .op .heroActions {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .op .heroArt {
    height: 400px;
    margin-top: 15px;
  }

  .op .arch {
    width: 300px;
    height: 355px;
  }

  .op .sunShape {
    width: 120px;
    height: 120px;
    font-size: 18px;
    right: -35px;
  }

  .op .cardRead {
    top: 65px;
    left: 0;
    right: auto;
  }

  .op .cardPlay {
    right: 0;
  }

  .op .pillars,
  .op .promiseItems {
    grid-template-columns: 1fr;
  }

  .op .pillar {
    min-height: 260px;
  }

  .op .actionBand {
    border-radius: 24px;
    min-height: 590px;
    margin: 0 14px 55px;
  }

  .op .actionBand img {
    object-position: 57% center;
  }

  .op .actionShade {
    background: linear-gradient(#0000 0%, #073b758c 42%, #032f5fe8 100%);
  }

  .op .actionCopy {
    padding: 34px 24px 42px;
  }

  .op .actionCopy h2 {
    font-size: 42px;
  }

  .op .actionStat {
    width: 120px;
    height: 120px;
    padding: 14px;
    top: 18px;
    bottom: auto;
    right: 16px;
  }

  .op .actionStat strong,
  .op .actionStat p:first-child {
    font-size: 20px;
  }

  .op .actionStat span,
  .op .actionStat p:last-child {
    font-size: 10px;
  }

  .op .programInner {
    padding-top: 80px;
  }

  .op .day {
    gap: 25px;
  }

  .op .dayVisual {
    min-height: 490px;
  }

  .op .photoPlaceholder {
    height: 470px;
  }

  .op .photoCaption {
    bottom: 20px;
    left: 18px;
    right: 18px;
  }

  .op .sticker {
    right: -5px;
  }

  .op .questions summary {
    font-size: 19px;
  }

  .op .visit {
    padding: 18px;
  }

  .op .visitCard {
    text-align: center;
    grid-template-columns: 1fr;
    padding: 36px 25px;
    justify-items: center;
  }

  .op .visitCard img {
    width: 150px;
    margin-inline: auto;
  }

  .op .visitCard .wp-block-buttons {
    grid-column: 1;
    justify-self: center;
  }

  .op .visitCard h2 {
    font-size: 36px;
  }

  .op .contactDetails {
    grid-template-columns: 1fr;
  }

  .op .contactDetails > .wp-block-group,
  .op .contactDetails > div {
    min-height: auto;
  }

  .op .formPanel {
    padding: 30px 22px;
    border-radius: 22px;
  }

  .op .siteFooter {
    padding: 14px 22px 22px;
  }

  .op .footerTop {
    margin-top: 52px;
  }

  .op .footerTop {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .op .footerBottom {
    flex-direction: column;
    gap: 12px;
  }

  .op .bubble,
  .op .doodle {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .op .button,
  .op .wp-block-button__link,
  .op .arch img.heroPhoto,
  .op .actionBand img {
    transition: none;
  }
}