/* ============================================================
   Signal: PYC 2026 — Theme Styles
   ============================================================ */

/* Self-hosted heading font — Julius Black */
@font-face {
  font-family: 'Julius Black';
  src: url('../fonts/julius-black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --deep: #0B1D2C;
  --deep-mid: #132D42;
  --slate: #1E3A52;
  --accent: #C41E3A;
  --accent-light: #E8354F;
  --accent-dark: #A8192F;
  --accent-bg: rgba(196,30,58,0.08);
  --cream: #FAF8F4;
  --warm-white: #FDFCFA;
  --pyc-text: #1E293B;
  --pyc-text-mid: #475569;
  --pyc-text-light: #94A3B8;
  /* --display is set dynamically via wp_add_inline_style based on Font Settings */
  --display: Georgia, 'Times New Roman', serif;
  --body: 'Outfit', -apple-system, sans-serif;
}

html { font-size: 18px; scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--pyc-text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar { background: var(--warm-white); padding: 0; }
.container-fluid.nav-wrap { max-width: 1400px; margin: 0 auto; --bs-gutter-x: 0; }

.navbar-brand {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 0; margin: 0;
}
.logo-mark { height: 50px; width: auto; flex-shrink: 0; }
.logo-mark img { height: 100%; width: auto; display: block; }

.header-link {
  padding: 0.5rem 0.9rem; text-decoration: none;
  color: var(--pyc-text-mid); font-size: 0.85rem;
  font-weight: 450; border-radius: 8px; transition: all 0.2s;
}
.header-link, .header-link:link, .header-link:visited {
  color: var(--pyc-text-mid) !important;
}
.header-link:hover { color: var(--pyc-text) !important; background: rgba(0,0,0,0.03); }

.header-join {
  background: var(--accent); color: white !important;
  padding: 0.55rem 1.3rem; border-radius: 10px;
  text-decoration: none; font-size: 0.85rem;
  font-weight: 500; transition: all 0.2s;
}
.header-join:hover {
  background: var(--accent-dark); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(196,30,58,0.3);
}

/* Burger */
.navbar-toggler {
  border: none; padding: 0.4rem; border-radius: 10px;
  width: 44px; height: 44px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
  background-image: none; width: 22px; height: 16px;
  position: relative; display: block;
}
.navbar-toggler-icon span {
  display: block; width: 22px; height: 2px; background: var(--pyc-text);
  border-radius: 2px; position: absolute; left: 0;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.navbar-toggler-icon span:nth-child(1) { top: 0; }
.navbar-toggler-icon span:nth-child(2) { top: 7px; }
.navbar-toggler-icon span:nth-child(3) { top: 14px; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(2) { opacity: 0; transform: translateX(8px); }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Desktop nav */
.nav-desktop {
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex; justify-content: center; position: relative; padding: 0;
}
.nav-desktop .nav-link {
  padding: 0.75rem 1.1rem; color: var(--pyc-text-mid);
  font-size: 0.85rem; font-weight: 450; white-space: nowrap; transition: color 0.2s;
}
.nav-desktop .nav-link:hover, .nav-desktop .nav-link:focus { color: var(--accent); }
.nav-desktop .nav-link::after {
  vertical-align: 0.15em; border-top-width: 0.25em;
  border-right-width: 0.25em; border-left-width: 0.25em;
  opacity: 0.45; transition: transform 0.25s, opacity 0.25s;
}
.nav-desktop .nav-item.dropdown:hover > .nav-link::after,
.nav-desktop .show > .nav-link::after { transform: rotate(180deg); opacity: 0.8; }
.nav-desktop .dropdown-menu {
  min-width: 200px; border: 1px solid rgba(0,0,0,0.07);
  border-radius: 14px; padding: 0.5rem; margin-top: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.04);
  animation: ddFade 0.15s ease;
}
@keyframes ddFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.nav-desktop .dropdown-item {
  padding: 0.5rem 0.85rem; border-radius: 10px; font-size: 0.88rem;
  color: var(--pyc-text); transition: all 0.15s;
}
.nav-desktop .dropdown-item:hover, .nav-desktop .dropdown-item:focus {
  background: var(--accent-bg); color: var(--accent);
}
.nav-desktop .dropdown-divider { margin: 0.3rem 0.5rem; border-color: rgba(0,0,0,0.06); }
@media (min-width: 992px) { .nav-desktop .dropdown:hover > .dropdown-menu { display: block; } }

/* Offcanvas drawer */
.offcanvas-end { width: 340px; max-width: 85vw; border-left: none; box-shadow: -8px 0 40px rgba(0,0,0,0.12); }
@media (max-width: 575.98px) { .offcanvas-end { width: 100%; max-width: 100vw; } }
.offcanvas-header { border-bottom: 1px solid rgba(0,0,0,0.06); padding: 1rem 1.25rem; }
.offcanvas-title { font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--deep); }
.offcanvas-body { padding: 0.5rem 0; }
/* Hide WP Customizer/admin edit shortcuts globally — nuclear option */
.customize-partial-edit-shortcut,
.customize-partial-edit-shortcut-button,
[class*="customize-partial-edit-shortcut"],
li.customize-partial-edit-shortcut,
button.customize-partial-edit-shortcut-button {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}
/* Also kill any stray <li> elements injected into the drawer */
#mobileDrawer li[class*="customize"],
#drawerAccordion li,
#drawerAccordion ul {
  display: none !important;
}

/* ── Drawer items — unified styling ──────────────────────── */
.drawer-item {
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.drawer-item:last-child { border-bottom: none; }

.drawer-item-btn,
.drawer-item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9rem 1.25rem;
  background: none;
  border: none;
  text-decoration: none;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--pyc-text);
  cursor: pointer;
  transition: color 0.15s;
  text-align: left;
}
.drawer-item-btn:hover,
.drawer-item-link:hover { color: var(--accent); }

