/* NOTE ON UNITS
   ourkidsread.org sets html { font-size: 62.5% }, so 1rem = 10px there.
   Every rem below is written in that 10px scale (the site's own convention):
   1.6rem = 16px, 2.4rem = 24px, and so on. */

/* ==========================================================================
   Our Kids Read — Baltimore Literacy Hub
   New top-of-page sections
   --------------------------------------------------------------------------
   All rules are namespaced under .okr-hub so they cannot collide with the
   existing site stylesheet (/css/front/style.css).
   ========================================================================== */

.okr-hub {
  /* Typography — reuses the live site's own faces.
     --ff-din (din-condensed) and --ff-base (adelle) are already defined by
     /css/front/style.css; the fallbacks only apply in local preview. */
  --okr-ff-head: var(--ff-din, "Oswald", "Arial Narrow", Impact, sans-serif);
  --okr-ff-body: var(--ff-base, "Bitter", Georgia, "Times New Roman", serif);

  /* Palette — sampled from the design comp */
  --okr-heading: #0d3b44;
  --okr-teal-deep: #006b67;
  --okr-teal-bright: #10b8ad;
  --okr-navy: #0b3f70;
  --okr-ink: #123a44;
  --okr-pink: #d8365f;
  --okr-yellow: #f3b61f;
  --okr-cream: #fdf8f1;
  --okr-gray: #f3f5f7;
  --okr-border: #e3e8ec;
  --okr-shadow: 0 10px 30px rgba(6, 40, 45, 0.08);
  --okr-radius: 14px;

  font-family: var(--okr-ff-body);
  color: var(--okr-ink);
  line-height: 1.55;
}

.okr-hub *,
.okr-hub *::before,
.okr-hub *::after {
  box-sizing: border-box;
}

.okr-hub__shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.okr-hub img {
  max-width: 100%;
  display: block;
}

/* Script accent text ------------------------------------------------------ */
.okr-script {
  font-family: "Caveat", "Brush Script MT", cursive;
  color: var(--okr-pink);
  font-weight: 700;
  line-height: 1.2;
}

/* Buttons ----------------------------------------------------------------- */
.okr-btn {
  font-family: var(--okr-ff-head);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 1.47rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.okr-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(6, 40, 45, 0.18);
  text-decoration: none;
}

