/*
Theme Name: Hearts of Oak
Theme URI: https://example.com/hearts-of-oak
Author: David Gourley
Description: Bespoke community-pub theme for the Hearts of Oak. App-style layout with an events custom post type, category filter tabs, and a sticky footer nav. Built on a bare custom base (no parent theme).
Version: 1.1.4
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hearts-of-oak
*/

/* ============================================================
   Design tokens — extracted from the mockup
   ============================================================ */
:root {
  /* Brand palette sampled from the official Hearts of Oak logo.
     (Var names kept as "green" so no other rules need touching.) */
  --hoo-green-900: #003548;   /* deepest bg — dark brand blue */
  --hoo-green-800: #004a68;   /* page bg — brand blue */
  --hoo-green-700: #0a5673;   /* card bg */
  --hoo-green-600: #1a6484;   /* card bg raised / borders */
  --hoo-gold:      #c8a060;   /* primary gold */
  --hoo-gold-soft: #cdaa6a;   /* gold text on dark */
  --hoo-cream:     #f0ecdf;   /* headings / display */
  --hoo-white:     #ffffff;
  --hoo-muted:     #c3d3da;   /* body text on dark */

  --hoo-radius:    14px;
  --hoo-radius-sm: 10px;
  --hoo-maxw:      520px;      /* app-style single column */
  --hoo-footer-h:  70px;

  --hoo-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --hoo-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   Reset-ish base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--hoo-body);
  background: var(--hoo-green-800);
  color: var(--hoo-muted);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--hoo-footer-h) + env(safe-area-inset-bottom, 0px));
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--hoo-gold-soft); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--hoo-display); color: var(--hoo-cream); line-height: 1.1; margin: 0 0 .4em; font-weight: 700; }

/* Shell keeps the app-style narrow column, centered on desktop */
.hoo-shell { max-width: var(--hoo-maxw); margin: 0 auto; min-height: 100vh; position: relative; }

/* Eyebrow label with the little gold rule from the mockup */
.hoo-eyebrow {
  display: flex; align-items: center; gap: .6rem;
  color: var(--hoo-gold-soft);
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 .5rem;
}
.hoo-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--hoo-gold); display: inline-block; }

/* ============================================================
   Site header (logo + hamburger)
   ============================================================ */
.hoo-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem .5rem;
}
.hoo-logo { display: flex; align-items: center; gap: .6rem; }
.hoo-logo img { width: 150px; }
.hoo-logo .hoo-logo-text {
  font-family: var(--hoo-display); color: var(--hoo-cream);
  font-size: 1.4rem; letter-spacing: .02em;
}
.hoo-logo .hoo-logo-text em { color: var(--hoo-gold); font-style: italic; font-size: .8em; }
.hoo-burger {
  background: none; border: 0; cursor: pointer; padding: .4rem;
  display: flex; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center;
}
.hoo-burger span { width: 26px; height: 2.5px; background: var(--hoo-gold); display: block; border-radius: 2px; }
.hoo-header__actions { display: flex; align-items: center; gap: .4rem; }
.hoo-header__call {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  color: var(--hoo-gold); border-radius: 50%;
}
.hoo-header__call svg { width: 22px; height: 22px; }

/* ============================================================
   Booking / enquiry form
   ============================================================ */
.hoo-form label { display: block; margin-bottom: 1rem; }
.hoo-form label > span { display: block; margin-bottom: .35rem; color: var(--hoo-cream); font-weight: 600; font-size: .95rem; }
.hoo-form input, .hoo-form select, .hoo-form textarea {
  width: 100%; padding: .8rem .9rem; border-radius: var(--hoo-radius-sm);
  border: 1px solid var(--hoo-green-600); background: var(--hoo-green-700);
  color: var(--hoo-white); font-family: var(--hoo-body); font-size: 1rem;
}
.hoo-form input:focus, .hoo-form select:focus, .hoo-form textarea:focus {
  outline: 2px solid var(--hoo-gold); outline-offset: 1px; border-color: var(--hoo-gold);
}
.hoo-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.hoo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hoo-form .hoo-btn { margin-top: .4rem; }
.hoo-book__error {
  background: rgba(200,80,60,.15); border: 1px solid rgba(200,80,60,.5);
  color: #ffd7cf; padding: .9rem 1rem; border-radius: var(--hoo-radius-sm); margin-bottom: 1.2rem;
}
.hoo-book__done {
  background: var(--hoo-green-700); border: 1px solid var(--hoo-green-600);
  border-radius: var(--hoo-radius); padding: 1.6rem; text-align: center;
}
.hoo-book__done h2 { font-size: 1.6rem; margin-bottom: .5rem; }
.hoo-book__note { margin-top: 1.2rem; color: var(--hoo-muted); font-size: .9rem; }