.drawer-chevron {
  opacity: 0.35;
  transition: transform 0.25s, opacity 0.25s;
  flex-shrink: 0;
}
.drawer-item-btn[aria-expanded="true"] .drawer-chevron {
  transform: rotate(180deg);
  opacity: 0.6;
}

/* Collapse body (sub-links) */
.accordion-collapse { border: none; }
.accordion-body { padding: 0 0 0.5rem; }
.drawer-sub-link {
  display: block;
  padding: 0.5rem 1.25rem 0.5rem 2rem;
  text-decoration: none;
  color: var(--pyc-text-mid);
  font-size: 0.88rem;
  transition: all 0.15s;
}
.drawer-sub-link:hover { color: var(--accent); background: var(--accent-bg); }

/* Pre-header links in drawer (below separator) */
.drawer-link {
  display: block; padding: 0.85rem 1.25rem; text-decoration: none;
  color: var(--pyc-text); font-size: 0.95rem; font-weight: 500; transition: color 0.2s;
}
.drawer-link:hover { color: var(--accent); }
.drawer-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(0,0,0,0.06); }
.drawer-footer-links { display: flex; gap: 1rem; justify-content: center; margin-top: 0.6rem; }
.drawer-footer-links a { font-size: 0.78rem; color: var(--pyc-text-light); text-decoration: none; transition: color 0.2s; }
.drawer-footer-links a:hover { color: var(--accent); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-pyc-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.85rem 1.8rem; font-size: 0.92rem;
  font-family: var(--body); font-weight: 500; border-radius: 12px;
  text-decoration: none !important; background: var(--accent); color: white !important;
  border: none; transition: all 0.25s ease; cursor: pointer;
}
.btn-pyc-primary:hover, .btn-pyc-primary:focus {
  background: var(--accent-dark); color: white !important; transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(196,30,58,0.35);
}
.btn-pyc-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.8rem; font-size: 0.92rem;
  font-family: var(--body); font-weight: 500; border-radius: 12px;
  text-decoration: none !important; background: rgba(255,255,255,0.08); color: white !important;
  border: 1px solid rgba(255,255,255,0.15); transition: all 0.25s ease;
}
.btn-pyc-ghost:hover, .btn-pyc-ghost:focus {
  background: rgba(255,255,255,0.14); color: white !important; border-color: rgba(255,255,255,0.3);
}
.btn-pyc-dark {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.8rem; font-size: 0.92rem;
  font-family: var(--body); font-weight: 500; border-radius: 12px;
  text-decoration: none !important; background: var(--deep); color: white !important;
  border: none; transition: all 0.25s ease;
}
.btn-pyc-dark:hover, .btn-pyc-dark:focus {
  background: var(--slate); color: white !important; transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(11,29,44,0.25);
}
.btn-pyc-outline {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.6rem; font-size: 0.88rem;
  font-family: var(--body); font-weight: 500; border-radius: 12px;
  text-decoration: none; background: transparent; color: var(--accent);
  border: 1.5px solid var(--accent); transition: all 0.25s ease;
}
.btn-pyc-outline:hover, .btn-pyc-outline:focus {
  background: var(--accent); color: white; transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(196,30,58,0.25);
}

/* ============================================================
   HERO
   ============================================================ */