.okr-btn--pink   { background: var(--okr-pink);      color: #fff; }
.okr-btn--yellow { background: var(--okr-yellow);    color: #23262b; }
.okr-btn--teal   { background: var(--okr-teal-deep); color: #fff; }
.okr-btn--navy   { background: #0d3b44;              color: #fff; letter-spacing: .06em; text-transform: uppercase; }

.okr-btn--outline {
  background: transparent;
  color: #0d3b44;
  border-color: #0d3b44;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.okr-btn--block { width: 100%; }

/* ==========================================================================
   1. HERO — Grand Opening
   ========================================================================== */
.okr-hero {
  position: relative;
  background: linear-gradient(180deg, var(--okr-cream) 0%, #fbf3ea 100%);
  overflow: hidden;
}

.okr-hero__top {
  position: relative;
  overflow: hidden;
}

.okr-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 56%;
  /* The site header is position:fixed (~180px tall at desktop widths), so the
     copy has to start below it. The photo behind it still runs to the top,
     matching the mockup. The site's own heroes reserve space the same way. */
  padding: 20rem 0 124px;
}

.okr-hero__eyebrow {
  font-size: 2.32rem;
  margin: 0 0 2px;
}

.okr-hero__title {
  margin: 0;
  font-family: var(--okr-ff-head);
  font-weight: 700;
  color: var(--okr-heading);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.okr-hero__line-lg {
  display: block;
  font-size: clamp(3.36rem, 4.3vw, 5.04rem);
  line-height: 1.0;
}

.okr-hero__line-sm {
  font-family: var(--okr-ff-body);
  display: block;
  font-size: clamp(1.52rem, 1.4vw, 1.84rem);
  font-weight: 600;
  text-transform: none;
  margin: 2px 0;
  color: var(--okr-ink);
}

.okr-hero__line-md {
  display: block;
  font-size: clamp(2.16rem, 2.3vw, 2.96rem);
  line-height: 1.1;
}

/* Feature bullets */
.okr-hero__features {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.okr-feature {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.okr-feature__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.okr-feature__icon svg { width: 21px; height: 21px; }
.okr-feature__icon--teal   { background: var(--okr-teal-deep); color: #fff; }
.okr-feature__icon--pink   { background: var(--okr-pink);      color: #fff; }
.okr-feature__icon--yellow { background: var(--okr-yellow);    color: #23262b; }

.okr-feature__text {
  font-size: 1.31rem;
  font-weight: 600;
  color: var(--okr-navy);
  line-height: 1.32;
}

/* Photo: sits flush to the right edge and dissolves into the cream
   background on its left, matching the mockup. */
.okr-hero__figure {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 52%;
  margin: 0;
  z-index: 0;
}

.okr-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    rgba(0, 0, 0, 0.55) 9%,
    #000 22%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    rgba(0, 0, 0, 0.55) 9%,
    #000 22%
  );
}

/* Decorative confetti ----------------------------------------------------- */
.okr-confetti {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.okr-confetti--hero-a { top: 34px;  left: 41%; width: 46px; }
.okr-confetti--hero-b { top: 150px; left: 40%; width: 34px; }
.okr-confetti--card   { top: -34px; left: -42px; width: 76px; }

/* Grand opening detail card ---------------------------------------------- */
.okr-hero__card-wrap {
  position: relative;
  z-index: 3;
  margin-top: -74px; /* card overlaps the photo, as in the mockup */
  background: linear-gradient(180deg, transparent 0 62%, #0d3b44 62% 100%);
}

.okr-opening-card { position: relative; }

.okr-opening-card {
  background: #fff;
  border-radius: var(--okr-radius);
  box-shadow: var(--okr-shadow);
  padding: 26px 32px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.okr-opening-card__icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #0d3b44;
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.okr-opening-card__icon svg { width: 36px; height: 36px; }

.okr-opening-card__body { flex: 1 1 320px; }

.okr-opening-card__script {
  font-size: 2.32rem;
  margin: 0 0 4px;
}

.okr-opening-card__date {
  font-family: var(--okr-ff-head);
  margin: 0;
  font-size: clamp(2.08rem, 2.2vw, 2.8rem);
  font-weight: 700;
  color: var(--okr-heading);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.okr-opening-card__time {
  font-family: var(--okr-ff-head);
  margin: 4px 0 0;
  font-size: 1.84rem;
  font-weight: 700;
  color: var(--okr-ink);
  display: inline-block;
  border-bottom: 3px solid var(--okr-yellow);
  padding-bottom: 6px;
}

.okr-opening-card__location {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.36rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--okr-ink);
  text-transform: uppercase;
  line-height: 1.5;
}

.okr-opening-card__location svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: #0d3b44;
}

/* Stats bar --------------------------------------------------------------- */
.okr-stats {
  background: #0d3b44;
  color: #fff;
  padding: 34px 0 44px;
}

.okr-stats__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}

.okr-stat {
  display: flex;
  align-items: center;
  gap: 18px;
}

.okr-stat + .okr-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  padding-left: 56px;
}

.okr-stat__icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.okr-stat__icon svg { width: 34px; height: 34px; color: #fff; }

.okr-stat__number {
  font-family: var(--okr-ff-head);
  font-size: clamp(2.56rem, 3vw, 3.36rem);
  font-weight: 800;
  line-height: 1.05;
  display: block;
}

.okr-stat__label {
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  opacity: 0.92;
}

/* ==========================================================================
   2. THREE WAYS TO SUPPORT
   ========================================================================== */
.okr-support { padding: 54px 0 10px; background: #fff; }

.okr-support__title {
  font-family: var(--okr-ff-head);
  text-align: center;
  font-size: clamp(1.68rem, 2.2vw, 2.24rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--okr-ink);
  margin: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.okr-support__title::before,
.okr-support__title::after {
  content: "";
  width: 34px;
  height: 12px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M2 2h20M6 6h22M2 10h16' stroke='%230b3f70' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

.okr-support__title::after { transform: scaleX(-1); }

.okr-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.okr-card {
  border-radius: var(--okr-radius);
  padding: 30px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  border: 1px solid;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.okr-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--okr-shadow);
}

.okr-card--pink   { background: #fef6f8; border-color: #f8d6e0; }
.okr-card--yellow { background: #fffaef; border-color: #f7e4b6; }
.okr-card--teal   { background: #f2fbfa; border-color: #cfe9e6; }

.okr-card__icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  color: #fff;
}

.okr-card__icon svg { width: 30px; height: 30px; }
.okr-card--pink   .okr-card__icon { background: var(--okr-pink); }
.okr-card--yellow .okr-card__icon { background: var(--okr-yellow); color: #fff; }
.okr-card--teal   .okr-card__icon { background: var(--okr-teal-deep); }

.okr-card__title {
  font-family: var(--okr-ff-head);
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 12px;
  line-height: 1.35;
}

.okr-card--pink   .okr-card__title { color: var(--okr-pink); }
.okr-card--yellow .okr-card__title { color: #e0a015; }
.okr-card--teal   .okr-card__title { color: var(--okr-teal-deep); }

.okr-card__text {
  font-size: 1.47rem;
  margin: 0 0 22px;
  color: #3d4b52;
  flex-grow: 1;
}

/* ==========================================================================
   3. STORE HOURS
   ========================================================================== */
.okr-hours { padding: 40px 0; background: #fff; }

.okr-hours__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  align-items: stretch;
}

.okr-hours__card {
  background: #f4fbfa;
  border: 1px solid #d7ecea;
  border-radius: var(--okr-radius);
  padding: 28px 30px;
}

.okr-hours__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--okr-yellow);
  margin-bottom: 20px;
}

.okr-hours__head svg { width: 30px; height: 30px; color: var(--okr-ink); }

.okr-hours__title {
  font-family: var(--okr-ff-head);
  margin: 0;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.okr-hours__list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.okr-hours__list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: 1.6rem;
}

.okr-hours__day {
  font-weight: 700;
  color: var(--okr-teal-deep);
}

.okr-hours__time { font-weight: 600; color: var(--okr-ink); }

.okr-hours__note {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #d7ecea;
  font-size: 1.38rem;
  font-style: italic;
  color: #5b6a71;
}

.okr-hours__figure {
  margin: 0;
  border-radius: var(--okr-radius);
  overflow: hidden;
  box-shadow: var(--okr-shadow);
}

.okr-hours__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   4. UPCOMING EVENTS
   ========================================================================== */
.okr-events { padding: 26px 0 44px; background: #fff; }

.okr-events__panel {
  background: #2f7f79;
  border-radius: var(--okr-radius);
  padding: 26px 28px 30px;
}

.okr-events__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--okr-yellow);
  margin-bottom: 20px;
}

.okr-events__head svg { width: 32px; height: 32px; color: #fff; }

.okr-events__title {
  font-family: var(--okr-ff-head);
  margin: 0;
  color: #fff;
  font-size: 2.08rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.okr-event {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.okr-event:hover {
  transform: translateX(3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  text-decoration: none;
}

.okr-event__date {
  background: #c94a4a;
  color: #fff;
  padding: 16px 20px;
  text-align: center;
  display: grid;
  place-content: center;
  flex-shrink: 0;
  min-width: 86px;
}

.okr-event__month {
  font-family: var(--okr-ff-head);
  display: block;
  font-size: 1.31rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.okr-event__day {
  font-family: var(--okr-ff-head);
  display: block;
  font-size: 3.04rem;
  font-weight: 800;
  line-height: 1.05;
}

.okr-event__body {
  flex: 1;
  padding: 14px 18px;
  min-width: 0;
}

.okr-event__name {
  display: block;
  margin: 0 0 3px;
  font-size: 1.57rem;
  font-weight: 700;
  color: var(--okr-ink);
}

.okr-event__meta {
  display: block;
  margin: 0 0 6px;
  font-size: 1.44rem;
  color: #3d4b52;
}

.okr-event__meta a {
  color: #c94a4a;
  font-weight: 600;
}

.okr-event__location {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 1.34rem;
  color: #4a585f;
  line-height: 1.45;
}

.okr-event__location svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--okr-ink);
}

.okr-event__arrow {
  display: grid;
  place-items: center;
  padding: 0 18px;
  color: #6b7a81;
  flex-shrink: 0;
}

.okr-event__arrow svg { width: 20px; height: 20px; }

.okr-events__footer { text-align: center; margin-top: 20px; }

/* ==========================================================================
   5. FOOTER CTA
   ========================================================================== */
.okr-cta { padding: 0 0 50px; background: #fff; }

.okr-cta__panel {
  background: #e7f4f2;
  border-radius: var(--okr-radius);
  padding: 26px 34px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.okr-cta__icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #0d3b44;
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.okr-cta__icon svg { width: 38px; height: 38px; }

.okr-cta__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 1.73rem;
  font-weight: 600;
  color: var(--okr-ink);
  line-height: 1.45;
}

.okr-cta__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  /* Photo moves above the copy and becomes a normal block */
  .okr-hero__top { display: flex; flex-direction: column; }

  .okr-hero__figure {
    position: static;
    width: 100%;
    height: 280px;
    order: -1;
  }

  .okr-hero__figure img {
    -webkit-mask-image: none;
    mask-image: none;
    object-position: center 18%;
  }

  /* photo is first on mobile, so the header clearance goes on the wrapper */
  .okr-hero__top { padding-top: 13rem; }

  .okr-hero__inner {
    max-width: none;
    padding: 26px 0 24px;
  }

  .okr-confetti { display: none; }

  /* the desktop overlap would swallow the last feature on small screens */
  .okr-hero__card-wrap {
    margin-top: 0;
    padding-top: 0;
    background: #0d3b44;
  }

  .okr-opening-card { margin-top: -1px; }

  .okr-stat + .okr-stat {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    padding-top: 24px;
  }

  .okr-stats__inner { gap: 24px; flex-direction: column; }

  .okr-cards { grid-template-columns: 1fr; }

  .okr-hours__inner { grid-template-columns: 1fr; }

  .okr-hours__figure img { max-height: 280px; }
}

@media (max-width: 620px) {
  .okr-hub__shell { padding: 0 16px; }

  .okr-hero__features { grid-template-columns: 1fr; gap: 14px; }

  .okr-feature { flex-direction: row; align-items: center; }

  .okr-opening-card { padding: 22px 20px; gap: 18px; }

  .okr-event { flex-wrap: wrap; }

  .okr-event__date {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px;
  }

  .okr-event__day { font-size: 2.08rem; }

  .okr-event__arrow { display: none; }

  .okr-cta__panel { padding: 22px 20px; }

  .okr-cta__actions { width: 100%; }

  .okr-cta__actions .okr-btn { flex: 1; }
}

/* Motion preference ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .okr-hub * { transition: none !important; }
}