/* ============================================================
   Hero (front page)
   ============================================================ */
.hoo-hero { position: relative; padding: 0 1.25rem 2rem; }
.hoo-hero-img { border-radius: 0; margin: 0 -1.25rem 1.25rem; }
.hoo-hero-img img { width: 100%; object-fit: cover; max-height: 340px; }
.hoo-hero h1 {
  font-size: clamp(2.6rem, 12vw, 3.4rem); text-transform: uppercase; margin: .2rem 0 .6rem;
}
.hoo-hero h1 em { display: inline-block; color: var(--hoo-gold); font-style: italic; text-transform: none; font-size: .55em; margin-right: .1em; }
.hoo-hero-tagline { color: var(--hoo-white); font-size: 1.15rem; line-height: 1.4; margin: 0 0 1.6rem; }

/* ============================================================
   Buttons
   ============================================================ */
.hoo-btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: 1rem 1.25rem; border-radius: var(--hoo-radius);
  font-family: var(--hoo-body); font-weight: 700; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; border: 1.5px solid var(--hoo-gold); margin-bottom: .9rem; transition: opacity .15s ease;
}
.hoo-btn:hover { opacity: .9; }
.hoo-btn--primary { background: var(--hoo-gold); color: var(--hoo-green-900); }
.hoo-btn--ghost { background: transparent; color: var(--hoo-gold); }
.hoo-btn svg { width: 20px; height: 20px; }

/* ============================================================
   Events — front-page cards (stacked, image on top)
   ============================================================ */
.hoo-section { padding: 1.5rem 1.25rem; }
.hoo-section > h2 { font-size: 2rem; margin-bottom: 1.2rem; }

.hoo-event-card {
  background: var(--hoo-green-700); border-radius: var(--hoo-radius); overflow: hidden;
  margin-bottom: 1.4rem; border: 1px solid var(--hoo-green-600);
}
.hoo-event-card__media { position: relative; display: grid; grid-template-columns: 96px 1fr; }
.hoo-event-card__date {
  background: var(--hoo-green-900); color: var(--hoo-gold); text-align: center;
  display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1rem .5rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.hoo-event-card__date .dow { font-size: .8rem; font-weight: 600; }
.hoo-event-card__date .dom { font-family: var(--hoo-display); font-size: 2.2rem; line-height: 1; color: var(--hoo-cream); }
.hoo-event-card__date .mon { font-size: .8rem; font-weight: 600; }
.hoo-event-card__img { position: relative; }
.hoo-event-card__img img { width: 100%; height: 100%; object-fit: cover; min-height: 130px; }
.hoo-event-card__badge {
  position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--hoo-gold);
  background: var(--hoo-green-900); display: flex; align-items: center; justify-content: center; color: var(--hoo-gold);
}
.hoo-event-card__badge svg { width: 26px; height: 26px; }
.hoo-event-card__body { padding: 1rem 1.25rem 1.25rem; }
.hoo-event-card__cat { color: var(--hoo-gold-soft); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hoo-event-card__title { font-size: 1.55rem; margin: .2rem 0 .3rem; }
.hoo-event-card__time { color: var(--hoo-gold-soft); font-size: 1rem; }

/* ============================================================
   Events — archive rows (image left, chevron right)
   ============================================================ */
.hoo-filter { display: flex; gap: .6rem; overflow-x: auto; padding: 0 0 1.2rem; -webkit-overflow-scrolling: touch; }
.hoo-filter a {
  flex: 0 0 auto; padding: .6rem 1.1rem; border-radius: var(--hoo-radius-sm);
  border: 1px solid var(--hoo-green-600); color: var(--hoo-cream);
  font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--hoo-green-700);
}
.hoo-filter a.is-active { background: var(--hoo-gold); color: var(--hoo-green-900); border-color: var(--hoo-gold); }