.hero-section { padding: 1.5rem; }
@media (min-width: 992px) { .hero-section { padding: 3rem 3rem 0; } }
.hero-card {
  background: var(--deep); border-radius: 24px; overflow: hidden;
  min-height: 520px; position: relative;
}
.hero-left { position: relative; z-index: 2; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-light);
}
.hero-tag::before {
  content: ''; width: 8px; height: 8px; background: var(--accent);
  border-radius: 50%; animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.hero-card h1 {
  font-family: var(--display); font-size: 2.2rem;
  line-height: 1.12; color: white !important; font-weight: 500;
}
@media (min-width: 992px) { .hero-card h1 { font-size: 3.2rem; } }
.hero-card h1 span { font-style: italic; font-weight: 300; color: var(--accent-light); }
.hero-desc { font-size: 1.05rem; color: rgba(255,255,255,0.6) !important; max-width: 440px; line-height: 1.8; }

/* Hero art */
.hero-art-col {
  position: absolute; top: 0; right: 0; bottom: 0; width: 50%; overflow: hidden;
}
@media (max-width: 991.98px) { .hero-art-col { display: none; } }
.hero-art {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--deep-mid), var(--slate));
}
.hero-shape { position: absolute; border-radius: 50%; }
.hs1{width:500px;height:500px;background:radial-gradient(circle,rgba(196,30,58,.15),transparent 70%);top:-100px;right:-100px}
.hs2{width:300px;height:300px;background:radial-gradient(circle,rgba(196,30,58,.1),transparent 70%);bottom:-50px;left:-50px}
.hs3{width:200px;height:200px;border:1.5px solid rgba(255,255,255,.07);top:50%;left:30%;transform:translate(-50%,-50%)}
.hs4{width:120px;height:120px;border:1.5px solid rgba(196,30,58,.15);top:30%;left:50%}
.hero-horizon{position:absolute;top:55%;left:0;right:0;height:1px;background:rgba(255,255,255,.08)}
.sail{position:absolute;width:0;height:0;opacity:.15}
.sail-1{border-left:20px solid transparent;border-right:0;border-bottom:60px solid white;top:38%;left:25%;animation:bob 4s ease-in-out infinite}
.sail-2{border-left:15px solid transparent;border-right:0;border-bottom:45px solid var(--accent-light);top:40%;left:55%;animation:bob 5s ease-in-out infinite;animation-delay:-1.5s}
.sail-3{border-left:25px solid transparent;border-right:0;border-bottom:70px solid white;top:35%;left:72%;animation:bob 4.5s ease-in-out infinite;animation-delay:-3s;opacity:.1}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(2deg)}}
.water-ref{position:absolute;height:1px;background:rgba(255,255,255,.04);border-radius:50%}
.wr1{width:60%;left:20%;top:62%}.wr2{width:40%;left:10%;top:68%}.wr3{width:50%;left:30%;top:74%}.wr4{width:35%;left:15%;top:80%}

/* Hero image (replaces CSS art when a photo is set) */
img.hero-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  display: block;
}

/* ============================================================
   QUICK NAV CARDS
   ============================================================ */
.quick-card {
  background: var(--warm-white); border: 1px solid rgba(0,0,0,0.05);
  border-radius: 14px; padding: 1.2rem; text-decoration: none;
  color: var(--pyc-text); display: flex; align-items: center;
  gap: 0.85rem; transition: all 0.25s ease; height: 100%;
}
.quick-card:hover {
  border-color: var(--accent); color: var(--pyc-text);
  box-shadow: 0 4px 20px rgba(196,30,58,.08); transform: translateY(-2px);
}
.qc-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0; background: var(--accent-bg);
}
.qc-text { font-size: 0.88rem; font-weight: 500; line-height: 1.3; }
.qc-text small { display: block; font-weight: 400; font-size: .72rem; color: var(--pyc-text-light); margin-top: 2px; }

/* ============================================================
   SECTION TITLES
   ============================================================ */
.sec-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
}
.sec-title {
  font-family: var(--display); font-size: 2.2rem; font-weight: 500;
  color: var(--deep); line-height: 1.2;
}
.sec-link {
  text-decoration: none; color: var(--accent); font-size: 0.88rem;
  font-weight: 500; display: inline-flex; align-items: center;
  gap: 0.3rem; padding: 0.5rem 1rem; border-radius: 8px;
  transition: all 0.2s; white-space: nowrap;
}
.sec-link:hover { background: var(--accent-bg); color: var(--accent); }

/* ============================================================
   HERITAGE
   ============================================================ */
.heritage-card {
  background: var(--warm-white); border: 1px solid rgba(0,0,0,0.05);
  border-radius: 22px; overflow: hidden;
}
.heritage-visual {
  background: var(--deep); position: relative; min-height: 280px; overflow: hidden;
  background-size: cover; background-position: center;
}
@media (min-width: 768px) { .heritage-visual { min-height: 100%; } }
.heritage-visual::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(19,45,66,0.85), rgba(30,58,82,0.75));
  z-index: 0;
}
.heritage-visual::after {
  content: ''; position: absolute; width: 350px; height: 350px;
  border-radius: 50%; background: radial-gradient(circle, rgba(196,30,58,0.2), transparent 70%);
  bottom: -80px; right: -60px;
}
.heritage-visual-inner {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem;
}
.hv-year {
  font-family: var(--display); font-size: 5.5rem; font-weight: 300;
  color: white !important; line-height: 1; opacity: 0.85; letter-spacing: -0.02em;
}
.hv-year-label { font-size: 0.82rem; color: rgba(255,255,255,0.5) !important; }
.hv-lines {
  position: absolute; inset: 0; z-index: 0; opacity: 0.04;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 24px, white 24px, white 25px),
    repeating-linear-gradient(90deg, transparent, transparent 24px, white 24px, white 25px);
}
.heritage-content p { font-size: 0.95rem; color: var(--pyc-text-mid); line-height: 1.85; }
.h-stat strong {
  display: block; font-family: var(--display); font-size: 1.6rem;
  font-weight: 600; color: var(--deep); line-height: 1.2;
}
.h-stat strong span { color: var(--accent); font-weight: 400; }
.h-stat small { font-size: 0.75rem; color: var(--pyc-text-light); }

/* ============================================================
   BENTO CARDS
   ============================================================ */
.bento-card {
  background: var(--warm-white); border: 1px solid rgba(0,0,0,0.05);
  border-radius: 18px; padding: 2rem; text-decoration: none;
  color: var(--pyc-text); transition: all 0.3s ease;
  display: flex; flex-direction: column; position: relative;
  overflow: hidden; height: 100%;
}
.bento-card:hover {
  border-color: rgba(0,0,0,0.1); color: var(--pyc-text);
  transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}
.bento-card .b-icon { font-size: 1.6rem; }
.bento-card h3 { font-family: var(--display); font-size: 1.3rem; font-weight: 500; color: var(--deep); }
.bento-card p { font-size: 0.88rem; color: var(--pyc-text-mid); line-height: 1.7; flex: 1; }
.bento-card .b-link {
  font-size: 0.82rem; font-weight: 500; color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.35rem; transition: gap 0.2s;
}
.bento-card:hover .b-link { gap: 0.6rem; }
.bento-feature { background: var(--deep); border-color: transparent; }
.bento-feature h3 { color: white !important; }
.bento-feature p { color: rgba(255,255,255,0.65) !important; }
.bento-feature .b-link { color: var(--accent-light) !important; }
.bento-feature::after {
  content: ''; position: absolute; width: 200px; height: 200px;
  border-radius: 50%; background: radial-gradient(circle, rgba(196,30,58,0.2), transparent 70%);
  bottom: -60px; right: -40px;
}

/* ============================================================
   EVENTS
   ============================================================ */