.hoo-event-row {
  display: grid; grid-template-columns: 110px 1fr 20px; gap: 1rem; align-items: center;
  padding: 1.1rem 0; border-bottom: 1px solid var(--hoo-green-600);
}
.hoo-event-row__img img { width: 110px; height: 110px; object-fit: cover; border-radius: var(--hoo-radius-sm); }
.hoo-event-row--noimg { grid-template-columns: 1fr 20px; }
.hoo-event-row__date { color: var(--hoo-gold); text-transform: uppercase; }
.hoo-event-row__date .dom { font-family: var(--hoo-display); font-size: 1.9rem; color: var(--hoo-cream); line-height: 1; display: block; }
.hoo-event-row__cat { color: var(--hoo-gold-soft); font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.hoo-event-row__title { font-size: 1.4rem; margin: .15rem 0; line-height: 1.15; }
.hoo-event-row__time { color: var(--hoo-gold-soft); font-size: .95rem; }
.hoo-event-row__chev { color: var(--hoo-gold); font-size: 1.4rem; text-align: center; align-self: center; }
.hoo-event-row__grid { display: grid; grid-template-columns: 70px 1fr; gap: .1rem .9rem; align-items: start; }

/* ============================================================
   Community section
   ============================================================ */
.hoo-support-banner {
  display: grid; grid-template-columns: 48px 1fr 24px; gap: 1rem; align-items: center;
  border: 1px solid var(--hoo-green-600); border-radius: var(--hoo-radius); padding: 1.2rem; margin-top: .5rem;
}
.hoo-support-banner .heart { color: var(--hoo-gold); }
.hoo-support-banner strong { display: block; color: var(--hoo-gold-soft); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3rem; }
.hoo-support-banner p { margin: 0; color: var(--hoo-muted); font-size: .95rem; }

.hoo-community-card {
  background: var(--hoo-green-700); border: 1px solid var(--hoo-green-600); border-radius: var(--hoo-radius);
  overflow: hidden; margin-bottom: 1.4rem; display: grid; grid-template-columns: 1fr;
}
.hoo-community-card__img { background: var(--hoo-green-900); }
.hoo-community-card__img img { width: 100%; height: auto; display: block; }
.hoo-community-card--noimg { grid-template-columns: 1fr; }
.hoo-community-card__body { padding: 1.2rem; }
.hoo-community-card__body h3 { color: var(--hoo-gold-soft); font-family: var(--hoo-body); font-size: 1.05rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hoo-community-card__body p { color: var(--hoo-white); font-size: .95rem; margin: 0 0 1rem; }
.hoo-community-card__label { color: var(--hoo-gold-soft); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: .3rem; }
.hoo-community-card--noimg { grid-template-columns: 1fr; }
.hoo-community-card__body p:last-child { margin-bottom: 0; }

/* ============================================================
   Sticky footer nav (app tab bar)
   ============================================================ */
.hoo-tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px; height: var(--hoo-footer-h);
  background: var(--hoo-green-900); border-top: 1px solid var(--hoo-green-600);
  display: flex; z-index: 50; padding-bottom: env(safe-area-inset-bottom, 0px);
}
.hoo-tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  color: var(--hoo-muted); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.hoo-tabbar a.is-active { color: var(--hoo-gold); }
.hoo-tabbar a svg { width: 22px; height: 22px; }

/* ============================================================
   Single event
   ============================================================ */
.hoo-single-event { padding: 0 0 2rem; }
.hoo-single-event__hero img { width: 100%; max-height: 300px; object-fit: cover; }
.hoo-single-event__body { padding: 1.5rem 1.25rem; }
.hoo-single-event__meta { color: var(--hoo-gold-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.hoo-single-event__body h1 { font-size: 2.4rem; margin-bottom: .8rem; }
.hoo-back { display: inline-flex; align-items: center; gap: .4rem; margin: 1rem 1.25rem 0; color: var(--hoo-gold); font-weight: 700; }

/* ============================================================
   Find Us
   ============================================================ */
.hoo-map { border-radius: var(--hoo-radius); overflow: hidden; border: 1px solid var(--hoo-green-600); margin-bottom: 1.4rem; }
.hoo-map iframe { display: block; }
.hoo-find__card {
  background: var(--hoo-green-700); border: 1px solid var(--hoo-green-600);
  border-radius: var(--hoo-radius); padding: 1.4rem;
}
.hoo-find__heading { font-size: 1.3rem; margin-bottom: .6rem; }
.hoo-find__address { font-style: normal; color: var(--hoo-white); font-size: 1.1rem; line-height: 1.5; margin-bottom: 1.2rem; }
.hoo-find__body { margin-top: 1.4rem; color: var(--hoo-muted); }
.hoo-find__body h2, .hoo-find__body h3 { color: var(--hoo-cream); margin-top: 1.2rem; }

/* ============================================================
   Accessibility niceties
   ============================================================ */
a:focus-visible, button:focus-visible { outline: 2px solid var(--hoo-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.screen-reader-text {
  position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden;
}

/* ============================================================
   Mobile drawer menu (slides in from right)
   ============================================================ */
.hoo-topnav { display: none; } /* hidden on mobile; shown at desktop breakpoint */

.hoo-drawer { position: fixed; inset: 0; z-index: 100; }
.hoo-drawer[hidden] { display: none; }
.hoo-drawer__backdrop {
  position: absolute; inset: 0; background: rgba(0,20,28,.6);
  opacity: 0; transition: opacity .25s ease;
}
.hoo-drawer.is-open .hoo-drawer__backdrop { opacity: 1; }
.hoo-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(82%, 340px);
  background: var(--hoo-green-900); border-left: 1px solid var(--hoo-green-600);
  padding: 4rem 1.5rem 2rem; transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column; overflow-y: auto;
}
.hoo-drawer.is-open .hoo-drawer__panel { transform: translateX(0); }
.hoo-drawer__close {
  position: absolute; top: 1rem; right: 1.25rem; background: none; border: 0;
  color: var(--hoo-gold); font-size: 2rem; line-height: 1; cursor: pointer; width: 44px; height: 44px;
}
.hoo-drawer__menu { list-style: none; margin: 0; padding: 0; }
.hoo-drawer__menu li { border-bottom: 1px solid var(--hoo-green-700); }
.hoo-drawer__menu a {
  display: block; padding: 1rem .25rem; color: var(--hoo-cream); font-family: var(--hoo-display);
  font-size: 1.4rem;
}
.hoo-drawer__menu a:hover { color: var(--hoo-gold); }
.hoo-drawer__call { margin-top: auto; }
.hoo-drawer__social { display: flex; align-items: center; gap: .6rem; padding: 1rem .25rem; color: var(--hoo-gold); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; border-top: 1px solid var(--hoo-green-700); }
.hoo-drawer__social:hover { color: var(--hoo-cream); }

/* ============================================================
   WIDE LAYOUT — applies on any screen >= 760px (both orientations).
   This is the roomy two-column look. Navigation furniture
   (top nav vs burger + bottom bar) is handled separately below.
   ============================================================ */
@media (min-width: 760px) {

  :root { --hoo-maxw: 1080px; }

  .hoo-shell { max-width: none; }

  /* Header spans the wider column */
  .hoo-header {
    max-width: var(--hoo-maxw); margin: 0 auto; padding: 1.25rem 2rem;
    align-items: center;
  }
  .hoo-logo img { width: 190px; }
  .hoo-logo .hoo-logo-text { font-size: 1.7rem; }

  /* Constrain content sections to the wider column, centered */
  .hoo-section, .hoo-hero, .hoo-single-event__body {
    max-width: var(--hoo-maxw); margin-left: auto; margin-right: auto;
  }
  /* Back link: align with the centred content column + its padding */
  .hoo-back { display: block; max-width: var(--hoo-maxw); margin: 1.5rem auto 0; padding: 0 2rem; }
  .hoo-section { padding: 2rem; }

  /* Hero — full-width image, larger type */
  .hoo-hero { padding: 0 2rem 2.5rem; }
  .hoo-hero-img { margin: 0 0 2rem; border-radius: var(--hoo-radius); overflow: hidden; }
  .hoo-hero-img img { max-height: 460px; border-radius: var(--hoo-radius); }
  .hoo-hero h1 { font-size: clamp(3.4rem, 6vw, 5rem); }
  .hoo-hero-tagline { font-size: 1.3rem; max-width: 34ch; }
  .hoo-hero .hoo-btn { display: inline-flex; width: auto; min-width: 220px; margin-right: 1rem; }

  /* Upcoming events → 2-up grid of cards */
  .hoo-section > h2 { font-size: 2.4rem; }
  .hoo-event-list, .hoo-front-events {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem;
  }
  .hoo-event-card { margin-bottom: 0; }

  /* Community cards: image beside text on wider screens */
  .hoo-community-card:not(.hoo-community-card--noimg) { grid-template-columns: 40% 1fr; }
  .hoo-community-card:not(.hoo-community-card--noimg) .hoo-community-card__img { display: flex; align-items: center; }
  .hoo-community-card:not(.hoo-community-card--noimg) .hoo-community-card__img img { max-height: 420px; object-fit: contain; }

  /* Archive rows can breathe a bit more */
  .hoo-event-row { grid-template-columns: 150px 1fr 24px; }
  .hoo-event-row--noimg { grid-template-columns: 1fr 24px; }
  .hoo-event-row__img img { width: 150px; height: 150px; }

  /* Find Us: map and details side by side */
  .hoo-find { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.6rem; align-items: start; }
  .hoo-find .hoo-eyebrow, .hoo-find > h1 { grid-column: 1 / -1; }
  .hoo-map { margin-bottom: 0; }
  .hoo-map iframe { height: 380px; }

  /* Booking form fills the content width on all screens */
  .hoo-book .hoo-form, .hoo-book > p, .hoo-book__done, .hoo-book__note { max-width: none; }

  /* View-all button shouldn't span full width */
  .hoo-section > .hoo-btn--ghost { display: flex; width: auto; min-width: 240px; max-width: 320px; margin: 2rem auto 0; }
}

/* ============================================================
   NAVIGATION FURNITURE — top nav only when wide AND landscape.
   Portrait (any width) keeps the burger + sticky bottom bar,
   even with the wide layout above.
   ============================================================ */
@media (min-width: 760px) and (orientation: landscape) {

  body { padding-bottom: 0; } /* no bottom bar needed */

  /* Show inline top nav, hide burger */
  .hoo-topnav { display: block; margin-left: auto; margin-right: 1.5rem; }
  .hoo-topnav__menu {
    list-style: none; display: flex; gap: 1.8rem; margin: 0; padding: 0;
  }
  .hoo-topnav__menu a {
    color: var(--hoo-cream); font-weight: 600; font-size: .95rem;
    letter-spacing: .04em; text-transform: uppercase; padding: .3rem 0; position: relative;
  }
  .hoo-topnav__menu a:hover { color: var(--hoo-gold); }
  .hoo-topnav__menu .current-menu-item a { color: var(--hoo-gold); }
  .hoo-topnav__menu .current-menu-item a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--hoo-gold);
  }
  .hoo-burger { display: none; }

  /* Hide the bottom tab bar in landscape */
  .hoo-tabbar { display: none; }
}

/* Larger landscape desktop — 3-up events */
@media (min-width: 1040px) and (orientation: landscape) {
  .hoo-front-events { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Floating bottom bar — only when it's actually floating
   (wide enough to not fill the screen) AND portrait.
   Rounds the corners to match the buttons and lifts it off
   the bottom edge. Phones keep the flush, full-width bar.
   =========================================================== */
@media (min-width: 620px) and (orientation: portrait) {
  .hoo-tabbar {
    bottom: 1rem;
    border-radius: var(--hoo-radius);
    border: 1px solid var(--hoo-green-600);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 20, 28, .45);
    padding-bottom: 0;
  }
  body { padding-bottom: calc(var(--hoo-footer-h) + 1.5rem); }
}