.event-row {
  display: flex; align-items: center; gap: 1.25rem;
  background: var(--warm-white); border: 1px solid rgba(0,0,0,0.05);
  border-radius: 14px; padding: 1.1rem 1.4rem;
  text-decoration: none; color: var(--pyc-text); transition: all 0.25s;
}
.event-row:hover {
  border-color: var(--accent); color: var(--pyc-text);
  box-shadow: 0 4px 16px rgba(196,30,58,0.08);
}
.er-date { text-align: center; flex-shrink: 0; width: 52px; }
.er-date .d { font-family: var(--display); font-size: 1.6rem; font-weight: 600; color: var(--deep); line-height: 1; }
.er-date .m { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.er-info { flex: 1; min-width: 0; }
.er-info h3 { font-size: 1rem; font-weight: 500; margin: 0 0 0.15rem; }
.er-info .er-meta { font-size: 0.78rem; color: var(--pyc-text-light); }
.er-badge {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: 8px; flex-shrink: 0;
}
.eb-social{background:var(--accent-bg);color:var(--accent)}
.eb-sailing{background:rgba(30,58,82,.06);color:var(--slate)}
.eb-training{background:rgba(30,58,82,.06);color:var(--slate)}

/* ============================================================
   VISITOR BANNER
   ============================================================ */
.visitor-banner {
  background: linear-gradient(135deg, var(--deep), var(--slate));
  border-radius: 20px; padding: 2.5rem; color: white;
  position: relative; overflow: hidden;
}
@media (min-width: 992px) { .visitor-banner { padding: 3rem 3.5rem; } }
.visitor-banner::before {
  content: ''; position: absolute; width: 300px; height: 300px;
  border-radius: 50%; background: radial-gradient(circle, rgba(196,30,58,0.1), transparent 70%);
  top: -100px; right: 50px;
}
.visitor-banner h2 { font-family: var(--display); font-size: 1.6rem; font-weight: 500; color: white !important; }
.visitor-banner p { color: rgba(255,255,255,0.6) !important; font-size: 0.9rem; max-width: 380px; }
.v-chip {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 0.75rem 1.1rem; text-decoration: none;
  color: white !important; font-size: 0.85rem; transition: all 0.2s;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.v-chip:hover { background: rgba(255,255,255,0.14); color: white; border-color: rgba(255,255,255,0.25); }
.v-chip strong { font-weight: 500; }
.v-chip small { font-size: 0.7rem; color: rgba(255,255,255,0.5); }
@media (max-width: 575.98px) { .v-chip { flex: 1 1 100%; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--deep); color: rgba(255,255,255,0.5); }
.f-brand { font-family: var(--display); font-size: 1.2rem; font-weight: 500; color: white !important; }
.f-brand-p { font-size: 0.82rem; line-height: 1.7; max-width: 300px; }
.site-footer h4 {
  color: rgba(255,255,255,0.8) !important; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600;
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: 0.35rem; }
.site-footer a { color: rgba(255,255,255,0.45) !important; text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
.site-footer a:hover { color: var(--accent-light) !important; }

/* ============================================================
   WEATHER WIDGET
   ============================================================ */
.weather-float {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: var(--warm-white); border-radius: 16px;
  padding: 1rem 1.3rem; box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  display: flex; align-items: center; gap: 0.8rem;
  z-index: 50; border: 1px solid rgba(0,0,0,0.06);
  font-size: 0.85rem; text-decoration: none; color: var(--pyc-text);
  transition: transform 0.2s, box-shadow 0.2s;
}
.weather-float:hover { transform: translateY(-2px); color: var(--pyc-text); box-shadow: 0 8px 30px rgba(0,0,0,0.14); }
.weather-temp { font-family: var(--display); font-size: 1.4rem; color: var(--deep); font-weight: 600; }
.weather-detail { line-height: 1.3; }
.weather-detail strong { display: block; color: var(--deep); font-weight: 500; }
.weather-detail span { color: var(--pyc-text-light); font-size: 0.75rem; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero { background: var(--deep); position: relative; overflow: hidden; }
.page-hero::before {
  content: ''; position: absolute; width: 600px; height: 600px;
  border-radius: 50%; background: radial-gradient(circle, rgba(196,30,58,0.1), transparent 70%);
  top: -200px; right: -100px;
}
.page-hero::after {
  content: ''; position: absolute; width: 300px; height: 300px;
  border-radius: 50%; background: radial-gradient(circle, rgba(196,30,58,0.08), transparent 70%);
  bottom: -100px; left: 10%;
}
.page-hero .page-hero-inner { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; }
.page-hero h1 {
  font-family: var(--display); font-size: 2.4rem; font-weight: 500;
  color: white !important; line-height: 1.15;
}
@media (min-width: 992px) { .page-hero h1 { font-size: 3rem; } }
.page-hero .lead { color: rgba(255,255,255,0.55) !important; font-size: 1.05rem; max-width: 540px; }

/* Breadcrumb */
.breadcrumb-pyc { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.78rem; }
.breadcrumb-pyc li { display: flex; align-items: center; gap: 0.4rem; }
.breadcrumb-pyc a { color: rgba(255,255,255,0.4) !important; text-decoration: none; transition: color 0.2s; }
.breadcrumb-pyc a:hover { color: var(--accent-light) !important; }
.breadcrumb-pyc .sep { color: rgba(255,255,255,0.2) !important; }
.breadcrumb-pyc .current { color: rgba(255,255,255,0.7) !important; }

/* ============================================================
   CONTENT (rich text)
   ============================================================ */
.pyc-content h2 {
  font-family: var(--display); font-size: 1.7rem; font-weight: 500;
  color: var(--deep); line-height: 1.25; margin-top: 2.5rem;
}
.pyc-content h3 {
  font-family: var(--display); font-size: 1.25rem; font-weight: 500;
  color: var(--deep); line-height: 1.3; margin-top: 2rem;
}
.pyc-content p { color: var(--pyc-text-mid); font-size: 0.95rem; line-height: 1.9; }
.pyc-content ul, .pyc-content ol { color: var(--pyc-text-mid); font-size: 0.95rem; line-height: 1.9; padding-left: 1.5rem; }
.pyc-content li + li { margin-top: 0.3rem; }
.pyc-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.pyc-content a:hover { color: var(--accent-dark); }
.pyc-content img { border-radius: 16px; width: 100%; height: auto; }
.pyc-content figure { margin: 2rem 0; }
.pyc-content figcaption { font-size: 0.78rem; color: var(--pyc-text-light); margin-top: 0.6rem; text-align: center; }
.pyc-content blockquote {
  border-left: 3px solid var(--accent); padding: 1.25rem 1.5rem;
  margin: 2rem 0; background: var(--warm-white); border-radius: 0 14px 14px 0;
}
.pyc-content blockquote p {
  font-family: var(--display); font-size: 1.1rem;
  font-style: italic; color: var(--deep); line-height: 1.6; margin-bottom: 0.5rem;
}
.pyc-content blockquote cite { font-family: var(--body); font-style: normal; font-size: 0.78rem; color: var(--pyc-text-light); }
.pyc-content table,
.elementor-content-wrap table,
.elementor table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06);
  margin: 2rem 0; font-size: 0.88rem;
}
.pyc-content thead,
.elementor-content-wrap thead,
.elementor thead { background: var(--slate) !important; }
.pyc-content th,
.elementor-content-wrap th,
.elementor th { color: white !important; font-weight: 500; padding: 0.85rem 1.2rem; text-align: left; font-size: 0.82rem; background: transparent !important; }
.pyc-content td,
.elementor-content-wrap td,
.elementor td { padding: 0.85rem 1.2rem; color: var(--pyc-text-mid); border-top: 1px solid rgba(0,0,0,0.04); }
.pyc-content tbody tr,
.elementor-content-wrap tbody tr,
.elementor tbody tr { background: var(--warm-white); }
.pyc-content tbody tr:hover,
.elementor-content-wrap tbody tr:hover,
.elementor tbody tr:hover { background: rgba(196,30,58,0.03); }

/* Elementor full-width content wrapper */
.elementor-content-wrap {
  width: 100%;
  padding: 1.5rem 0 2rem;
}
@media (min-width: 992px) {
  .elementor-content-wrap {
    padding: 2rem 0 3rem;
  }
}

/* Sidebar cards */
.sidebar-card {
  background: var(--warm-white); border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px; padding: 1.5rem;
}
.sidebar-card h4 { font-family: var(--display); font-size: 1rem; font-weight: 500; color: var(--deep); }
.sidebar-card p, .sidebar-card li { font-size: 0.85rem; color: var(--pyc-text-mid); line-height: 1.7; }
.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sidebar-nav a {
  display: block; padding: 0.6rem 0.85rem; text-decoration: none;
  color: var(--pyc-text-mid); font-size: 0.88rem; border-radius: 10px; transition: all 0.15s;
}
.sidebar-nav a:hover { background: var(--accent-bg); color: var(--accent); }
.sidebar-nav .active a { background: var(--accent-bg); color: var(--accent); font-weight: 500; }

/* Info card */
.info-card {
  background: var(--warm-white); border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px; padding: 1.5rem;
}
.info-card h4 { font-family: var(--display); font-size: 1.05rem; font-weight: 500; color: var(--deep); margin-bottom: 0.75rem; }
.info-card p { font-size: 0.85rem; color: var(--pyc-text-mid); line-height: 1.7; }

/* Sidebar contact rows */
.sidebar-contact-item {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-size: 0.85rem; color: var(--pyc-text-mid);
}
.sidebar-contact-item .sc-icon {
  flex-shrink: 0; width: 28px; text-align: center; font-size: 0.95rem;
}
.sidebar-contact-item a { color: var(--accent); text-decoration: none; }
.sidebar-contact-item a:hover { text-decoration: underline; }

/* CTA card */
.cta-card {
  background: var(--deep); border-radius: 16px; padding: 1.5rem;
  color: white; position: relative; overflow: hidden;
}
.cta-card::after {
  content: ''; position: absolute; width: 160px; height: 160px;
  border-radius: 50%; background: radial-gradient(circle, rgba(196,30,58,0.2), transparent 70%);
  bottom: -50px; right: -30px;
}
.cta-card h4 { font-family: var(--display); font-size: 1.1rem; font-weight: 500; color: white !important; position: relative; z-index: 2; }
.cta-card p { font-size: 0.85rem; color: rgba(255,255,255,0.55) !important; line-height: 1.7; position: relative; z-index: 2; }

/* Content wrap */
.content-wrap { max-width: 1400px; margin: 0 auto; }



/* ============================================================
   FORMS — universal flat, full-width, theme-consistent
   Covers WPForms, Harbour Assist login, and any other forms
   ============================================================ */

/* ── Base form: transparent, full-width, no effects ────── */
.pyc-content form,
.entry-content form,
.page-content form {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--body) !important;
}

/* Force theme fonts on everything inside forms */
.pyc-content form *,
.entry-content form *,
.page-content form *,
.pyc-content form *::placeholder,
.entry-content form *::placeholder,
.page-content form *::placeholder {
  font-family: var(--body) !important;
}

/* Strip nested wrappers (WPForms containers, fieldsets, etc) */
.pyc-content form > div,
.pyc-content form > fieldset,
.pyc-content form > section,
.entry-content form > div,
.entry-content form > fieldset,
.entry-content form > section,
.page-content form > div,
.page-content form > fieldset,
.page-content form > section {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ── WPForms specific: kill their container card ───────── */
.pyc-content .wpforms-container,
.entry-content .wpforms-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pyc-content .wpforms-container .wpforms-form,
.entry-content .wpforms-container .wpforms-form {
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Headings inside forms ─────────────────────────────── */
.pyc-content form h2,
.entry-content form h2,
.page-content form h2 {
  font-family: var(--display) !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  color: var(--deep) !important;
  text-align: left !important;
  margin: 0 0 1.5rem !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  border: none !important;
  background: transparent !important;
}

/* ── Labels ────────────────────────────────────────────── */
.pyc-content form label,
.entry-content form label,
.page-content form label,
.pyc-content .wpforms-field-label,
.entry-content .wpforms-field-label {
  display: block !important;
  font-family: var(--body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--pyc-text) !important;
  margin-bottom: 0.4rem !important;
}
.pyc-content .wpforms-field-sublabel,
.entry-content .wpforms-field-sublabel {
  font-size: 0.75rem !important;
  color: var(--pyc-text-light) !important;
}

/* ── All text inputs — full-width, flat, boxed ─────────── */
.pyc-content form input[type="text"],
.pyc-content form input[type="email"],
.pyc-content form input[type="password"],
.pyc-content form input[type="tel"],
.pyc-content form input[type="url"],
.pyc-content form input[type="number"],
.pyc-content form input[type="search"],
.pyc-content form select,
.pyc-content form textarea,
.entry-content form input[type="text"],
.entry-content form input[type="email"],
.entry-content form input[type="password"],
.entry-content form input[type="tel"],
.entry-content form input[type="url"],
.entry-content form input[type="number"],
.entry-content form input[type="search"],
.entry-content form select,
.entry-content form textarea,
.page-content form input[type="text"],
.page-content form input[type="email"],
.page-content form input[type="password"],
.page-content form input[type="tel"],
.page-content form input[type="url"],
.page-content form input[type="number"],
.page-content form input[type="search"],
.page-content form select,
.page-content form textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0.6rem 0.75rem !important;
  font-family: var(--body) !important;
  font-size: 0.92rem !important;
  color: var(--pyc-text) !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 6px !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  margin-bottom: 0.25rem !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
}
.pyc-content form input:focus,
.pyc-content form select:focus,
.pyc-content form textarea:focus,
.entry-content form input:focus,
.entry-content form select:focus,
.entry-content form textarea:focus,
.page-content form input:focus,
.page-content form select:focus,
.page-content form textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
.pyc-content form input::placeholder,
.entry-content form input::placeholder,
.page-content form input::placeholder,
.pyc-content form textarea::placeholder,
.entry-content form textarea::placeholder {
  color: var(--pyc-text-light) !important;
}

/* ── WPForms field containers — full width ─────────────── */
.pyc-content .wpforms-field,
.entry-content .wpforms-field {
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* Force WPForms "medium" and "small" fields to be full width */
.pyc-content .wpforms-field-medium,
.pyc-content .wpforms-field-small,
.pyc-content .wpforms-field-large,
.entry-content .wpforms-field-medium,
.entry-content .wpforms-field-small,
.entry-content .wpforms-field-large {
  max-width: 100% !important;
  width: 100% !important;
}

/* ── Checkboxes & radios ───────────────────────────────── */
.pyc-content form input[type="checkbox"],
.entry-content form input[type="checkbox"],
.page-content form input[type="checkbox"] {
  display: inline-block !important;
  width: auto !important;
  accent-color: var(--accent) !important;
  margin-right: 0.4rem !important;
}
.pyc-content form input[type="radio"],
.entry-content form input[type="radio"],
.page-content form input[type="radio"] {
  display: inline-block !important;
  width: auto !important;
  accent-color: var(--accent) !important;
  margin-right: 0.4rem !important;
}

/* ── Submit buttons ────────────────────────────────────── */
.pyc-content form input[type="submit"],
.pyc-content form button[type="submit"],
.pyc-content form .wpforms-submit,
.entry-content form input[type="submit"],
.entry-content form button[type="submit"],
.entry-content form .wpforms-submit,
.page-content form input[type="submit"],
.page-content form button[type="submit"] {
  display: inline-block !important;
  width: auto !important;
  padding: 0.7rem 2rem !important;
  font-family: var(--body) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
  background: var(--accent) !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  margin-top: 0.5rem !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
}
.pyc-content form input[type="submit"]:hover,
.pyc-content form button[type="submit"]:hover,
.pyc-content form .wpforms-submit:hover,
.entry-content form input[type="submit"]:hover,
.entry-content form button[type="submit"]:hover,
.entry-content form .wpforms-submit:hover,
.page-content form input[type="submit"]:hover,
.page-content form button[type="submit"]:hover {
  background: var(--accent-dark) !important;
}

/* WPForms submit container — kill padding */
.pyc-content .wpforms-submit-container,
.entry-content .wpforms-submit-container {
  padding: 0 !important;
  margin-top: 1rem !important;
}

/* ── Helper text / paragraphs in forms ─────────────────── */
.pyc-content form p,
.entry-content form p,
.page-content form p {
  text-align: left !important;
  font-family: var(--body) !important;
  font-size: 0.85rem !important;
  color: var(--pyc-text-light) !important;
  line-height: 1.6 !important;
}
.pyc-content form p a,
.entry-content form p a,
.page-content form p a {
  color: var(--accent) !important;
  text-decoration: none !important;
}
.pyc-content form p a:hover,
.entry-content form p a:hover,
.page-content form p a:hover {
  text-decoration: underline !important;
}

/* ── Signatures (WPForms) ──────────────────────────────── */
.pyc-content .wpforms-signature-wrap,
.entry-content .wpforms-signature-wrap {
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* ── Errors / notices ──────────────────────────────────── */
.pyc-content form .error,
.pyc-content form .alert,
.pyc-content form .message,
.pyc-content form .wpforms-error,
.entry-content form .error,
.entry-content form .alert,
.entry-content form .message,
.entry-content form .wpforms-error {
  background: rgba(196,30,58,0.04) !important;
  color: var(--accent-dark) !important;
  border: none !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 !important;
  padding: 0.6rem 0.9rem !important;
  font-size: 0.82rem !important;
  margin-bottom: 1rem !important;
  box-shadow: none !important;
}

/* ── GDPR / consent text ───────────────────────────────── */
.pyc-content .wpforms-field-gdpr-checkbox label,
.entry-content .wpforms-field-gdpr-checkbox label {
  font-weight: 400 !important;
  font-size: 0.82rem !important;
  color: var(--pyc-text-mid) !important;
}

/* ============================================================
/* ============================================================
   PARENT PAGE TEMPLATE — child page listing
   ============================================================ */
.child-pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}
.child-page-card {
  background: var(--warm-white);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--pyc-text);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.child-page-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}
.child-page-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.child-page-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.child-page-body {
  padding: 1.25rem 1.25rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.child-page-body h3 {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--deep);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.child-page-body p {
  font-size: 0.85rem;
  color: var(--pyc-text-mid);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.child-page-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--accent);
  transition: color 0.15s;
}
.child-page-card:hover .child-page-link {
  color: var(--accent-dark);
}

/* Without thumbnails — compact list style */
.child-page-card:not(:has(.child-page-thumb)) {
  flex-direction: row;
  align-items: center;
}
.child-page-card:not(:has(.child-page-thumb)) .child-page-body {
  padding: 1rem 1.25rem;
}

/* ============================================================
   ELEMENTOR OUTPUT — inherit PYC theme styles on frontend
   ============================================================ */
.elementor-page .elementor-widget-text-editor,
.elementor-page .elementor-widget-text-editor p,
.elementor-page .elementor-widget-text-editor li {
  font-family: var(--body);
  color: var(--pyc-text);
  font-size: 0.95rem;
  line-height: 1.75;
}
.elementor-page .elementor-widget-heading .elementor-heading-title {
  color: var(--deep);
}
.elementor-page .elementor-widget-button .elementor-button {
  font-family: var(--body);
  background-color: var(--accent);
  border-radius: 8px;
  font-weight: 500;
  border: none;
  padding: 0.7rem 1.5rem;
  transition: background-color 0.2s;
}
.elementor-page .elementor-widget-button .elementor-button:hover {
  background-color: var(--accent-dark);
}
.elementor-page .elementor-widget-text-editor a {
  color: var(--accent);
}
.elementor-page .elementor-widget-text-editor a:hover {
  color: var(--accent-dark);
}
/* Elementor sections — match PYC max-width */
.elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1400px;
}

/* ============================================================
   PYC BOX STYLES — selectable from Elementor container dropdown
   ============================================================ */

/* White Card */
.pyc-box {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03) !important;
}

/* Cream Card */
.pyc-box-cream {
  background: var(--cream) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
}

/* Dark Navy Card */
.pyc-box-dark {
  background: var(--deep) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 2rem !important;
}
.pyc-box-dark,
.pyc-box-dark h1, .pyc-box-dark h2, .pyc-box-dark h3,
.pyc-box-dark h4, .pyc-box-dark h5, .pyc-box-dark h6 {
  color: white !important;
}
.pyc-box-dark p, .pyc-box-dark li, .pyc-box-dark span {
  color: rgba(255,255,255,0.65) !important;
}
.pyc-box-dark a:not(.btn-pyc-primary):not(.elementor-button) {
  color: var(--accent-light) !important;
}

/* Slate Blue Card */
.pyc-box-slate {
  background: var(--slate) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 2rem !important;
}
.pyc-box-slate,
.pyc-box-slate h1, .pyc-box-slate h2, .pyc-box-slate h3,
.pyc-box-slate h4, .pyc-box-slate h5, .pyc-box-slate h6 {
  color: white !important;
}
.pyc-box-slate p, .pyc-box-slate li, .pyc-box-slate span {
  color: rgba(255,255,255,0.6) !important;
}

/* Callout — left border accent */
.pyc-callout {
  background: var(--warm-white) !important;
  border: none !important;
  border-left: 4px solid var(--deep) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 1.5rem 2rem !important;
}

/* Callout Red */
.pyc-callout-red {
  background: rgba(196,30,58,0.04) !important;
  border: none !important;
  border-left: 4px solid var(--accent) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 1.5rem 2rem !important;
}

/* Highlight Panel */
.pyc-highlight {
  background: linear-gradient(135deg, rgba(196,30,58,0.06), rgba(196,30,58,0.02)) !important;
  border: 1px solid rgba(196,30,58,0.1) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
}

/* Well (inset) */
.pyc-well {
  background: rgba(0,0,0,0.02) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 12px !important;
  padding: 1.5rem 2rem !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.04) !important;
}