/*
 * PureKing Badminton Academy - Child Theme
 * US-style premium sports training website
 * Color Palette: Navy #0A1628 | Gold #E8A020 | White #FFFFFF | Gray #F4F6F9
 */

/* =============================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================= */
:root {
  --pk-navy:       #0A1628;
  --pk-navy-mid:   #132240;
  --pk-navy-light: #1E3560;
  --pk-gold:       #E8A020;
  --pk-gold-light: #F5B840;
  --pk-gold-dark:  #C07A10;
  --pk-red:        #D62828;
  --pk-white:      #FFFFFF;
  --pk-gray-light: #F4F6F9;
  --pk-gray:       #E2E6ED;
  --pk-gray-mid:   #8A97A8;
  --pk-text:       #1A2535;
  --pk-text-mid:   #4A5568;
  --pk-font-head:  'Montserrat', 'Raleway', sans-serif;
  --pk-font-body:  'Open Sans', sans-serif;
  --pk-font-hero:  'Bebas Neue', 'Montserrat', sans-serif;
  --pk-shadow:     0 4px 24px rgba(10,22,40,0.12);
  --pk-shadow-lg:  0 8px 48px rgba(10,22,40,0.20);
  --pk-radius:     8px;
  --pk-radius-lg:  16px;
  --pk-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================
   2. BASE TYPOGRAPHY
   ============================================= */
body,
.gva-body-page {
  font-family: var(--pk-font-body);
  font-size: 18px;
  line-height: 1.8;
  color: var(--pk-text);
  background-color: var(--pk-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--pk-font-head);
  font-weight: 800;
  line-height: 1.2;
  color: var(--pk-navy);
  letter-spacing: -0.02em;
  margin-bottom: 0.75em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; }

p {
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--pk-text-mid);
  margin-bottom: 1.4rem;
}

a {
  color: var(--pk-gold);
  text-decoration: none;
  transition: var(--pk-transition);
}

a:hover, a:focus {
  color: var(--pk-gold-dark);
  text-decoration: none;
  outline: none;
}

/* =============================================
   3. TOPBAR
   ============================================= */
.topbar {
  background: var(--pk-navy) !important;
  padding: 8px 0;
  border-bottom: 2px solid var(--pk-gold);
  font-size: 0.82rem;
}

.topbar .social-list a {
  color: var(--pk-gray-mid);
  font-size: 1rem;
  margin-right: 10px;
  transition: var(--pk-transition);
  display: inline-block;
}

.topbar .social-list a:hover {
  color: var(--pk-gold);
  transform: translateY(-2px);
}

.topbar .gva_topbar_menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  align-items: center;
}

.topbar .gva_topbar_menu li a {
  color: var(--pk-gray);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: var(--pk-transition);
}

.topbar .gva_topbar_menu li a:hover {
  color: var(--pk-gold);
  border-color: var(--pk-gold);
}

/* =============================================
   4. HEADER & NAVIGATION
   ============================================= */
#header {
  background: var(--pk-white);
  box-shadow: 0 2px 20px rgba(10,22,40,0.08);
  position: relative;
  z-index: 999;
}

.header-main {
  background: var(--pk-white);
  padding: 0;
}

.header-main.gv-sticky-menu {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 24px rgba(10,22,40,0.28);
  border-bottom: 2px solid var(--pk-gold);
  background: var(--pk-white) !important;
}

/* ── Drupal admin toolbar offsets ───────────────────────────────────────
   When the admin toolbar is fixed (logged-in editors/admins), offset the
   sticky nav so it doesn't slide under the 39px toolbar bar.
   toolbar-tray-open adds a second 40px tray → total 79px.
   !important is required: Gavias Waypoint.Sticky sets position:fixed + top:0
   via inline style; !important in stylesheet beats non-!important inline.
   z-index: 400 keeps the header below the admin toolbar (z-index 502)
   after Waypoint makes it position:fixed (which exits #header stacking ctx). */
body.toolbar-fixed .header-main.gv-sticky-menu {
  top: 39px !important;
}
body.toolbar-fixed.toolbar-tray-open .header-main.gv-sticky-menu {
  top: 79px !important;
}

/* Logo area */
.branding .site-logo img {
  max-height: 64px;
  width: auto;
}

/* Main navigation */
.main-menu {
  display: flex;
  align-items: center;
  height: 100%;
}

.gva-body-page nav ul.menu > li > a,
.gva-body-page nav ul.menu > li > span {
  font-family: var(--pk-font-head);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pk-navy);
  padding: 28px 16px;
  transition: var(--pk-transition);
  display: block;
  position: relative;
}

.gva-body-page nav ul.menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--pk-gold);
  border-radius: 3px 3px 0 0;
  transition: var(--pk-transition);
}

.gva-body-page nav ul.menu > li > a:hover::after,
.gva-body-page nav ul.menu > li.active > a::after,
.gva-body-page nav ul.menu > li.active-trail > a::after {
  width: 80%;
}

.gva-body-page nav ul.menu > li > a:hover,
.gva-body-page nav ul.menu > li.active > a {
  color: var(--pk-gold);
}

/* Dropdown */
.gva-body-page nav ul.menu li ul.dropdown-menu {
  background: var(--pk-white);
  border: none;
  border-top: 3px solid var(--pk-gold);
  box-shadow: var(--pk-shadow-lg);
  border-radius: 0 0 var(--pk-radius) var(--pk-radius);
  min-width: 240px;
  padding: 12px 0;
}

.gva-body-page nav ul.menu li ul.dropdown-menu li a {
  font-family: var(--pk-font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pk-text);
  padding: 10px 24px;
  transition: var(--pk-transition);
  display: block;
}

.gva-body-page nav ul.menu li ul.dropdown-menu li a:hover {
  color: var(--pk-gold);
  background: var(--pk-gray-light);
  padding-left: 32px;
}

/* Mobile menu button – color set in pk-nav-ham span below */

/* =============================================
   5. HERO / SLIDESHOW SECTION
   ============================================= */
.slideshow_content.area {
  position: relative;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SECTION
   Slider group 3: gridwidth=560 gridheight=420 (4:3 ratio, matches column)
═══════════════════════════════════════════════════════════════════════════ */
.pk-hero-section {
  background: linear-gradient(135deg, #0A1628 0%, #132240 55%, #1a2f56 100%);
  padding: 88px 0 72px;
  position: relative;
  overflow: hidden;
}

/* Diagonal accent stripe */
.pk-hero-stripe {
  position: absolute; top: 0; right: 0;
  width: 45%; height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(232,160,32,0.07) 100%);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
  pointer-events: none;
}
/* Subtle dot pattern overlay */
.pk-hero-stripe::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(232,160,32,0.12) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* Smooth bottom transition into stats strip */
.pk-hero-wave {
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 64px;
  background: #E8A020;           /* same colour as stats strip below */
  clip-path: polygon(0 100%, 100% 100%, 100% 20%, 0 100%);
  pointer-events: none;
}

/* Container stays above decorative layers */
.pk-hero-container { position: relative; z-index: 2; }

/* ── Two-column flex row ───────────────────────────────────── */
.pk-hero-row {
  display: flex;
  align-items: center;
  gap: 56px;
}

/* Left — text 45 % */
.pk-hero-text {
  flex: 0 0 45%;
  max-width: 45%;
}

/* Right — slider 55 % */
.pk-hero-slider-wrapper {
  flex: 0 0 55%;
  max-width: 55%;
  /* The Revolution Slider container sets its own height via inline style
     (gridheight=420px). We just round the corners and add depth. */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(232,160,32,0.18);
}

/* Slider containers — width 100%, keep their own height intact */
.pk-hero-slider-wrapper .gavias_sliderlayer,
.pk-hero-slider-wrapper .rev_slider_wrapper {
  width: 100% !important;
  /* Do NOT override height — Revolution Slider sets it via inline style */
  border-radius: 20px !important;
  overflow: hidden !important;
}
.pk-hero-slider-wrapper .rev_slider,
.pk-hero-slider-wrapper .tp-overflow-hidden {
  border-radius: 20px !important;
}

/* ── Hero text sub-elements ───────────────────────────────── */
.pk-hero-tagline-label {
  display: inline-block;
  color: #E8A020;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: rgba(232,160,32,.1);
  border: 1px solid rgba(232,160,32,.3);
  border-radius: 20px;
  padding: 5px 16px;
  margin-bottom: 20px;
}
.pk-hero-h1 {
  color: #fff;
  margin-bottom: 0;
  line-height: 1.12;
}
.pk-hero-desc {
  color: rgba(255, 255, 255, 0.72);
  margin: 22px 0 32px;
  max-width: 480px;
  line-height: 1.7;
}
.pk-hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pk-hero-checks {
  display: flex;
  gap: 20px;
  margin-top: 32px;
  align-items: center;
  flex-wrap: wrap;
}
.pk-hero-check-item {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ── Mobile ≤ 768 px ──────────────────────────────────────── */
@media (max-width: 768px) {
  .pk-hero-section  { padding: 72px 0 64px; }

  .pk-hero-row {
    flex-direction: column;
    gap: 36px;
  }
  .pk-hero-text {
    flex: 0 0 100%; max-width: 100%; order: 1;
  }
  .pk-hero-slider-wrapper {
    flex: 0 0 100%; max-width: 100%; width: 100%; order: 2;
    border-radius: 14px;
  }
  .pk-hero-desc   { max-width: 100%; }
  .pk-hero-checks { gap: 14px; }
}

/* ── Tablet 769 – 1024 px ─────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .pk-hero-row    { gap: 36px; }
  .pk-hero-text   { flex: 0 0 48%; max-width: 48%; }
  .pk-hero-slider-wrapper { flex: 0 0 52%; max-width: 52%; }
}

/* Generic hero sections built via block builder */
.gva-hero-section,
.pk-hero {
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--pk-navy) 0%, var(--pk-navy-mid) 60%, var(--pk-navy-light) 100%);
  position: relative;
  overflow: hidden;
}

.pk-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/hero-pattern.svg') center/cover no-repeat;
  opacity: 0.05;
}

.pk-hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.pk-hero-tagline {
  font-family: var(--pk-font-hero);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 400;
  color: var(--pk-white);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.3em;
}

.pk-hero-tagline span {
  color: var(--pk-gold);
  display: block;
}

.pk-hero-subtitle {
  font-size: 1.3rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.8;
  margin-bottom: 2rem;
  font-weight: 400;
}

/* =============================================
   6. BUTTONS & CTAs
   ============================================= */
.btn,
a.btn,
input[type="submit"],
button[type="submit"],
.gva-body-page .btn-primary,
.gva-body-page .gva-btn {
  font-family: var(--pk-font-head);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--pk-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--pk-transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.btn-primary,
.gva-body-page .btn-primary {
  background: var(--pk-gold);
  color: var(--pk-navy) !important;
  border-color: var(--pk-gold);
}

.btn-primary:hover,
.gva-body-page .btn-primary:hover {
  background: var(--pk-gold-dark);
  border-color: var(--pk-gold-dark);
  color: var(--pk-white) !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(232,160,32,0.4);
}

.btn-outline-primary,
.btn-secondary-pk {
  background: transparent;
  color: var(--pk-gold) !important;
  border-color: var(--pk-gold);
}

.btn-outline-primary:hover,
.btn-secondary-pk:hover {
  background: var(--pk-gold);
  color: var(--pk-navy) !important;
  transform: translateY(-3px);
}

.btn-white {
  background: var(--pk-white);
  color: var(--pk-navy) !important;
  border-color: var(--pk-white);
}

.btn-white:hover {
  background: transparent;
  color: var(--pk-white) !important;
  border-color: var(--pk-white);
}

/* =============================================
   7. SECTION STYLES
   ============================================= */
.area,
.fw-before-content,
.fw-after-content {
  position: relative;
}

/* Section padding utility */
.section-padding {
  padding: 100px 0;
}

.section-padding-sm {
  padding: 60px 0;
}

/* Section title block */
.pk-section-title {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 60px;
}

.pk-section-label {
  font-family: var(--pk-font-head);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pk-gold);
  margin-bottom: 14px;
  display: block;
}

.pk-section-title h2 {
  color: var(--pk-navy);
  margin-bottom: 16px;
}

.pk-section-title p {
  font-size: 1.2rem;
  color: var(--pk-text-mid);
  line-height: 1.8;
}

/* Dark section */
.section-dark,
.bg-dark-navy {
  background: var(--pk-navy) !important;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.bg-dark-navy h1,
.bg-dark-navy h2,
.bg-dark-navy h3 {
  color: var(--pk-white) !important;
}

.section-dark p,
.bg-dark-navy p {
  color: rgba(255,255,255,0.75);
}

/* Gray section */
.section-gray {
  background: var(--pk-gray-light);
}

/* Gold accent section */
.section-gold {
  background: var(--pk-gold);
}

.section-gold h2,
.section-gold p {
  color: var(--pk-navy) !important;
}

/* =============================================
   8. PROGRAM / COURSE CARDS
   ============================================= */
.pk-card,
.gva-body-page .node--type-course .node--view-mode-teaser {
  background: var(--pk-white);
  border-radius: var(--pk-radius-lg);
  overflow: hidden;
  box-shadow: var(--pk-shadow);
  transition: var(--pk-transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pk-card:hover,
.gva-body-page .node--type-course .node--view-mode-teaser:hover {
  transform: translateY(-8px);
  box-shadow: var(--pk-shadow-lg);
}

.pk-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.pk-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--pk-transition);
}

.pk-card:hover .pk-card-image img {
  transform: scale(1.06);
}

.pk-card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--pk-gold);
  color: var(--pk-navy);
  font-family: var(--pk-font-head);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
}

.pk-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pk-card-category {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pk-gold);
  margin-bottom: 8px;
}

.pk-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--pk-navy);
  margin-bottom: 12px;
  line-height: 1.3;
}

.pk-card-text {
  font-size: 1rem;
  color: var(--pk-text-mid);
  line-height: 1.8;
  flex: 1;
}

.pk-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--pk-gray);
  font-size: 0.82rem;
  color: var(--pk-gray-mid);
}

.pk-card-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* =============================================
   9. TRAINING PROGRAMS SECTION
   ============================================= */
.pk-program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 48px;
}

.pk-program-item {
  background: var(--pk-white);
  border-radius: var(--pk-radius-lg);
  padding: 40px 32px;
  text-align: center;
  border: 2px solid var(--pk-gray);
  transition: var(--pk-transition);
  position: relative;
  overflow: hidden;
}

.pk-program-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--pk-gold);
  transform: scaleX(0);
  transition: var(--pk-transition);
  transform-origin: left;
}

.pk-program-item:hover {
  border-color: var(--pk-gold);
  box-shadow: var(--pk-shadow);
  transform: translateY(-4px);
}

.pk-program-item:hover::before {
  transform: scaleX(1);
}

.pk-program-icon {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, var(--pk-gold), var(--pk-gold-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 1.75rem;
  color: var(--pk-navy);
}

.pk-program-item h3 {
  font-size: 1.3rem;
  color: var(--pk-navy);
  margin-bottom: 12px;
}

.pk-program-item p {
  font-size: 0.9rem;
  color: var(--pk-text-mid);
  margin-bottom: 24px;
}

.pk-program-levels {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pk-level-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--pk-gray-light);
  color: var(--pk-text-mid);
}

.pk-level-badge.beginner { background: #e8f5e9; color: #2e7d32; }
.pk-level-badge.intermediate { background: #fff8e1; color: #f57f17; }
.pk-level-badge.advanced { background: #fce4ec; color: #c62828; }
.pk-level-badge.elite { background: #e3f2fd; color: #1565c0; }

/* =============================================
   10. STATS / ACHIEVEMENT COUNTER
   ============================================= */
.pk-stats-section {
  background: linear-gradient(135deg, var(--pk-navy) 0%, var(--pk-navy-light) 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.pk-stats-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: rgba(232,160,32,0.06);
  border-radius: 50%;
}

.pk-stat-item {
  text-align: center;
  padding: 24px;
  position: relative;
}

.pk-stat-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255,255,255,0.1);
}

.pk-stat-item:last-child::after { display: none; }

.pk-stat-number {
  font-family: var(--pk-font-hero);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--pk-gold);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.pk-stat-label {
  font-family: var(--pk-font-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

/* =============================================
   11. COACHES / INSTRUCTORS SECTION
   ============================================= */
.pk-coach-card {
  background: var(--pk-white);
  border-radius: var(--pk-radius-lg);
  overflow: hidden;
  box-shadow: var(--pk-shadow);
  transition: var(--pk-transition);
  text-align: center;
}

.pk-coach-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--pk-shadow-lg);
}

.pk-coach-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}

.pk-coach-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--pk-transition);
}

.pk-coach-card:hover .pk-coach-image img {
  transform: scale(1.05);
}

.pk-coach-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(10,22,40,0.85));
  padding: 32px 24px 16px;
  transform: translateY(100%);
  transition: var(--pk-transition);
}

.pk-coach-card:hover .pk-coach-overlay {
  transform: translateY(0);
}

.pk-coach-social a {
  color: var(--pk-white);
  font-size: 1rem;
  margin: 0 6px;
  transition: var(--pk-transition);
}

.pk-coach-social a:hover { color: var(--pk-gold); }

.pk-coach-body {
  padding: 24px;
}

.pk-coach-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--pk-navy);
  margin-bottom: 4px;
}

.pk-coach-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pk-gold);
  margin-bottom: 12px;
}

.pk-coach-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.pk-specialty-tag {
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--pk-gray-light);
  color: var(--pk-text-mid);
  padding: 3px 10px;
  border-radius: 12px;
}

/* =============================================
   12. TESTIMONIALS
   ============================================= */
.pk-testimonials {
  background: var(--pk-gray-light);
  padding: 100px 0;
}

.pk-testimonial-card {
  background: var(--pk-white);
  border-radius: var(--pk-radius-lg);
  padding: 40px;
  box-shadow: var(--pk-shadow);
  position: relative;
  height: 100%;
}

.pk-testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 24px;
  left: 32px;
  font-family: Georgia, serif;
  font-size: 6rem;
  line-height: 1;
  color: var(--pk-gold);
  opacity: 0.25;
}

.pk-testimonial-rating {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}

.pk-testimonial-rating .star {
  color: var(--pk-gold);
  font-size: 1rem;
}

.pk-testimonial-text {
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--pk-text-mid);
  margin-bottom: 28px;
  font-style: italic;
}

.pk-testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pk-testimonial-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--pk-gold);
  flex-shrink: 0;
}

.pk-testimonial-info .name {
  font-family: var(--pk-font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--pk-navy);
  margin-bottom: 2px;
}

.pk-testimonial-info .role {
  font-size: 0.78rem;
  color: var(--pk-gray-mid);
  font-weight: 500;
}

/* =============================================
   13. SCHEDULE / TIMETABLE
   ============================================= */
.pk-schedule-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--pk-radius-lg);
  overflow: hidden;
  box-shadow: var(--pk-shadow);
}

.pk-schedule-table thead tr {
  background: var(--pk-navy);
  color: var(--pk-white);
}

.pk-schedule-table thead th {
  font-family: var(--pk-font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 18px 16px;
  text-align: center;
  color: var(--pk-white);
}

.pk-schedule-table tbody tr:nth-child(even) {
  background: var(--pk-gray-light);
}

.pk-schedule-table tbody tr:hover {
  background: rgba(232,160,32,0.08);
}

.pk-schedule-table td {
  padding: 14px 16px;
  text-align: center;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--pk-gray);
}

.pk-schedule-class {
  background: var(--pk-gold);
  color: var(--pk-navy);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-block;
  white-space: nowrap;
}

.pk-schedule-class.advanced { background: var(--pk-navy); color: var(--pk-white); }
.pk-schedule-class.beginner { background: #e8f5e9; color: #2e7d32; }

/* =============================================
   14. FACILITIES SECTION
   ============================================= */
.pk-facility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.pk-facility-item {
  border-radius: var(--pk-radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  cursor: pointer;
}

.pk-facility-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--pk-transition);
}

.pk-facility-item:hover img {
  transform: scale(1.08);
}

.pk-facility-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 24px 20px;
  background: linear-gradient(transparent, rgba(10,22,40,0.85));
  color: var(--pk-white);
}

.pk-facility-caption h4 {
  color: var(--pk-white);
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.pk-facility-caption p {
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  margin: 0;
}

/* =============================================
   15. REGISTRATION / CTA SECTION
   ============================================= */
.pk-cta-section {
  background: linear-gradient(135deg, var(--pk-navy) 0%, var(--pk-navy-light) 100%);
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.pk-cta-section::before,
.pk-cta-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(232,160,32,0.05);
}

.pk-cta-section::before {
  width: 600px;
  height: 600px;
  top: -200px;
  left: -200px;
}

.pk-cta-section::after {
  width: 400px;
  height: 400px;
  bottom: -150px;
  right: -100px;
}

.pk-cta-section h2 {
  color: var(--pk-white);
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.pk-cta-section h2 span {
  color: var(--pk-gold);
}

.pk-cta-section p {
  color: rgba(255,255,255,0.8);
  font-size: 1.1rem;
  margin-bottom: 40px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

.pk-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* =============================================
   16. BREADCRUMB
   ============================================= */
.breadcrumbs {
  background: var(--pk-navy);
  padding: 0;
  /* Neutralise parent theme's #f8f8f8 background on breadcrumb-content-inner */
}

/* Neutralise parent theme's gray background & bottom margin on breadcrumb wrapper */
.breadcrumb-content-inner {
  background: var(--pk-navy) !important;
}

.breadcrumbs nav[aria-label="Breadcrumb"],
.breadcrumbs .block-system-breadcrumb-block {
  background: linear-gradient(90deg, var(--pk-navy) 0%, var(--pk-navy-light) 100%);
  padding: 60px 0 48px;
  border-bottom: 3px solid var(--pk-gold);
}

.breadcrumbs .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumbs .breadcrumb li,
.breadcrumbs .breadcrumb a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}

.breadcrumbs .breadcrumb a:hover { color: var(--pk-gold); }

.breadcrumbs h1,
.breadcrumbs .page-title h1 {
  color: var(--pk-white);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 0;
}

/* =============================================
   17. FOOTER
   ============================================= */
#footer {
  background: var(--pk-navy) !important;
  color: rgba(255,255,255,0.75);
}

.footer-inner {
  background: var(--pk-navy);
}

.footer-center {
  padding: 80px 0 48px;
}

#footer h3,
#footer h4,
#footer .footer-title {
  font-family: var(--pk-font-head);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pk-white);
  margin-bottom: 24px;
  padding-bottom: 12px;
  position: relative;
}

#footer h3::after,
#footer h4::after,
#footer .footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 3px;
  background: var(--pk-gold);
  border-radius: 2px;
}

#footer p {
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  line-height: 1.8;
}

#footer a {
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  transition: var(--pk-transition);
  display: block;
  padding: 5px 0;
}

#footer a:hover {
  color: var(--pk-gold);
  padding-left: 6px;
}

#footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer ul li {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
}

#footer span,
#footer strong,
#footer div {
  color: inherit;
}

#footer .social-icons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

#footer .social-icons a {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--pk-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  padding: 0;
  transition: var(--pk-transition);
}

#footer .social-icons a:hover {
  background: var(--pk-gold);
  color: var(--pk-navy);
  padding: 0;
  transform: translateY(-3px);
}

/* Contact info in footer */
#footer .contact-info li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

#footer .contact-info li i,
#footer .contact-info li .icon {
  color: var(--pk-gold);
  width: 16px;
  flex-shrink: 0;
  margin-top: 3px;
}

#footer .contact-info li a {
  display: inline;
  padding: 0;
}

/* Newsletter in footer */
#footer .newsletter-form {
  display: flex;
  gap: 0;
  margin-top: 16px;
}

#footer .newsletter-form input[type="email"] {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-right: none;
  border-radius: var(--pk-radius) 0 0 var(--pk-radius);
  color: var(--pk-white);
  font-size: 0.9rem;
}

#footer .newsletter-form input[type="email"]::placeholder {
  color: rgba(255,255,255,0.4);
}

#footer .newsletter-form button {
  padding: 12px 20px;
  background: var(--pk-gold);
  color: var(--pk-navy);
  border: none;
  border-radius: 0 var(--pk-radius) var(--pk-radius) 0;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
  transition: var(--pk-transition);
  white-space: nowrap;
}

#footer .newsletter-form button:hover {
  background: var(--pk-gold-dark);
}

/* Copyright bar */
.copyright {
  background: rgba(0,0,0,0.25) !important;
  padding: 14px 0 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* SEO keyword strip — one scrollable row */
.pk-seo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 10px;
  font-size: .75rem;
  line-height: 1.4;
}
.pk-seo-strip a {
  color: rgba(255,255,255,0.28);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.pk-seo-strip a:hover { color: rgba(232,160,32,0.7); }
.pk-seo-strip span { color: rgba(255,255,255,0.15); }

/* Copyright bottom row */
.copyright-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.pk-copy-text {
  color: rgba(255,255,255,0.45);
  font-size: .82rem;
  white-space: nowrap;
}
.pk-copy-text a { color: #E8A020; text-decoration: none; }
.pk-copy-legal {
  font-size: .78rem;
  white-space: nowrap;
}
.pk-copy-legal a {
  color: rgba(255,255,255,0.32);
  text-decoration: none;
  transition: color .2s;
}
.pk-copy-legal a:hover { color: rgba(255,255,255,0.65); }

.copyright p,
.copyright .copyright-inner {
  color: rgba(255,255,255,0.45);
  font-size: 0.82rem;
  margin: 0;
}

.copyright a {
  color: var(--pk-gold);
}

/* =============================================
   18. ABOUT / FEATURE BLOCKS
   ============================================= */
.pk-feature-block {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
}

.pk-feature-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--pk-gold), var(--pk-gold-light));
  border-radius: var(--pk-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--pk-navy);
  flex-shrink: 0;
}

.pk-feature-text h4 {
  font-size: 1.05rem;
  color: var(--pk-navy);
  margin-bottom: 8px;
}

.pk-feature-text p {
  font-size: 0.9rem;
  color: var(--pk-text-mid);
  margin: 0;
  line-height: 1.7;
}

/* =============================================
   19. BADMINTON-SPECIFIC SECTIONS
   ============================================= */

/* Why Badminton Section */
.pk-why-badminton {
  background: var(--pk-white);
  padding: 100px 0;
}

.pk-health-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.pk-benefit-card {
  background: var(--pk-gray-light);
  border-radius: var(--pk-radius-lg);
  padding: 32px 24px;
  text-align: center;
  transition: var(--pk-transition);
  border: 2px solid transparent;
}

.pk-benefit-card:hover {
  border-color: var(--pk-gold);
  background: var(--pk-white);
  box-shadow: var(--pk-shadow);
  transform: translateY(-4px);
}

.pk-benefit-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
  display: block;
  line-height: 1;
}

.pk-benefit-card h4 {
  font-size: 1rem;
  color: var(--pk-navy);
  margin-bottom: 8px;
}

.pk-benefit-card p {
  font-size: 1rem;
  color: var(--pk-text-mid);
  margin: 0;
  line-height: 1.7;
}

/* Training Philosophy */
.pk-philosophy {
  background: var(--pk-navy);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.pk-philosophy::before {
  content: '';
  position: absolute;
  right: -5%;
  top: -10%;
  width: 45%;
  height: 120%;
  background: url('../images/shuttlecock-bg.svg') center/contain no-repeat;
  opacity: 0.04;
}

.pk-philosophy h2 {
  color: var(--pk-white);
}

.pk-philosophy p {
  color: rgba(255,255,255,0.75);
  font-size: 1.05rem;
}

.pk-philosophy-pillars {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}

.pk-pillar {
  padding: 32px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--pk-radius-lg);
  text-align: center;
  transition: var(--pk-transition);
}

.pk-pillar:hover {
  border-color: var(--pk-gold);
  background: rgba(232,160,32,0.05);
}

.pk-pillar .number {
  font-family: var(--pk-font-hero);
  font-size: 3.5rem;
  color: var(--pk-gold);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}

.pk-pillar h4 {
  color: var(--pk-white);
  font-size: 1rem;
  margin-bottom: 8px;
}

.pk-pillar p {
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
  margin: 0;
}

/* =============================================
   20. CONTENT PAGES - NODE
   ============================================= */
.main-page {
  min-height: 60vh;
}

/* node--type-page uses block builder — full width needed.
   node--type-article (blog) keeps the readable 840px line length. */
.node--type-article .node__content {
  max-width: 840px;
  margin: 0 auto;
}

/* Block-builder pages: remove the 840px constraint so gbb-row
   background bands (navy, gold, etc.) span the full viewport. */
.node--type-page .node__content {
  max-width: none;
  margin: 0;
}

/* But keep the 840px readable width for plain body text
   inside block-builder page nodes (non-blockbuilder fields). */
.node--type-page .node__content .field--type-text-long,
.node--type-page .node__content .field--type-text-with-summary {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.node__content h2,
.field--type-text-long h2 {
  font-size: 1.6rem;
  margin-top: 48px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--pk-gray);
  position: relative;
}

.node__content h2::after,
.field--type-text-long h2::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--pk-gold);
}

.node__content ul,
.field--type-text-long ul {
  padding-left: 1.5rem;
}

.node__content ul li,
.field--type-text-long ul li {
  margin-bottom: 10px;
  line-height: 1.7;
  color: var(--pk-text-mid);
}

/* Blockquote style */
blockquote,
.field--type-text-long blockquote {
  border-left: 4px solid var(--pk-gold);
  margin: 32px 0;
  padding: 20px 32px;
  background: var(--pk-gray-light);
  border-radius: 0 var(--pk-radius) var(--pk-radius) 0;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--pk-navy);
}

/* =============================================
   21. WEBFORM / CONTACT FORM
   ============================================= */
.webform-submission-form,
.contact-message-form {
  max-width: 680px;
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 80px;
}

.webform-submission-form .form-item,
.contact-message-form .form-item {
  margin-bottom: 24px;
}

.webform-submission-form label,
.contact-message-form label {
  font-family: var(--pk-font-head);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pk-navy);
  margin-bottom: 8px;
  display: block;
}

.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="tel"],
.webform-submission-form textarea,
.webform-submission-form select,
.contact-message-form input[type="text"],
.contact-message-form input[type="email"],
.contact-message-form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--pk-gray);
  border-radius: var(--pk-radius);
  font-size: 0.95rem;
  font-family: var(--pk-font-body);
  color: var(--pk-text);
  background: var(--pk-white);
  transition: var(--pk-transition);
}

.webform-submission-form input:focus,
.webform-submission-form textarea:focus,
.contact-message-form input:focus,
.contact-message-form textarea:focus {
  border-color: var(--pk-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(232,160,32,0.15);
}

.webform-submission-form .form-submit,
.contact-message-form .form-submit {
  background: var(--pk-gold);
  color: var(--pk-navy);
  border: none;
  padding: 16px 40px;
  font-family: var(--pk-font-head);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--pk-radius);
  cursor: pointer;
  transition: var(--pk-transition);
}

.webform-submission-form .form-submit:hover,
.contact-message-form .form-submit:hover {
  background: var(--pk-navy);
  color: var(--pk-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(10,22,40,0.25);
}

/* =============================================
   22. SEARCH REGION
   ============================================= */
.gva-search-region {
  position: relative;
}

.gva-search-region .icon {
  cursor: pointer;
  color: var(--pk-navy);
  font-size: 1.1rem;
  padding: 8px;
  transition: var(--pk-transition);
}

.gva-search-region .icon:hover {
  color: var(--pk-gold);
}

.gva-search-region .search-content {
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--pk-white);
  padding: 16px;
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow-lg);
  min-width: 280px;
  border-top: 3px solid var(--pk-gold);
}

/* =============================================
   23. PRELOADER
   ============================================= */
#preloader-status {
  background: var(--pk-navy);
}

#preloader-status .loader {
  border-top-color: var(--pk-gold);
}

/* =============================================
   24. UTILITY CLASSES
   ============================================= */
.text-gold { color: var(--pk-gold) !important; }
.text-navy { color: var(--pk-navy) !important; }
.text-white { color: var(--pk-white) !important; }
.bg-gold    { background: var(--pk-gold) !important; }
.bg-navy    { background: var(--pk-navy) !important; }

.divider-gold {
  width: 60px;
  height: 4px;
  background: var(--pk-gold);
  border-radius: 2px;
  margin: 0 auto 32px;
}

.divider-gold.left { margin-left: 0; }

.pk-label {
  display: inline-block;
  font-family: var(--pk-font-head);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pk-gold);
  margin-bottom: 12px;
}

/* =============================================
   25. RESPONSIVE DESIGN
   ============================================= */
@media (max-width: 991px) {
  .pk-hero { min-height: 70vh; }
  .pk-stats-section { padding: 60px 0; }
  .pk-stat-item::after { display: none; }
  .section-padding { padding: 70px 0; }
  .footer-center { padding: 56px 0 32px; }

  .gva-body-page nav ul.menu > li > a,
  .gva-body-page nav ul.menu > li > span {
    padding: 16px 20px;
  }
}

@media (max-width: 767px) {
  :root {
    font-size: 15px;
  }

  .pk-hero {
    min-height: 60vh;
    padding: 80px 0 60px;
  }

  .pk-hero-tagline { font-size: clamp(2.5rem, 10vw, 4rem); }

  .section-padding { padding: 56px 0; }

  .pk-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .topbar { display: none; }

  .pk-program-grid,
  .pk-health-benefits,
  .pk-philosophy-pillars {
    grid-template-columns: 1fr;
  }

  .pk-testimonial-card { padding: 28px 24px; }

  #footer .footer-center { padding: 48px 0 24px; }

  .copyright-inner {
    justify-content: center;
    text-align: center;
  }
  .pk-copy-text,
  .pk-copy-legal { white-space: normal; text-align: center; }
}

@media (max-width: 480px) {
  .pk-program-grid { gap: 16px; }
  .pk-program-item { padding: 28px 20px; }
}

/* =============================================
   26. ANIMATIONS & SCROLL REVEAL
   ============================================= */
[data-aos] {
  transition-property: transform, opacity;
}

.pk-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.pk-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.pk-stagger-item:nth-child(1) { transition-delay: 0.1s; }
.pk-stagger-item:nth-child(2) { transition-delay: 0.2s; }
.pk-stagger-item:nth-child(3) { transition-delay: 0.3s; }
.pk-stagger-item:nth-child(4) { transition-delay: 0.4s; }

/* =============================================
   27. BLOCK BUILDER OVERRIDES (gva_blockbuilder)
   ============================================= */
.gva-block-content {
  position: relative;
}

/* Make gva elements look sport-branded */
.gva_element_counter .counter-number,
.gva_element_counter .number {
  font-family: var(--pk-font-hero) !important;
  color: var(--pk-gold) !important;
}

.gva_element_heading .title {
  font-family: var(--pk-font-head) !important;
  color: var(--pk-navy) !important;
}

.gva_element_heading .subtitle {
  font-family: var(--pk-font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pk-gold) !important;
}

.gva_element_button .btn-primary {
  background: var(--pk-gold) !important;
  color: var(--pk-navy) !important;
  border-color: var(--pk-gold) !important;
  font-family: var(--pk-font-head) !important;
  font-weight: 800 !important;
}

.gva_element_button .btn-primary:hover {
  background: var(--pk-navy) !important;
  color: var(--pk-white) !important;
  border-color: var(--pk-navy) !important;
}

/* =============================================
   28. VIEWS OVERRIDES
   ============================================= */
.view-courses .views-row,
.view-testimonials .views-row,
.view-instructors .views-row {
  margin-bottom: 28px;
}

/* Pager */
.pager__items {
  display: flex;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 40px 0 0;
  margin: 0;
}

.pager__item a,
.pager__item.is-active span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--pk-radius);
  border: 2px solid var(--pk-gray);
  font-family: var(--pk-font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--pk-text-mid);
  transition: var(--pk-transition);
}

.pager__item a:hover {
  border-color: var(--pk-gold);
  color: var(--pk-gold);
}

.pager__item.is-active span {
  background: var(--pk-gold);
  border-color: var(--pk-gold);
  color: var(--pk-navy);
}

/* =============================================
   29. MESSAGES / ALERTS
   ============================================= */
.messages--status {
  background: #e8f5e9;
  border-left: 4px solid #2e7d32;
  border-radius: var(--pk-radius);
  color: #1b5e20;
}

.messages--warning {
  background: #fff8e1;
  border-left: 4px solid var(--pk-gold);
  border-radius: var(--pk-radius);
  color: #e65100;
}

.messages--error {
  background: #ffebee;
  border-left: 4px solid var(--pk-red);
  border-radius: var(--pk-radius);
  color: #b71c1c;
}

/* =============================================
   30. OFFCANVAS MENU (MOBILE)
   ============================================= */
.gva-offcanvas-mobile {
  transition: var(--pk-transition);
}

@media (max-width: 991px) {
  .gva-offcanvas-mobile.open {
    background: var(--pk-navy);
    padding: 24px;
  }

  .gva-offcanvas-mobile.open nav ul.menu > li > a {
    color: var(--pk-white);
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.95rem;
  }

  .gva-offcanvas-mobile.open nav ul.menu > li > a:hover {
    color: var(--pk-gold);
  }

  .close-offcanvas {
    color: var(--pk-white) !important;
    font-size: 1.2rem;
    text-align: right;
    margin-bottom: 16px;
    cursor: pointer;
  }
}

/* =============================================
   31. FRONT PAGE TYPOGRAPHY UTILITY CLASSES
   Use these instead of inline font styles so
   sizes stay responsive and easy to adjust.
   ============================================= */

/* Small uppercase category label (gold) */
.pk-label {
  font-family: var(--pk-font-head) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}

/* Hero H1 */
.pk-hero-h1 {
  font-family: var(--pk-font-head) !important;
  font-size: clamp(2.4rem, 6vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 1rem !important;
}

/* Section H2 */
.pk-h2 {
  font-family: var(--pk-font-head) !important;
  font-size: clamp(1.7rem, 3.5vw, 2.6rem) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 1.2rem !important;
}

/* Card / subsection H3 */
.pk-h3 {
  font-family: var(--pk-font-head) !important;
  font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 0.75rem !important;
}

/* Feature / sidebar H4 */
.pk-h4 {
  font-family: var(--pk-font-head) !important;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0 0 0.5rem !important;
}

/* Stat counter number */
.pk-stat-num {
  font-family: var(--pk-font-head) !important;
  font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}

/* Large lead paragraph */
.pk-body-lg {
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  line-height: 1.9 !important;
}

/* Standard body paragraph */
.pk-body {
  font-size: clamp(0.9rem, 1.2vw, 1rem) !important;
  line-height: 1.85 !important;
}

/* Small supporting text */
.pk-body-sm {
  font-size: clamp(0.8rem, 1vw, 0.88rem) !important;
  line-height: 1.7 !important;
}

/* Tiny uppercase meta (schedule labels, tags) */
.pk-meta {
  font-family: var(--pk-font-head) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* CTA button — gold */
.pk-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pk-gold);
  color: var(--pk-navy) !important;
  text-decoration: none;
  font-family: var(--pk-font-head) !important;
  font-size: clamp(0.82rem, 1.1vw, 0.92rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  padding: 15px 32px;
  border-radius: var(--pk-radius);
  border: 2px solid var(--pk-gold);
  transition: var(--pk-transition);
}
.pk-btn-gold:hover {
  background: var(--pk-gold-dark);
  border-color: var(--pk-gold-dark);
  color: var(--pk-navy) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(232,160,32,0.40);
}

/* CTA button — outline on dark bg */
.pk-btn-outline-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none;
  font-family: var(--pk-font-head) !important;
  font-size: clamp(0.82rem, 1.1vw, 0.92rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  padding: 15px 32px;
  border-radius: var(--pk-radius);
  border: 2px solid rgba(255,255,255,0.3);
  transition: var(--pk-transition);
}
.pk-btn-outline-light:hover {
  border-color: var(--pk-gold);
  color: var(--pk-gold) !important;
  transform: translateY(-3px);
}

/* CTA button — outline gold on light bg */
.pk-btn-outline-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--pk-gold) !important;
  text-decoration: none;
  font-family: var(--pk-font-head) !important;
  font-size: clamp(0.82rem, 1.1vw, 0.92rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  padding: 15px 32px;
  border-radius: var(--pk-radius);
  border: 2px solid var(--pk-gold);
  transition: var(--pk-transition);
}
.pk-btn-outline-gold:hover {
  background: var(--pk-gold);
  color: var(--pk-navy) !important;
  transform: translateY(-3px);
}

/* CTA button — dark on gold bg */
.pk-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pk-navy);
  color: var(--pk-gold) !important;
  text-decoration: none;
  font-family: var(--pk-font-head) !important;
  font-size: clamp(0.82rem, 1.1vw, 0.92rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  padding: 15px 32px;
  border-radius: var(--pk-radius);
  border: 2px solid var(--pk-navy);
  transition: var(--pk-transition);
}
.pk-btn-dark:hover {
  background: transparent;
  color: var(--pk-navy) !important;
}

/* Make all pk-btn-* full-width when inside enroll column */
.pk-enroll-col .pk-btn-gold,
.pk-enroll-col .pk-btn-outline-light,
.pk-enroll-col .pk-btn-dark {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

/* Check-list item */
.pk-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.pk-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: clamp(0.82rem, 1vw, 0.92rem);
  color: var(--pk-text-mid);
  line-height: 1.5;
}
.pk-checklist li::before {
  content: '\f058'; /* fa-check-circle */
  font-family: FontAwesome;
  color: var(--pk-gold);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Schedule time block */
.pk-schedule-block {
  background: var(--pk-gray-light);
  border-radius: var(--pk-radius);
  padding: 12px 16px;
  margin-bottom: 10px;
}
.pk-schedule-block .day {
  font-family: var(--pk-font-head);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pk-navy);
  margin-bottom: 2px;
}
.pk-schedule-block .time {
  font-size: 0.88rem;
  color: var(--pk-text-mid);
}
.pk-schedule-block .venue {
  font-size: 0.75rem;
  color: var(--pk-gray-mid);
  margin-top: 2px;
}

/* Semester status badge */
.pk-sem-badge {
  font-family: var(--pk-font-head);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Responsive adjustments ── */
@media (max-width: 768px) {
  .pk-hero-h1 { letter-spacing: -0.015em !important; }
  .pk-h2      { letter-spacing: -0.01em !important; }
  .pk-checklist { grid-template-columns: 1fr !important; }
}

/* =============================================
   32. GVA BLOCK BUILDER — PUREKING SKIN
   Styles the standard GVA elements to match
   the PureKing navy/gold design system.
   These only apply inside .pk-bb-fullwidth.
   ============================================= */

/* Full-width block builder wrapper */
.pk-bb-fullwidth {
  overflow-x: hidden;
}
.pk-bb-content > .gavias-blockbuilder-content {
  margin: 0;
  padding: 0;
}

/* ── Admin "Config block builder" link — hidden ──
   The module renders one link per block-builder section.
   Parent theme positions it absolute which causes visual overlap.
   Admin can edit block builder directly from /admin.
   ================================================= */
.link-edit-blockbuider {
  display: none !important;
}

/* ── GBB ROW — strip default margins ── */
.pk-bb-fullwidth .gbb-row {
  margin: 0 !important;
}
.pk-bb-fullwidth .gbb-row .gbb-row-inner {
  margin: 0 !important;
}
.pk-bb-fullwidth .gbb-row .gbb-row-inner > [class*="col-"] {
  padding-top: 0;
  padding-bottom: 0;
}

/* ── gsc_heading — Section headings ── */
.pk-bb-fullwidth .widget.gsc-heading {
  margin-bottom: 32px;
}
.pk-bb-fullwidth .widget.gsc-heading .title {
  font-family: var(--pk-font-head) !important;
  font-size: clamp(1.7rem, 3.5vw, 2.5rem) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 12px !important;
}
.pk-bb-fullwidth .widget.gsc-heading.text-light .title {
  color: var(--pk-white) !important;
}
.pk-bb-fullwidth .widget.gsc-heading.text-dark .title {
  color: var(--pk-navy) !important;
}
.pk-bb-fullwidth .widget.gsc-heading .sub-title {
  font-family: var(--pk-font-head) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--pk-gold) !important;
  margin-bottom: 12px !important;
}
.pk-bb-fullwidth .widget.gsc-heading .desc p {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem) !important;
  line-height: 1.85 !important;
  color: var(--pk-text-mid) !important;
}
.pk-bb-fullwidth .widget.gsc-heading.text-light .desc p {
  color: rgba(255,255,255,0.78) !important;
}
.pk-bb-fullwidth .widget.gsc-heading .heading-line span {
  background: var(--pk-gold) !important;
}

/* ── gsc_counter — Stats numbers ── */
.pk-bb-fullwidth .gsc-counter {
  text-align: center;
  padding: 20px 12px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.pk-bb-fullwidth .gsc-counter .number {
  font-family: var(--pk-font-head) !important;
  font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
  font-weight: 900 !important;
  color: var(--pk-gold) !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
}
.pk-bb-fullwidth .gsc-counter .title {
  font-family: var(--pk-font-head) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.6) !important;
}
.pk-bb-fullwidth .gsc-counter .icon i {
  color: var(--pk-gold) !important;
  font-size: 2rem !important;
  margin-bottom: 10px;
}

/* ── gsc_icon_box — Course & feature cards ── */
.pk-bb-fullwidth .gsc-icon-box {
  background: var(--pk-white);
  border-radius: var(--pk-radius-lg);
  padding: 28px 24px 24px !important;
  box-shadow: var(--pk-shadow);
  height: 100%;
  transition: var(--pk-transition);
  border: 2px solid var(--pk-gray);
}
.pk-bb-fullwidth .gsc-icon-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--pk-shadow-lg);
  border-color: var(--pk-gold);
}
.pk-bb-fullwidth .gsc-icon-box .icon-main i {
  color: var(--pk-gold) !important;
  font-size: 2.4rem !important;
  margin-bottom: 16px;
}
.pk-bb-fullwidth .gsc-icon-box .title a,
.pk-bb-fullwidth .gsc-icon-box .title {
  font-family: var(--pk-font-head) !important;
  font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
  font-weight: 800 !important;
  color: var(--pk-navy) !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
}
.pk-bb-fullwidth .gsc-icon-box .desc {
  font-size: clamp(0.85rem, 1vw, 0.95rem) !important;
  line-height: 1.8 !important;
  color: var(--pk-text-mid) !important;
}
.pk-bb-fullwidth .gsc-icon-box .desc a {
  color: var(--pk-gold) !important;
  font-weight: 700;
}

/* ── gsc_box_text — Text boxes ── */
.pk-bb-fullwidth .gsc-box-text .title {
  font-family: var(--pk-font-head) !important;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem) !important;
  font-weight: 800 !important;
  color: var(--pk-white) !important;
  margin-bottom: 8px !important;
}
.pk-bb-fullwidth .gsc-box-text .box-content p {
  font-size: clamp(0.85rem, 1vw, 0.95rem) !important;
  line-height: 1.8 !important;
}

/* Hero label inside box-text */
.pk-bb-fullwidth .pk-hero-label .box-content .pk-label {
  color: var(--pk-gold) !important;
}

/* Hero heading override */
.pk-bb-fullwidth .pk-hero-heading .widget.gsc-heading .title {
  font-size: clamp(2.4rem, 6vw, 5rem) !important;
  font-weight: 900 !important;
  color: var(--pk-white) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.06 !important;
}
.pk-bb-fullwidth .pk-hero-heading .widget.gsc-heading .desc p {
  font-size: clamp(1rem, 1.5vw, 1.15rem) !important;
  color: rgba(255,255,255,0.82) !important;
  max-width: 580px;
}

/* Method pillars */
.pk-bb-fullwidth .pk-method-pillar {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--pk-radius-lg);
  margin-bottom: 16px !important;
}
.pk-bb-fullwidth .pk-method-pillar .gsc-box-text {
  padding: 20px 22px !important;
}

/* Trust bar */
.pk-bb-fullwidth .pk-trust-wrap .gsc-box-text {
  border-top: 4px solid var(--pk-gold);
  border-bottom: 2px solid var(--pk-gray);
  padding: 18px 0 !important;
  background: var(--pk-white) !important;
}
.pk-bb-fullwidth .pk-trust-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 10px;
}
.pk-trust-sep {
  width: 1px;
  height: 24px;
  background: var(--pk-gray);
  display: inline-block;
}

/* Private coaching banner buttons */
.pk-bb-fullwidth .pk-private-btns .gsc-box-text {
  text-align: right;
}

/* ── gsc_video_box — YouTube embed ── */
.pk-bb-fullwidth .pk-video .gsc-video-box {
  border-radius: var(--pk-radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--pk-shadow-lg);
}

/* ── gsc_testimonial_single ── */
.pk-bb-fullwidth .pk-testimonial .gsc-testimonial {
  background: var(--pk-white);
  border-radius: var(--pk-radius-lg);
  padding: 32px 28px !important;
  box-shadow: var(--pk-shadow);
  height: 100%;
}
.pk-bb-fullwidth .gsc-testimonial .testimonial-content {
  font-family: var(--pk-font-body) !important;
  font-size: clamp(0.88rem, 1.1vw, 0.97rem) !important;
  font-style: italic !important;
  line-height: 1.85 !important;
  color: var(--pk-text-mid) !important;
}
.pk-bb-fullwidth .gsc-testimonial .name {
  font-family: var(--pk-font-head) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  color: var(--pk-navy) !important;
}
.pk-bb-fullwidth .gsc-testimonial .job {
  font-size: 0.82rem !important;
  color: var(--pk-gray-mid) !important;
}
.pk-bb-fullwidth .gsc-testimonial .star i {
  color: var(--pk-gold) !important;
}

/* ── gsc_call_to_action ── */
.pk-bb-fullwidth .pk-cta .gsc-call-to-action .title {
  font-family: var(--pk-font-head) !important;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 900 !important;
}
.pk-bb-fullwidth .pk-cta .gsc-call-to-action.text-light .title {
  color: var(--pk-white) !important;
}
.pk-bb-fullwidth .pk-cta .gsc-call-to-action .btn {
  background: var(--pk-gold) !important;
  color: var(--pk-navy) !important;
  font-family: var(--pk-font-head) !important;
  font-weight: 800 !important;
  border-radius: var(--pk-radius) !important;
  border: 2px solid var(--pk-gold) !important;
}
.pk-bb-fullwidth .pk-cta .gsc-call-to-action .btn:hover {
  background: var(--pk-gold-dark) !important;
  border-color: var(--pk-gold-dark) !important;
}

/* ── About section left-column heading ── */
.pk-bb-fullwidth .pk-about-heading .widget.gsc-heading .title {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem) !important;
  text-align: left !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .pk-bb-fullwidth .gsc-counter {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 24px;
  }
  .pk-bb-fullwidth .gsc-icon-box {
    margin-bottom: 20px;
  }
  .pk-bb-fullwidth .pk-private-btns .gsc-box-text {
    text-align: center;
  }
  .pk-trust-bar { justify-content: center; }
  .pk-trust-sep { display: none; }
}

/* =============================================
   33. INNER-PAGE BREADCRUMB BANNER
   The blue image is overridden in pureking.theme via
   pureking_preprocess_block__system_breadcrumb_block().
   These styles handle layout & typography only.
   ============================================= */

/* Outer wrapper */
.breadcrumb-content-inner {
  margin-bottom: 0;
  position: relative;
}

/* Gold accent line at bottom of banner */
.pk-breadcrumb-gold-line {
  height: 3px;
  background: var(--pk-gold);
  width: 100%;
}

/* Page title — white on navy */
.breadcrumb-content-inner .page-title {
  font-family: var(--pk-font-head) !important;
  font-size: clamp(1.4rem, 3vw, 2.2rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 8px !important;
}

/* Breadcrumb nav links */
.breadcrumb-content-inner .breadcrumb-links li,
.breadcrumb-content-inner nav.breadcrumb ol > li,
.breadcrumb-content-inner nav.breadcrumb ol > li a {
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.85rem !important;
}
.breadcrumb-content-inner nav.breadcrumb ol > li a:hover {
  color: var(--pk-gold) !important;
}

/* ── Inner page node title heading (non-breadcrumb pages) ── */
/* Override Gavias blue skin accent colors in gsc-heading */
.widget.gsc-heading.style-default .heading-line {
  background: var(--pk-gold) !important;
}
.widget.gsc-heading.style-default .title strong {
  color: var(--pk-gold) !important;
}
.widget.gsc-heading.style-default .sub-title {
  color: var(--pk-gold) !important;
}
.widget.gsc-heading.style-default.align-center .title-icon {
  color: var(--pk-gold) !important;
}

/* ── Optimized spacing for American UX preferences ──
   Reduce excessive gaps between block builder sections
   for smoother, more professional flow.
   ============================================= */

/* Main block builder rows - reduce from 100px to 48px for tighter flow */
.gbb-row {
  position: relative;
}

.gbb-row[style*="padding-top:100px"] {
  padding-top: 48px !important;
}

.gbb-row[style*="padding-bottom:100px"] {
  padding-bottom: 48px !important;
}

.gbb-row[style*="padding-top:80px"] {
  padding-top: 40px !important;
}

.gbb-row[style*="padding-bottom:80px"] {
  padding-bottom: 40px !important;
}

.gbb-row[style*="padding-top:60px"] {
  padding-top: 32px !important;
}

.gbb-row[style*="padding-bottom:60px"] {
  padding-bottom: 32px !important;
}

/* Mobile optimizations for program pages */
@media (max-width: 768px) {
  .pk_youth_elite .gbb-row[style*="padding-top:100px"],
  .pk_seasonal_camps .gbb-row[style*="padding-top:100px"],
  .pk_adult_training .gbb-row[style*="padding-top:100px"],
  .pk_private_coaching .gbb-row[style*="padding-top:100px"] {
    padding-top: 32px !important;
  }

  .pk_youth_elite .gbb-row[style*="padding-bottom:100px"],
  .pk_seasonal_camps .gbb-row[style*="padding-bottom:100px"],
  .pk_adult_training .gbb-row[style*="padding-bottom:100px"],
  .pk_private_coaching .gbb-row[style*="padding-bottom:100px"] {
    padding-bottom: 32px !important;
  }

  .gbb-row[style*="padding-top:100px"] {
    padding-top: 24px !important;
  }

  .gbb-row[style*="padding-bottom:100px"] {
    padding-bottom: 24px !important;
  }

  .gbb-row[style*="padding-top:80px"] {
    padding-top: 20px !important;
  }

  .gbb-row[style*="padding-bottom:80px"] {
    padding-bottom: 20px !important;
  }
}

/* Smooth transitions for better user experience */
.gbb-row {
  transition: all 0.3s ease-out;
}

/* Better spacing for icon boxes and features */
.widget.gsc-icon-box {
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .widget.gsc-icon-box {
    margin-bottom: 16px;
  }
}

/* Performance and smooth scrolling optimizations */
html {
  scroll-behavior: smooth;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  .gbb-row {
    transition: none;
  }
}

/* Better image loading and performance */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Better touch targets for mobile */
@media (max-width: 768px) {
  .widget.gsc-icon-box .box-icon {
    min-height: 44px;
    min-width: 44px;
  }
  
  .gva-button {
    min-height: 44px;
    padding: 12px 20px;
  }
}

/* ── Inner page "boxed card" overlay fix ─────────────────────────
   Parent theme (template.css:333) applies margin-top:-140px to
   .container-bg on has-breadcrumb pages, designed for the original
   160px bottom padding on .breadcrumb-style.
   PureKing's compact breadcrumb uses only 44px bottom padding,
   so the -140px overlap pushes the white content box deep into the
   breadcrumb banner, hiding the page title and nav links.
   Fix: reset margin-top to 0 so content flows naturally below the
   banner, and remove the rounded-corner card effect that looks
   out-of-place on a full-width navy breadcrumb.
   ============================================= */
body .body-page .main-page.has-breadcrumb .container-bg {
  margin-top: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-top: 0 !important;
}

/* Also cancel the parent's margin-bottom:45px on .breadcrumb-style
   which adds unnecessary gap between banner and content. */
.breadcrumb-content-inner .gva-breadcrumb-content .gva-block-breadcrumb .breadcrumb-style {
  margin-bottom: 0 !important;
}

/* =============================================
   LOGO
   ============================================= */
.site-branding-logo img,
.branding a img {
  height: 70px;   /* desktop: 70px tall → ~245px wide (3.5:1 ratio) */
  width: auto;
  display: block;
  max-width: 100%;
}
/* tablet */
@media (max-width: 991px) {
  .site-branding-logo img,
  .branding a img {
    height: 56px;
  }

}
/* mobile */
@media (max-width: 767px) {
  .site-branding-logo img,
  .branding a img {
    height: 46px;
  }
}

/* =============================================
   EVENTS — copied from gavias_edmix/css/template.css
   Blue (#4582FF) replaced with PureKing gold (#E8A020)
   ============================================= */

.event-block {
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.09);
  margin: 5px;
}
.event-block .event-image {
  position: relative;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}
.event-block .event-image .date {
  position: absolute;
  top: 15px;
  right: 10px;
  overflow: hidden;
  padding: 5px 10px;
  background: #fff;
  box-shadow: 0px 4px 26px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.event-block .event-image .date .day {
  font-size: 30px;
  text-transform: uppercase;
  color: #E8A020;
  display: block;
  font-weight: 700;
  border-radius: 6px;
  line-height: 1;
}
.event-block .event-image .date .month {
  font-size: 12px;
  font-weight: 700;
  color: #000;
  display: block;
  text-transform: uppercase;
}
.event-block .event-image .date .icon {
  margin-right: 5px;
}
.event-block .event-content {
  background: #fff;
  padding: 15px 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 0;
}
.event-block .event-content .event-info .title {
  font-size: 18px;
  line-height: 24px;
  font-family: "Montserrat", sans-serif;
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
}
.event-block .event-content .event-info .address {
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  color: #E8A020;
}
.event-block .event-content .event-info .address i {
  margin-right: 5px;
}
.event-block .event-content .event-info .body {
  margin-top: 10px;
  line-height: 28px;
}

.event-block-2 {
  padding-bottom: 50px;
  margin-bottom: 50px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.event-block-2:before, .event-block-2:after {
  content: " ";
  display: table;
}
.event-block-2:after {
  clear: both;
}
.event-block-2 .content-inner {
  padding-left: 350px;
  position: relative;
  z-index: 9;
}
@media (max-width: 1199px) {
  .event-block-2 .content-inner { padding-left: 310px; }
}
@media (max-width: 991px) {
  .event-block-2 .content-inner { padding-left: 320px; }
}
@media (max-width: 650px) {
  .event-block-2 .content-inner { padding-left: 0; }
}
.event-block-2 .content-inner .event-content-inner {
  position: relative;
}
.event-block-2 .content-inner .event-content-inner .event-content {
  padding-left: 100px;
}
@media (max-width: 991px) {
  .event-block-2 .content-inner .event-content-inner .event-content { padding-left: 0; }
}
.event-block-2 .event-image {
  width: 320px;
  float: left;
  position: relative;
  z-index: 1;
}
@media (max-width: 991px) {
  .event-block-2 .event-image { width: 300px; }
}
@media (max-width: 650px) {
  .event-block-2 .event-image { width: 100%; margin-bottom: 15px; }
}
.event-block-2 .event-image .event-date {
  box-shadow: 0px 4px 26px 3px rgba(0, 0, 0, 0.1);
  width: 120px;
  height: 120px;
  float: left;
  text-align: center;
  line-height: 1.1;
  padding-top: 15px;
  position: absolute;
  background: #fff;
  top: 50%;
  right: -60px;
  margin-top: -60px;
}
@media (max-width: 991px) {
  .event-block-2 .event-image .event-date {
    top: 10px;
    right: 10px;
    margin-top: 0;
    padding-top: 10px;
    width: 90px;
    height: 90px;
  }
}
.event-block-2 .event-image .event-date .date {
  font-size: 55px;
  font-weight: 700;
  color: #E8A020;
  display: block;
}
@media (max-width: 991px) {
  .event-block-2 .event-image .event-date .date { font-size: 45px; }
}
.event-block-2 .event-image .event-date .month {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  color: #000;
}
.event-block-2 .event-meta {
  font-size: 15px;
  margin-top: 5px;
}
.event-block-2 .event-line {
  width: 50px;
  height: 2px;
  background: #E8A020;
  margin: 15px 0 15px;
}
@media (max-width: 991px) {
  .event-block-2 .post-title { margin-top: 0; font-size: 18px; }
}

.events-list .view-content-wrap .item:last-child .event-block-2 {
  margin-bottom: 0;
  padding-bottom: 0;
  border: none;
}

.event-block-list .event-date {
  width: 110px;
  height: auto;
  float: left;
  background: #E8A020;
  color: #fff;
  padding: 12px 10px;
}
.event-block-list .event-date span {
  display: block;
}
.event-block-list .event-date span.day {
  font-size: 30px;
  font-family: "Montserrat", sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  line-height: 1;
  margin-bottom: 3px;
  padding-bottom: 3px;
}
.event-block-list .event-title a {
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  display: inline-block;
  line-height: 24px;
}
.event-block-list .event-address {
  font-size: 14px;
}
.event-block-list .event-address i {
  font-size: 16px;
  color: #E8A020;
}
.event-block-list .event-content {
  padding-left: 125px;
}

.event-full {
  margin-bottom: 30px;
}
.event-full .event-info {
  background: #f5f5f5;
  padding: 20px;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
}
.event-full .event-info .date > *, .event-full .event-info .address > * {
  float: left;
}
.event-full .event-info .date i, .event-full .event-info .address i {
  margin-right: 10px;
  margin-top: 6px;
}


/* =============================================
   BLOG / POST — copied & adapted from gavias_edmix
   #4582FF → #E8A020 (gold)  |  Raleway → Montserrat
   ============================================= */

/* --- Core post-block card --- */
.post-block {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(10,22,40,0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.post-block:hover {
  box-shadow: 0 6px 28px rgba(10,22,40,0.16);
  transform: translateY(-3px);
}
.post-block .post-image {
  overflow: hidden;
  position: relative;
}
.post-block .post-image a {
  position: relative;
  display: block;
}
.post-block .post-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease;
  border-radius: 0;
}
.post-block:hover .post-image img {
  transform: scale(1.04);
}
.post-block .post-image .post-categories {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #E8A020;
  color: #fff;
  padding: 3px 10px;
  border-radius: 5px;
  z-index: 2;
}
.post-block .post-image .post-categories a {
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.5px;
}
.post-block .post-title {
  margin: 10px 0;
}
.post-block .post-title a {
  display: block;
  line-height: 1.4;
  font-weight: 700;
  font-size: 17px;
  font-family: "Montserrat", sans-serif;
  color: #0A1628;
  text-transform: none;
  word-wrap: break-word;
  transition: color 0.2s;
}
.post-block .post-title a:hover,
.post-block .post-title a:active {
  color: #E8A020;
}
.post-block .post-content {
  padding: 14px 18px 18px;
}
.post-block .post-content:before,
.post-block .post-content:after { content: " "; display: table; }
.post-block .post-content:after { clear: both; }
.post-block .post-meta {
  font-size: 12px;
  font-weight: 400;
  color: #8A97A8;
  padding: 4px 0;
}
.post-block .post-meta:before,
.post-block .post-meta:after { content: " "; display: table; }
.post-block .post-meta:after { clear: both; }
.post-block .post-meta a:hover { text-decoration: underline; }
.post-block .post-meta .post-categories { margin-bottom: 0; }
.post-block .post-created { text-transform: none; }
.post-block .post-description { margin-top: 10px; color: #4A5568; font-size: 0.9rem; line-height: 1.7; }
.post-block .post-comment { text-transform: none; }
.post-block .content-after { padding: 10px 0 0; }

/* dark background variant */
.style-dark .post-block { background: transparent; }
.style-dark .post-block .post-title a { color: #fff; }
.style-dark .post-block .post-title a:hover { color: #E8A020; }

/* --- Layout: horizontal --- */
.post-style-horizontal .post-block:before,
.post-style-horizontal .post-block:after { content: " "; display: table; }
.post-style-horizontal .post-block:after { clear: both; }
@media (max-width: 480px) {
  .post-style-horizontal .post-block .row > div { width: 100% !important; }
}
.post-style-horizontal .post-block .post-content { padding-top: 10px; padding-right: 20px; }

/* --- Layout: grid --- */
.post-style-grid .post-block { margin: 10px 0; background: #fff; text-align: left; }
.post-style-grid .post-block .post-categories { margin: 0; }
.post-style-grid .post-block .post-content { background: #fff; position: relative; border-top: 0; padding-top: 15px; }
.post-style-grid .post-block .post-meta { padding: 0 0 10px; }
.post-style-grid.box .post-content { padding: 20px; border: 1px solid rgba(0,0,0,0.08); border-top: 0; }

/* --- Layout: hero (image with text overlay) --- */
.post-style-hero .post-block { position: relative; }
.post-style-hero .post-block .post-image a:after {
  content: "";
  width: 100%; height: 100%;
  top: 0; left: 0; z-index: 1;
  position: absolute;
  background: rgba(0,0,0,0.38);
}
.post-style-hero .post-block .post-content {
  position: absolute; bottom: 0; left: 0;
  padding: 15px 20px; width: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.88) 100%);
  z-index: 9;
}
.post-style-hero .post-block .post-content .post-title { padding: 0; }
.post-style-hero .post-block .post-content .post-title a { font-size: 14px; color: #fff; text-transform: uppercase; }
.post-style-hero .post-block .post-content .post-title a:hover { text-decoration: underline; }
.post-style-hero .post-block .post-content .post-meta { color: rgba(255,255,255,0.7); }
.post-style-hero .post-block .post-content .post-meta a { color: #fff; }
.post-style-hero .post-block .post-content .post-body { margin-top: 10px; color: rgba(255,255,255,0.7); line-height: 1.6; }
.post-style-hero .post-block .post-content .post-body p { margin-bottom: 0; }
.post-style-hero.v2 .post-block { border-radius: 10px; overflow: hidden; }
.post-style-hero.v2 .post-block .post-content { padding: 30px; border-radius: 0 0 10px 10px; overflow: hidden; }
.post-style-hero.v2 .post-block .post-image a img { border-radius: 10px; }
.post-style-hero.v2 .post-block .post-image a:after { border-radius: 10px; overflow: hidden; }

/* --- Full article page --- */
.node--view-mode-full p { margin-bottom: 10px; }
.node--view-mode-full .post-thumbnail { margin-bottom: 10px; }
.node--view-mode-full .post-thumbnail iframe { min-height: 400px; }
.node--view-mode-full .post-categories { padding-bottom: 0; margin-bottom: 5px; }

.node-detail { padding-bottom: 35px; }
.node-detail iframe { width: 100%; display: block; }
.node-detail .post-thumbnail.post-gallery { overflow: hidden; }
.node-detail .post-thumbnail.post-gallery .owl-nav { opacity: 1; }
.node-detail .post-thumbnail.post-gallery .owl-nav .owl-prev { margin-left: 100px; }
.node-detail .post-thumbnail.post-gallery .owl-nav .owl-next { margin-right: 100px; }
.node-detail .post-title { margin-top: 10px; font-size: 24px; }
.node-detail .post-meta { margin-bottom: 20px; }
.node-detail .field--name-field-tags .field__item {
  float: left; margin-right: 10px; font-weight: 700; text-transform: uppercase;
}

/* --- Archive / categories grid & masonry --- */
.categories-view-content.layout-grid .post-block,
.categories-view-content.layout-masonry .post-block { margin-bottom: 30px; text-align: left; }
.categories-view-content.layout-grid .post-block .post-categories,
.categories-view-content.layout-masonry .post-block .post-categories { margin: 0; }
.categories-view-content.layout-grid .post-block .post-categories h2,
.categories-view-content.layout-grid .post-block .post-categories h3,
.categories-view-content.layout-grid .post-block .post-categories h4,
.categories-view-content.layout-masonry .post-block .post-categories h2,
.categories-view-content.layout-masonry .post-block .post-categories h3,
.categories-view-content.layout-masonry .post-block .post-categories h4 { margin: 0; line-height: 1; }
.categories-view-content.layout-grid .post-block .post-title,
.categories-view-content.layout-masonry .post-block .post-title { padding: 0; }
.categories-view-content.layout-grid .post-block .post-meta,
.categories-view-content.layout-masonry .post-block .post-meta { margin-top: 0; }
.categories-view-content.layout-grid .post-block .post-body,
.categories-view-content.layout-masonry .post-block .post-body { padding: 10px 0 15px; }
.categories-view-content.layout-grid .post-block .post-content,
.categories-view-content.layout-masonry .post-block .post-content {
  padding: 15px; border: 1px solid rgba(0,0,0,0.08); border-top: 0;
}

/* --- Archive list layout --- */
.categories-view-content.layout-list .post-block { margin-bottom: 0; }
.categories-view-content.layout-list .post-block:before,
.categories-view-content.layout-list .post-block:after { content: " "; display: table; }
.categories-view-content.layout-list .post-block:after { clear: both; }
.categories-view-content.layout-list .post-block .post-thumbnail { width: 45%; float: left; }
@media (max-width: 767px) {
  .categories-view-content.layout-list .post-block .post-thumbnail { width: 100%; }
}
.categories-view-content.layout-list .post-block .post-title { padding: 0; margin: 0; }
.categories-view-content.layout-list .post-block .post-content { width: 55%; float: left; padding-left: 30px; }
@media (max-width: 767px) {
  .categories-view-content.layout-list .post-block .post-content { width: 100%; }
}
.categories-view-content.layout-list .post-block .post-content .post-categories { line-height: 1; padding-bottom: 0; margin-bottom: 0; }
.categories-view-content.layout-list .post-block .post-content .post-categories h2 { margin: 0; }

/* --- Post style: list (full) --- */
.post-style-list ul > li { margin-bottom: 20px !important; }
.post-style-list .post-block { clear: both; }
.post-style-list .post-block .post-image { width: 40%; float: left; }
@media (max-width: 767px) {
  .post-style-list .post-block .post-image { width: 100%; }
}
.post-style-list .post-block .post-image img { height: auto; width: 100%; }
.post-style-list .post-block .post-meta { margin-top: 3px; }
.post-style-list .post-block .post-content { padding-top: 5px; width: 60%; padding-left: 15px; float: left; }
@media (max-width: 767px) {
  .post-style-list .post-block .post-content { width: 100%; padding-left: 0; }
}
.post-style-list .post-block .post-title { padding-top: 0; }
.post-style-list .post-block.no-image .post-content { width: 100%; padding-left: 0; }

/* --- Post style: list small (sidebar widget) --- */
.post-style-list.small .post-block { margin-bottom: 20px; }
.post-style-list.small .post-block:before,
.post-style-list.small .post-block:after { content: " "; display: table; }
.post-style-list.small .post-block:after { clear: both; }
.post-style-list.small .post-image { width: 90px; height: auto; }
@media (max-width: 1199px) { .post-style-list.small .post-image { width: 60px; } }
.post-style-list.small .post-content { padding-left: 100px; float: none; width: 100%; }
@media (max-width: 1199px) { .post-style-list.small .post-content { padding-left: 80px; } }
.post-style-list.small .post-title { padding: 0; margin: 0; }
.post-style-list.small .post-title a { font-size: 14px; margin-top: -5px; text-transform: none; line-height: 20px; }
.post-style-list.small .post-title a:hover { color: #E8A020; }
.post-style-list.small .post-meta { padding: 0; margin-top: 0; font-size: 12px; }

/* --- PureKing: "Read More" link on post cards --- */
.post-block .content-after a,
.post-block a.read-more {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #E8A020;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid #E8A020;
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.post-block .content-after a:hover,
.post-block a.read-more:hover {
  color: #0A1628;
  border-color: #0A1628;
}

/* =============================================
   EVENT VIEW — additional view-level wrappers
   ============================================= */
.view-id-event .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  padding: 20px 0;
}
.view-id-event .view-filters {
  margin-bottom: 24px;
}

/* =============================================
   PORTFOLIO — copied & adapted from gavias_edmix
   #4582FF → #E8A020 (gold)  |  Raleway → Montserrat
   ============================================= */

/* --- Portfolio node: full view image carousel nav --- */
.node--view-mode-full.node--type-portfolio .portfolio-images .owl-nav .owl-prev { left: 20px !important; }
.node--view-mode-full.node--type-portfolio .portfolio-images .owl-nav .owl-next { right: 20px !important; }
.node--view-mode-full.node--type-portfolio .portfolio-images .owl-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
}

/* --- Portfolio single (detail page) --- */
.portfolio-single { padding-bottom: 30px; }
.portfolio-single .portfolio-informations { margin-bottom: 15px; }
.portfolio-single .portfolio-informations .item-information {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 15px 0;
}
.portfolio-single .portfolio-informations .item-information span:first-child {
  font-weight: 700;
  min-width: 120px;
  display: inline-block;
}
.portfolio-single .post-content ul { padding-left: 20px; margin-top: 15px; }

/* --- Portfolio filter tabs --- */
.portfolio-filter {
  margin-bottom: 20px;
  margin-top: 10px;
  text-align: center;
}
.portfolio-filter ul.nav-tabs { display: inline-block; }
.portfolio-filter ul.nav-tabs > li { margin-bottom: 10px; }
.portfolio-filter ul.nav-tabs > li > a {
  font-weight: 700;
  background: #fff !important;
  font-size: 12px;
  padding: 10px 18px;
  border-radius: 5px;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  margin-right: 10px;
  transition: all 0.3s;
  color: #0A1628 !important;
  border: 2px solid transparent !important;
  box-shadow: 0 1px 6px rgba(10,22,40,0.08);
}
.portfolio-filter ul.nav-tabs > li > a.active,
.portfolio-filter ul.nav-tabs > li > a:hover,
.portfolio-filter ul.nav-tabs > li > a:focus {
  color: #E8A020 !important;
  border-color: #E8A020 !important;
}

/* --- Portfolio v1 (grid card with hover overlay) --- */
.portfolio-v1 {
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.portfolio-v1:after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #0A1628;
  opacity: 0;
  z-index: 1;
  transition: all 0.35s;
}
.portfolio-v1 .content-inner {
  position: absolute;
  width: 100%; height: auto;
  left: 0; bottom: -20px;
  transform: translateY(0);
  z-index: 11;
  opacity: 0;
  text-align: left;
  transition: all 0.35s;
  padding: 25px;
}
.portfolio-v1 .content-inner .title a {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  line-height: 26px;
}
.portfolio-v1 .content-inner .title a:hover { text-decoration: underline; }
.portfolio-v1 .content-inner .category { color: #E8A020; }
.portfolio-v1 .content-inner .category a {
  color: #E8A020;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.portfolio-v1 .content-inner .category a:hover { text-decoration: underline; }
.portfolio-v1:hover:after { opacity: 0.82; }
.portfolio-v1:hover .content-inner { opacity: 1; bottom: 0; }
.portfolio-v1 ul { list-style: none; padding: 0; }
.portfolio-v1.portfolio-carousel { margin-bottom: 0; }

/* --- Portfolio carousel single (featured showcase) --- */
.portfolio-carousel-single .portfolio-item { overflow: hidden; }
.portfolio-carousel-single .portfolio-item .image { text-align: center; }
.portfolio-carousel-single .portfolio-item .image img {
  max-width: 800px;
  position: relative;
  z-index: 9;
}
.portfolio-carousel-single .portfolio-item .image .read-more {
  position: absolute;
  right: 0; bottom: 30px;
  z-index: 1;
  width: 300px;
  text-align: right;
}
.portfolio-carousel-single .portfolio-item .image .read-more a {
  text-transform: capitalize;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  transition: all 1s;
  padding-right: 40px;
  opacity: 0;
}
.portfolio-carousel-single .portfolio-item .image .read-more:after {
  content: "";
  width: 0;
  height: 1px;
  background: #E8A020;
  position: absolute;
  bottom: 0; left: 0;
  transition: all 1s;
}
.portfolio-carousel-single .portfolio-item .portfolio-content {
  position: absolute;
  top: 100px; left: 50px;
  z-index: 11;
}
.portfolio-carousel-single .portfolio-item .portfolio-content:after {
  content: "";
  transition: all 1s;
  width: 1px; height: 0;
  background: #E8A020;
  position: absolute;
  top: -110px; left: 0;
}
.portfolio-carousel-single .portfolio-item .portfolio-content .category a {
  text-transform: uppercase;
  color: #E8A020;
  font-weight: 700;
}
.portfolio-carousel-single .portfolio-item .portfolio-content .title {
  background: rgba(255,255,255,0.5);
  padding: 0 15px;
}
.portfolio-carousel-single .portfolio-item .portfolio-content .title a {
  font-size: 36px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 1px;
}
.portfolio-carousel-single .portfolio-item .portfolio-content .category {
  transition: all 0.6s cubic-bezier(0.77,0,0.175,1) 0.5s;
  transform: translate(0, -70%);
  opacity: 0;
}
.portfolio-carousel-single .portfolio-item .portfolio-content .title {
  transition: all 0.6s cubic-bezier(0.77,0,0.175,1) 0.9s;
  transform: translate(0, -50%);
  opacity: 0;
}
.portfolio-carousel-single .active-effect .portfolio-item .portfolio-content:after { height: 100px; }
.portfolio-carousel-single .active-effect .portfolio-item .portfolio-content .category,
.portfolio-carousel-single .active-effect .portfolio-item .portfolio-content .title {
  transform: translate(0, 0);
  opacity: 1;
}
.portfolio-carousel-single .active-effect .portfolio-item .image .read-more a {
  padding-right: 10px;
  opacity: 1;
}
.portfolio-carousel-single .active-effect .portfolio-item .image .read-more:after { width: 300px; }

/* ═══════════════════════════════════════════════════════════════════════════
   USER REGISTRATION FORM — PureKing branded layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.page-user-register .main-content,
.path-user .layout-container { max-width: 760px; margin: 0 auto; padding: 0 20px 60px; }

/* Adults-only notice banner */
.pk-reg-notice {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #0A1628, #132240);
  border-left: 4px solid #E8A020;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 28px;
  color: rgba(255,255,255,0.85);
  font-size: .95rem;
  line-height: 1.6;
}
.pk-reg-notice__icon { font-size: 2rem; flex-shrink: 0; }
.pk-reg-notice__text strong { color: #fff; }

/* Section containers (details elements) */
.pk-reg-section {
  background: #fff;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 12px rgba(10,22,40,0.06);
  overflow: hidden;
}
.pk-reg-section > summary {
  background: #F7F9FC;
  border-bottom: 1px solid #E2E8F0;
  padding: 16px 24px !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0A1628;
  cursor: pointer;
  list-style: none;
}
.pk-reg-section > summary::-webkit-details-marker { display: none; }
.pk-reg-section > summary::before {
  content: '▸ ';
  color: #E8A020;
  font-size: .7rem;
}
details.pk-reg-section[open] > summary::before { content: '▾ '; }

/* Inner content padding */
.pk-reg-section > .details-wrapper,
.pk-reg-section > fieldset > .fieldset-wrapper { padding: 24px 28px !important; }

/* Field rows */
.page-user-register .form-item,
.path-user .form-item { margin-bottom: 18px; }

.page-user-register label,
.path-user label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #0A1628;
  margin-bottom: 6px;
}
/* Required asterisk */
.page-user-register label.form-required::after,
.path-user label.form-required::after {
  content: ' *';
  color: #E8A020;
}

/* Text inputs */
.page-user-register input[type="text"],
.page-user-register input[type="email"],
.page-user-register input[type="password"],
.page-user-register input[type="tel"],
.page-user-register input[type="date"],
.page-user-register select,
.path-user input[type="text"],
.path-user input[type="email"],
.path-user input[type="password"],
.path-user select {
  width: 100%;
  padding: 11px 16px;
  border: 1.5px solid #D1D9E6;
  border-radius: 8px;
  font-size: .95rem;
  color: #0A1628;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.page-user-register input:focus,
.page-user-register select:focus,
.path-user input:focus,
.path-user select:focus {
  outline: none;
  border-color: #E8A020;
  box-shadow: 0 0 0 3px rgba(232,160,32,0.15);
}

/* Two-column layout for small fields */
.pk-reg-section .form-item--field-first-name,
.pk-reg-section .form-item--field-last-name,
.pk-reg-section .form-item--field-zip,
.pk-reg-section .form-item--field-city { display: inline-block; width: calc(50% - 10px); }
.pk-reg-section .form-item--field-first-name,
.pk-reg-section .form-item--field-zip { margin-right: 20px; }

/* Phone row: number + label inline */
.pk-reg-section .form-item--field-phone-1 { display: inline-block; width: calc(60% - 10px); margin-right: 20px; }
.pk-reg-section .form-item--field-phone-1-label { display: inline-block; width: calc(40% - 10px); }

/* Submit button */
.page-user-register .form-actions input[type="submit"],
.path-user .form-actions input[type="submit"] {
  background: linear-gradient(135deg, #E8A020, #F5B840);
  color: #0A1628;
  border: none;
  border-radius: 8px;
  padding: 14px 40px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(232,160,32,0.3);
}
.page-user-register .form-actions input[type="submit"]:hover,
.path-user .form-actions input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232,160,32,0.4);
}

/* Description / help text */
.page-user-register .form-item__description,
.path-user .form-item__description {
  font-size: .8rem;
  color: #8A97A8;
  margin-top: 5px;
}

/* Password strength indicator */
.password-strength { margin-top: 8px; }

/* ── Registration form mobile optimisation ─────────────────────────────── */
@media (max-width: 600px) {
  .page-user-register .main-content,
  .path-user .layout-container {
    padding: 0 12px 40px;
    max-width: 100%;
  }

  /* Force all two-column fields to full width */
  .pk-reg-section .form-item--field-first-name,
  .pk-reg-section .form-item--field-last-name,
  .pk-reg-section .form-item--field-zip,
  .pk-reg-section .form-item--field-city,
  .pk-reg-section .form-item--field-phone-1,
  .pk-reg-section .form-item--field-phone-1-label {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
  }

  /* Card inner padding */
  .pk-reg-section > .details-wrapper,
  .pk-reg-section > fieldset > .fieldset-wrapper {
    padding: 16px !important;
  }

  /* All inputs full-width, no overflow */
  .page-user-register input[type="text"],
  .page-user-register input[type="email"],
  .page-user-register input[type="password"],
  .page-user-register input[type="tel"],
  .page-user-register input[type="date"],
  .page-user-register select,
  .path-user input[type="text"],
  .path-user input[type="email"],
  .path-user input[type="password"],
  .path-user select {
    font-size: 16px !important; /* Prevent iOS auto-zoom */
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* Submit button full width */
  .page-user-register .form-actions input[type="submit"],
  .path-user .form-actions input[type="submit"] {
    width: 100%;
    padding: 16px;
    font-size: 1rem;
  }

  /* Label font */
  .page-user-register label,
  .path-user label {
    font-size: 0.78rem;
  }
}

/* ── pk-register-wrap (pureking_academy) mobile ─────────────────────────── */
@media (max-width: 600px) {
  .pk-register-wrap {
    margin: 16px auto !important;
    padding: 24px 16px !important;
    border-radius: 8px !important;
    max-width: calc(100% - 24px) !important;
    box-sizing: border-box;
  }

  .pk-register-wrap input[type="email"],
  .pk-register-wrap input[type="text"],
  .pk-register-wrap input[type="password"],
  .pk-register-wrap input[type="tel"] {
    font-size: 16px !important; /* Prevent iOS auto-zoom */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .pk-register-wrap .form-actions input[type="submit"] {
    font-size: 1rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FAMILY MEMBERS — page, form, and card styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page layout ────────────────────────────────────────────────────────── */
.pk-members-page { max-width: 900px; margin: 0 auto; padding: 40px 20px 80px; }

.pk-members-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.pk-members-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  color: #0A1628;
  margin: 0 0 6px;
}
.pk-members-sub { color: #4A5568; font-size: .95rem; margin: 0; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.pk-members-empty {
  text-align: center;
  padding: 80px 40px;
  background: #F7F9FC;
  border-radius: 16px;
  border: 2px dashed #D1D9E6;
}
.pk-members-empty__icon { font-size: 3.5rem; margin-bottom: 20px; }
.pk-members-empty h3 { color: #0A1628; font-size: 1.3rem; margin: 0 0 10px; }
.pk-members-empty p  { color: #4A5568; margin-bottom: 28px; }

/* ── Member cards grid ───────────────────────────────────────────────────── */
.pk-members-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pk-member-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(10,22,40,0.06);
  transition: box-shadow .2s;
}
.pk-member-card:hover { box-shadow: 0 6px 24px rgba(10,22,40,0.10); }

/* Avatar circle */
.pk-member-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0A1628, #1E3560);
  color: #E8A020;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Body */
.pk-member-card__body { flex: 1; min-width: 0; }

.pk-member-card__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #0A1628;
  margin-bottom: 8px;
}

.pk-member-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: .85rem;
  color: #4A5568;
  margin-bottom: 8px;
}
.pk-member-card__meta i { color: #E8A020; margin-right: 4px; }

.pk-member-card__emerg {
  font-size: .82rem;
  color: #4A5568;
  margin-bottom: 10px;
}

/* Inheritance badges */
.pk-member-card__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}
.pk-badge--inherit { background: rgba(232,160,32,0.10); color: #B07B10; border: 1px solid rgba(232,160,32,0.25); }
.pk-badge i { font-size: .7rem; }

/* Card action buttons */
.pk-member-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.pk-member-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.pk-member-btn--edit  { background: #F4F6F9; color: #0A1628; }
.pk-member-btn--edit:hover  { background: #E8A020; color: #0A1628; }
.pk-member-btn--delete { background: #FEF2F2; color: #C53030; }
.pk-member-btn--delete:hover { background: #FED7D7; }

/* "Add another" row */
.pk-members-add-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.pk-members-count { font-size: .85rem; color: #8A97A8; }

/* ── Member form ─────────────────────────────────────────────────────────── */
.pk-form-section-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0A1628;
  margin: 24px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #E8A020;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Form rows — CSS grid for multi-column */
.pk-form-row { display: grid; gap: 16px; }
.pk-form-row--2col { grid-template-columns: 1fr 1fr; }
.pk-form-row--4col { grid-template-columns: 1fr 1fr 1fr auto; }

@media (max-width: 600px) {
  .pk-form-row--2col { grid-template-columns: 1fr; }
  .pk-form-row--4col { grid-template-columns: 1fr 1fr; }
}

/* Inherit preview box */
.pk-inherit-preview {
  background: rgba(232,160,32,0.07);
  border: 1px solid rgba(232,160,32,0.2);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: .88rem;
  color: #4A5568;
  margin: 10px 0 4px;
}
.pk-inherit-preview i { color: #E8A020; margin-right: 6px; }

/* Cancel link */
.pk-btn-cancel {
  display: inline-flex;
  align-items: center;
  margin-left: 14px;
  color: #8A97A8;
  font-size: .88rem;
  text-decoration: none;
  transition: color .2s;
}
.pk-btn-cancel:hover { color: #0A1628; }

/* Note paragraph */
.pk-form-note {
  color: #8A97A8;
  font-size: .9rem;
  padding: 20px 0;
  margin: 0;
}

/* Vertical tabs override — make them look like our section style */
.vertical-tabs { border: none !important; }
.vertical-tabs__menu { background: #F7F9FC; border-right: 2px solid #E2E8F0; }
.vertical-tabs__menu-item a { font-family: 'Montserrat', sans-serif; font-size: .82rem; font-weight: 600; }
.vertical-tabs__menu-item--active a { color: #E8A020 !important; border-left: 3px solid #E8A020; }

/* Mobile: stack member card */
@media (max-width: 640px) {
  .pk-member-card { flex-direction: column; }
  .pk-member-card__actions { flex-direction: row; }
  .pk-members-header { flex-direction: column; }
}

/* ================================================================
   COURSE CAMPUS / VENUE  —  PureKing child theme
   ================================================================ */

/* Badge overlaid on course card image */
.pk-course-card .image { position: relative; }
.pk-course-campus-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(10,22,40,0.82);
  color: #E8A020;
  font-size: .72rem;
  font-weight: 700;
  padding: .28rem .65rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  backdrop-filter: blur(4px);
  letter-spacing: .03em;
  line-height: 1.4;
  pointer-events: none;
  z-index: 2;
}
.pk-course-campus-badge .fa {
  font-size: .7rem;
  color: #E8A020;
}

/* Venue line below teacher name in course card */
.pk-course-venue {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: #6b7a94;
  margin-top: .35rem;
  margin-bottom: .2rem;
  font-weight: 600;
}
.pk-course-venue .fa {
  color: #E8A020;
  font-size: .75rem;
  flex-shrink: 0;
}
.pk-course-venue--featured {
  font-size: .88rem;
  margin-bottom: .6rem;
  color: #4a5568;
}

/* Level badge on course card */
.pk-course-level {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .2rem .6rem;
  border-radius: 20px;
  margin-bottom: .4rem;
  background: rgba(10,22,40,.07);
  color: #0A1628;
}
.pk-course-level--begin,
.pk-course-level--beginner { background: #e8f5e9; color: #2e7d32; }
.pk-course-level--fundermental,
.pk-course-level--fundamental { background: #e3f2fd; color: #1565c0; }
.pk-course-level--intermediate_advanced,
.pk-course-level--intermediate { background: #fff3e0; color: #e65100; }
.pk-course-level--advanced { background: #fce4ec; color: #880e4f; }
.pk-course-level--master { background: #ede7f6; color: #4527a0; }

/* ── Homepage front-page dynamic courses grid ─────────────────── */
.pk-front-courses-section {
  background: #fff;
  padding: 80px 0;
}
.pk-front-courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.pk-front-course-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(10,22,40,0.10);
  background: #fff;
  border: 1px solid #e2e6ef;
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.pk-front-course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(10,22,40,0.16);
}
.pk-front-course-card__img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0A1628;
  position: relative;
}
.pk-front-course-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pk-front-course-card__campus-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(10,22,40,0.80);
  color: #E8A020;
  font-size: .72rem;
  font-weight: 700;
  padding: .28rem .65rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  z-index: 2;
}
.pk-front-course-card__body {
  padding: 1.25rem 1.25rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pk-front-course-card__level {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .2rem .6rem;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: .3rem;
  background: rgba(232,160,32,.12);
  color: #c88018;
  width: fit-content;
}
.pk-front-course-card__cat {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .18rem .55rem;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: .55rem;
  margin-left: .3rem;
  background: rgba(10,22,40,.08);
  color: #4A5568;
  width: fit-content;
}
.pk-front-course-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: #0A1628;
  margin: 0 0 .4rem;
  line-height: 1.35;
}
.pk-front-course-card__title a {
  color: inherit;
  text-decoration: none;
}
.pk-front-course-card__title a:hover { color: #c88018; }
.pk-front-course-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .75rem;
}
.pk-front-course-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: #6b7a94;
  font-weight: 500;
}
.pk-front-course-card__meta-item .fa { color: #E8A020; font-size: .72rem; }
.pk-front-course-card__campus {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 700;
  color: #0A1628;
  background: rgba(232,160,32,.10);
  border: 1px solid rgba(232,160,32,.3);
  border-radius: 8px;
  padding: .4rem .7rem;
  margin-bottom: .85rem;
}
.pk-front-course-card__campus .fa { color: #E8A020; }
.pk-front-course-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: .75rem;
  border-top: 1px solid #f0f2f7;
  margin-top: auto;
}
.pk-front-course-card__price {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0A1628;
}
.pk-front-course-card__cta {
  background: linear-gradient(135deg, #E8A020 0%, #c88018 100%);
  color: #0A1628;
  font-size: .82rem;
  font-weight: 800;
  padding: .5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: .03em;
  transition: opacity .2s;
}
.pk-front-course-card__cta:hover { opacity: .88; }

@media (max-width: 640px) {
  .pk-front-courses-grid { grid-template-columns: 1fr; }
  .pk-front-courses-section { padding: 56px 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE SECTION POLISH  (2026-03-28 refresh)
   Targets both region-block wrappers AND static fallback sections
═══════════════════════════════════════════════════════════════════════════ */

/* ── Stats strip (gold band) ──────────────────────────────────────────── */
.pk-region-stats > section,
.pk-region-stats {
  background: linear-gradient(90deg, #E8A020 0%, #F5B840 50%, #E8A020 100%) !important;
  padding: 48px 0 !important;
  position: relative;
  overflow: hidden;
}
/* Subtle shine sweep */
.pk-region-stats::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: pk-shine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pk-shine {
  0%,100% { left: -60%; }
  50%      { left: 120%; }
}
.pk-stat-num {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
}

/* ── About / Coach section ────────────────────────────────────────────── */
.pk-region-about > section,
.pk-region-about {
  padding: 96px 0 !important;
}
/* Ensure about section row aligns centre */
.pk-region-about .row {
  align-items: center !important;
}

/* ── Programs section ─────────────────────────────────────────────────── */
.pk-region-programs > section,
.pk-region-programs {
  padding: 96px 0 !important;
  background: #ffffff !important;
}

/* ── Method / Philosophy section ─────────────────────────────────────── */
.pk-region-method > section,
.pk-region-method {
  padding: 96px 0 !important;
  background: var(--pk-gray-light) !important;
}

/* ── Testimonials ─────────────────────────────────────────────────────── */
.pk-region-testimonials > section,
.pk-region-testimonials {
  padding: 88px 0 !important;
  background: #0A1628 !important;
}

/* ── CTA strip ────────────────────────────────────────────────────────── */
.pk-region-cta > section,
.pk-region-cta {
  padding: 80px 0 !important;
  background: linear-gradient(135deg, #132240 0%, #0A1628 100%) !important;
}

/* ── Smooth section dividers ─────────────────────────────────────────── */
.pk-region-stats + .pk-region-about,
.pk-region-stats + section {
  margin-top: 0;
}

/* ── Hero scroll-down pulse (decorative) ──────────────────────────────── */
.pk-hero-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 40px;
  background: linear-gradient(to bottom, rgba(232,160,32,0), rgba(232,160,32,0.4));
  animation: pk-scroll-pulse 2s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}
@keyframes pk-scroll-pulse {
  0%,100% { opacity: 0; transform: translateX(-50%) scaleY(0.4); }
  50%      { opacity: 1; transform: translateX(-50%) scaleY(1); }
}

/* ── Feature blocks (about section) ──────────────────────────────────── */
.pk-feature-block {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.pk-feature-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: rgba(232,160,32,0.1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--pk-gold);
  font-size: 1.15rem;
}
.pk-feature-text { flex: 1; }

/* ── Revolution Slider navigation arrows ─────────────────────────────── */
.pk-hero-slider-wrapper .tparrows {
  background: rgba(10,22,40,0.7) !important;
  border-radius: 50% !important;
  width: 40px !important; height: 40px !important;
  line-height: 40px !important;
  transition: background .25s;
}
.pk-hero-slider-wrapper .tparrows:hover {
  background: #E8A020 !important;
}
.pk-hero-slider-wrapper .tparrows::before {
  color: #fff !important;
  font-size: 14px !important;
}
/* Bullet dots */
.pk-hero-slider-wrapper .tp-bullets .tp-bullet {
  background: rgba(255,255,255,0.4) !important;
  border-radius: 50% !important;
  width: 8px !important; height: 8px !important;
}
.pk-hero-slider-wrapper .tp-bullets .tp-bullet.selected,
.pk-hero-slider-wrapper .tp-bullets .tp-bullet:hover {
  background: #E8A020 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRAM PAGES  (page--pk-program.html.twig)
   Navy #0A1628 · Gold #E8A020 · consistent with homepage
═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.pk-prog-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.pk-prog-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10,22,40,0.88) 0%,
    rgba(10,22,40,0.65) 55%,
    rgba(10,22,40,0.40) 100%
  );
}
.pk-prog-hero__wave {
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 64px;
  background: #fff;
  clip-path: polygon(0 100%, 100% 100%, 100% 30%, 0 100%);
  pointer-events: none;
}
.pk-prog-hero__inner {
  position: relative; z-index: 2;
  padding: 100px 0 96px;
  max-width: 720px;
}
.pk-prog-badge {
  display: inline-block;
  font-family: var(--pk-font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.pk-prog-hero__title {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.08;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}
.pk-prog-hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255,255,255,0.78);
  margin-bottom: 36px;
  max-width: 580px;
  line-height: 1.65;
}
.pk-prog-hero__btns {
  display: flex; gap: 14px; flex-wrap: wrap;
}

/* ── Section labels (reused everywhere) ──────────────────────────────── */
.pk-prog-section-label {
  display: inline-block;
  font-family: var(--pk-font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #E8A020;
  margin-bottom: 10px;
}
.pk-prog-section-head {
  text-align: center;
  margin-bottom: 52px;
}
.pk-prog-section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 900;
  color: #0A1628;
  letter-spacing: -0.02em;
  margin-top: 6px;
}

/* ── Overview ─────────────────────────────────────────────────────────── */
.pk-prog-overview {
  background: #fff;
  padding: 88px 0 72px;
}
.pk-prog-overview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.pk-prog-overview__h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 900;
  color: #0A1628;
  margin: 8px 0 20px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  border-left: 4px solid #E8A020;
  padding-left: 20px;
}
.pk-prog-overview__body {
  font-size: 1.05rem;
  color: #4A5568;
  line-height: 1.85;
  margin-bottom: 16px;
}

/* Highlight pills */
.pk-prog-highlight {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #F4F6F9;
  border-radius: 12px;
  margin-bottom: 14px;
  transition: box-shadow .2s;
}
.pk-prog-highlight:hover { box-shadow: 0 4px 16px rgba(10,22,40,.1); }
.pk-prog-highlight__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.pk-prog-highlight__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A97A8;
  margin-bottom: 2px;
}
.pk-prog-highlight__value {
  font-weight: 700;
  color: #0A1628;
  font-size: .95rem;
}

/* ── Features ─────────────────────────────────────────────────────────── */
.pk-prog-features {
  background: #F4F6F9;
  padding: 88px 0;
}
.pk-prog-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pk-prog-feature-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  transition: transform .25s, box-shadow .25s;
  border: 1px solid #E2E6ED;
}
.pk-prog-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(10,22,40,.12);
}
.pk-prog-feature-card__icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 18px;
}
.pk-prog-feature-card__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0A1628;
  margin-bottom: 10px;
}
.pk-prog-feature-card__body {
  font-size: .9rem;
  color: #4A5568;
  line-height: 1.75;
  margin: 0;
}

/* ── Schedule + Pricing ───────────────────────────────────────────────── */
.pk-prog-schedule-pricing {
  background: #fff;
  padding: 88px 0;
}
.pk-prog-sp-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}
.pk-prog-schedule__h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0A1628;
  margin: 8px 0 28px;
}
.pk-prog-slot {
  padding: 20px 24px;
  border-radius: 12px;
  border-left: 4px solid #E8A020;
  background: #F4F6F9;
  margin-bottom: 14px;
}
.pk-prog-slot__days {
  font-weight: 800;
  color: #0A1628;
  font-size: 1rem;
  margin-bottom: 4px;
}
.pk-prog-slot__time {
  font-size: .92rem;
  color: #E8A020;
  font-weight: 700;
}
.pk-prog-slot__note {
  font-size: .8rem;
  color: #8A97A8;
  margin-top: 4px;
}
.pk-prog-location {
  margin-top: 24px;
  font-size: .88rem;
  color: #8A97A8;
  display: flex; align-items: center; gap: 8px;
}
.pk-prog-location .fa { color: #E8A020; }

/* Pricing card */
.pk-prog-pricing-card__inner {
  background: linear-gradient(135deg, #0A1628 0%, #132240 100%);
  border-radius: 20px;
  padding: 40px 36px;
  text-align: center;
  box-shadow: 0 20px 56px rgba(10,22,40,.35);
  position: sticky;
  top: 100px;
}
.pk-prog-pricing-card__badge {
  display: inline-block;
  background: rgba(232,160,32,.15);
  color: #E8A020;
  border: 1px solid rgba(232,160,32,.3);
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 16px;
  margin-bottom: 24px;
}
.pk-prog-pricing-card__price {
  font-size: 3.2rem;
  font-weight: 900;
  color: #E8A020;
  line-height: 1;
  letter-spacing: -0.04em;
}
.pk-prog-pricing-card__unit {
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  margin: 8px 0 28px;
}
.pk-prog-pricing-card__perks {
  list-style: none;
  padding: 0; margin: 0 0 32px;
  text-align: left;
}
.pk-prog-pricing-card__perks li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: .9rem;
  color: rgba(255,255,255,.78);
  display: flex; align-items: center; gap: 10px;
}
.pk-prog-pricing-card__perks li .fa {
  color: #E8A020; font-size: .8rem; flex-shrink: 0;
}
.pk-prog-pricing-card__cta {
  width: 100%;
  justify-content: center;
  font-size: .9rem !important;
}

/* ── Coach callout ────────────────────────────────────────────────────── */
.pk-prog-coach {
  background: #0A1628;
  padding: 72px 0;
}
.pk-prog-coach__inner {
  display: flex;
  gap: 40px;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
}
.pk-prog-coach__avatar {
  flex-shrink: 0;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(232,160,32,.12);
  border: 3px solid #E8A020;
  display: flex; align-items: center; justify-content: center;
  color: #E8A020;
  font-size: 3rem;
}
.pk-prog-coach__name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 4px 0 12px;
}
.pk-prog-coach__bio {
  font-size: .92rem;
  color: rgba(255,255,255,.68);
  line-height: 1.7;
  margin: 0;
}

/* ── CTA banner ───────────────────────────────────────────────────────── */
.pk-prog-cta {
  background: linear-gradient(135deg, #E8A020 0%, #F5B840 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.pk-prog-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(10,22,40,.1) 1px, transparent 1px);
  background-size: 24px 24px;
}
.pk-prog-cta__inner {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.pk-prog-cta__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #0A1628;
  margin-bottom: 14px;
  letter-spacing: -0.03em;
}
.pk-prog-cta__sub {
  font-size: 1.05rem;
  color: rgba(10,22,40,.75);
  margin-bottom: 36px;
  line-height: 1.7;
}
.pk-prog-cta__btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.pk-prog-cta .pk-btn-gold {
  background: #0A1628 !important;
  border-color: #0A1628 !important;
  color: #E8A020 !important;
}
.pk-prog-cta .pk-btn-gold:hover {
  background: #132240 !important;
  border-color: #132240 !important;
}
.pk-prog-cta .pk-btn-outline-light {
  border-color: rgba(10,22,40,.3) !important;
  color: rgba(10,22,40,.75) !important;
}
.pk-prog-cta .pk-btn-outline-light:hover {
  border-color: #0A1628 !important;
  color: #0A1628 !important;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pk-prog-overview__grid { grid-template-columns: 1fr; gap: 40px; }
  .pk-prog-sp-grid        { grid-template-columns: 1fr; }
  .pk-prog-pricing-card__inner { position: static; }
}
@media (max-width: 768px) {
  .pk-prog-hero         { min-height: 400px; }
  .pk-prog-hero__inner  { padding: 80px 0 80px; }
  .pk-prog-features__grid { grid-template-columns: 1fr; gap: 16px; }
  .pk-prog-coach__inner { flex-direction: column; text-align: center; }
}
@media (max-width: 600px) {
  .pk-prog-features__grid { grid-template-columns: 1fr; }
}

/* =============================================
   HOMEPAGE OVERHAUL — smooth scroll, SVG cart,
   glassmorphism mobile header, FAB
   ============================================= */

/* ── Global smooth scroll ──────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── SVG Cart button in header ─────────────── */
.quick-cart .pk-cart-trigger {
  background: transparent;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: var(--pk-font-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  border-radius: 50px;
  transition: var(--pk-transition);
  position: relative;
}
.quick-cart .pk-cart-trigger:hover {
  background: rgba(242,169,0,0.15);
}
.quick-cart .pk-cart-trigger svg {
  flex-shrink: 0;
}
.quick-cart .pk-cart-label {
  font-family: 'Poppins', 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  line-height: 1;
}
.quick-cart .pk-cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  background: #F2A900;
  color: var(--pk-navy);
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* ── Mobile / tablet sticky header (≤ 991px)
   All sizes where the hamburger is shown get a dark navy background.
   #header .header-main uses transparent so it inherits the dark bg.
   Specificity of #header .header-main (1,1,0 + !important) beats
   .header-main.gv-sticky-menu (0,2,0 + !important) → no white flash on scroll.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  #header {
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(10, 26, 47, 0.9) !important;
    box-shadow: 0 2px 20px rgba(10, 22, 40, 0.3);
  }
  #header .header-main {
    background: transparent !important;
  }
  #header .topbar {
    display: none; /* hide topbar on mobile/tablet */
  }
  .quick-cart .pk-cart-label {
    display: none;
  }
}

/* ── Floating Action Button (FAB) ───────────── */
.pk-fab {
  display: none; /* hidden by default; shown only on mobile */
}

@media (max-width: 767px) {
  .pk-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 28px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #F2A900;
    box-shadow: 0 6px 24px rgba(242,169,0,0.50), 0 2px 8px rgba(10,22,40,0.25);
    z-index: 9999;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .pk-fab:hover,
  .pk-fab:focus {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 12px 32px rgba(242,169,0,0.60), 0 4px 12px rgba(10,22,40,0.30);
  }
  .pk-fab svg {
    flex-shrink: 0;
  }
}

/* =============================================
   35. INNER-PAGE BLOCK BUILDER — SECTION SKINS
   These complement section 32 (.pk-bb-fullwidth)
   for inner node pages that use the Gavias block
   builder content type (camps, programs, etc.).
   ============================================= */

/* ── HERO ROW: parallax background with overlay ──
   The block builder stores the background image
   as an inline style on .gbb-row-wrapper.
   We add a dark gradient overlay via ::before so
   white text stays readable over any photo.
   ================================================ */
.pk-bb-hero .gbb-row-wrapper {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
}
.pk-bb-hero .gbb-row-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    150deg,
    rgba(10, 22, 40, 0.80) 0%,
    rgba(10, 22, 40, 0.55) 55%,
    rgba(10, 22, 40, 0.35) 100%
  );
  z-index: 1;
}
.pk-bb-hero .gbb-row-wrapper > .bb-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Hero heading — larger + white */
.pk-bb-hero .widget.gsc-heading .title {
  font-size: clamp(2.6rem, 7vw, 5rem) !important;
  color: var(--pk-white) !important;
  text-shadow: 0 2px 24px rgba(10, 22, 40, 0.55);
  letter-spacing: -0.03em !important;
}
.pk-bb-hero .widget.gsc-heading .sub-title {
  color: var(--pk-gold) !important;
  text-shadow: none;
  letter-spacing: 0.22em !important;
}
.pk-bb-hero .widget.gsc-heading .desc p {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: clamp(1rem, 1.5vw, 1.12rem) !important;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.pk-bb-hero .widget.gsc-heading .heading-line span {
  background: var(--pk-gold) !important;
}

/* Hero CTA button — inline style from blockbuilder
   sets background:#E8A020, we reinforce + add hover */
.pk-bb-hero .gsc-button .btn,
.pk-bb-hero a.btn {
  font-family: var(--pk-font-head) !important;
  font-weight: 800 !important;
  font-size: clamp(0.9rem, 1.2vw, 1rem) !important;
  padding: 14px 36px !important;
  border-radius: var(--pk-radius) !important;
  letter-spacing: 0.04em;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 4px 16px rgba(232, 160, 32, 0.38) !important;
}
.pk-bb-hero a.btn:hover {
  box-shadow: 0 6px 24px rgba(232, 160, 32, 0.55) !important;
  transform: translateY(-2px);
}

/* ── GRAY HIGHLIGHT ROWS
   attribute-selector on the inline background-color
   set by the blockbuilder on .gbb-row-wrapper
   ================================================ */
.gbb-row-wrapper[style*="background-color:#f8f9fb"],
.gbb-row-wrapper[style*="background-color: #f8f9fb"] {
  background-color: #f4f6f9 !important;
}

/* Equal-height card columns in highlight grid */
.gbb-row-wrapper[style*="background-color:#f8f9fb"] .row-wrapper,
.gbb-row-wrapper[style*="background-color: #f8f9fb"] .row-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
}
.gbb-row-wrapper[style*="background-color:#f8f9fb"] [class*="col-lg-"],
.gbb-row-wrapper[style*="background-color: #f8f9fb"] [class*="col-lg-"] {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.gbb-row-wrapper[style*="background-color:#f8f9fb"] .column-inner,
.gbb-row-wrapper[style*="background-color: #f8f9fb"] .column-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Icon boxes in gray rows — white card treatment */
.gbb-row-wrapper[style*="background-color:#f8f9fb"] .gsc-icon-box,
.gbb-row-wrapper[style*="background-color: #f8f9fb"] .gsc-icon-box {
  flex: 1;
  background: var(--pk-white) !important;
  border-radius: var(--pk-radius-lg) !important;
  box-shadow: var(--pk-shadow) !important;
  border: 2px solid transparent !important;
  padding: 28px 24px !important;
  transition: var(--pk-transition);
  margin-bottom: 0 !important;
}
.gbb-row-wrapper[style*="background-color:#f8f9fb"] .gsc-icon-box:hover,
.gbb-row-wrapper[style*="background-color: #f8f9fb"] .gsc-icon-box:hover {
  border-color: var(--pk-gold) !important;
  transform: translateY(-4px);
  box-shadow: var(--pk-shadow-lg) !important;
}
/* Gold icons */
.gbb-row-wrapper[style*="background-color:#f8f9fb"] .icon-container,
.gbb-row-wrapper[style*="background-color: #f8f9fb"] .icon-container {
  color: var(--pk-gold) !important;
}
.gbb-row-wrapper[style*="background-color:#f8f9fb"] .icon-container .icon,
.gbb-row-wrapper[style*="background-color: #f8f9fb"] .icon-container .icon {
  color: var(--pk-gold) !important;
}
/* Navy headings */
.gbb-row-wrapper[style*="background-color:#f8f9fb"] .gsc-icon-box .title,
.gbb-row-wrapper[style*="background-color: #f8f9fb"] .gsc-icon-box .title,
.gbb-row-wrapper[style*="background-color:#f8f9fb"] .gsc-icon-box .title a,
.gbb-row-wrapper[style*="background-color: #f8f9fb"] .gsc-icon-box .title a {
  font-family: var(--pk-font-head) !important;
  font-weight: 800 !important;
  font-size: clamp(1rem, 1.5vw, 1.15rem) !important;
  color: var(--pk-navy) !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
}
/* Mid-gray description */
.gbb-row-wrapper[style*="background-color:#f8f9fb"] .gsc-icon-box .desc p,
.gbb-row-wrapper[style*="background-color: #f8f9fb"] .gsc-icon-box .desc p {
  color: var(--pk-text-mid) !important;
  font-size: clamp(0.85rem, 1vw, 0.95rem) !important;
  line-height: 1.8 !important;
}

/* ── OVERVIEW ROW: left-col icon boxes as feature list ──
   In the overview section (white bg), icon boxes appear
   as inline feature items rather than standalone cards.
   Scope: icon-boxes inside a col-lg-7 or col-md-7 column.
   ========================================================= */
.col-md-7 .gsc-icon-box.top-left,
.col-lg-7 .gsc-icon-box.top-left {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--pk-gray) !important;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.col-md-7 .gsc-icon-box.top-left:last-child,
.col-lg-7 .gsc-icon-box.top-left:last-child {
  border-bottom: none !important;
}
.col-md-7 .gsc-icon-box .highlight-icon,
.col-lg-7 .gsc-icon-box .highlight-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.col-md-7 .gsc-icon-box .icon-container,
.col-lg-7 .gsc-icon-box .icon-container {
  color: var(--pk-gold) !important;
}
.col-md-7 .gsc-icon-box .icon-container .icon,
.col-lg-7 .gsc-icon-box .icon-container .icon {
  color: var(--pk-gold) !important;
  font-size: 1.5rem !important;
}
.col-md-7 .gsc-icon-box .title,
.col-lg-7 .gsc-icon-box .title {
  font-family: var(--pk-font-head) !important;
  font-weight: 800 !important;
  font-size: clamp(0.95rem, 1.3vw, 1.05rem) !important;
  color: var(--pk-navy) !important;
  margin-bottom: 4px !important;
}
.col-md-7 .gsc-icon-box .desc p,
.col-lg-7 .gsc-icon-box .desc p {
  color: var(--pk-text-mid) !important;
  font-size: clamp(0.85rem, 1vw, 0.92rem) !important;
  line-height: 1.75 !important;
  margin-bottom: 0;
}

/* ── SCHEDULE SECTION: date entry box styling ──
   The schedule content in col-lg-6 uses gsc-icon-box
   for individual camp date entries (Summer / Winter).
   ================================================= */
.col-md-6 .gsc-icon-box.top-left,
.col-lg-6 .gsc-icon-box.top-left {
  background: var(--pk-white) !important;
  border: 2px solid var(--pk-gray) !important;
  border-left: 5px solid var(--pk-gold) !important;
  border-radius: var(--pk-radius) !important;
  box-shadow: var(--pk-shadow) !important;
  padding: 20px 22px !important;
  margin-bottom: 16px !important;
  transition: var(--pk-transition);
}
.col-md-6 .gsc-icon-box.top-left:hover,
.col-lg-6 .gsc-icon-box.top-left:hover {
  border-left-color: var(--pk-navy) !important;
  transform: translateX(4px);
}
.col-md-6 .gsc-icon-box .icon-container,
.col-lg-6 .gsc-icon-box .icon-container {
  color: var(--pk-gold) !important;
}
.col-md-6 .gsc-icon-box .icon-container .icon,
.col-lg-6 .gsc-icon-box .icon-container .icon {
  color: var(--pk-gold) !important;
  font-size: 1.4rem !important;
}
.col-md-6 .gsc-icon-box .title,
.col-lg-6 .gsc-icon-box .title {
  font-family: var(--pk-font-head) !important;
  font-weight: 800 !important;
  font-size: clamp(1rem, 1.4vw, 1.1rem) !important;
  color: var(--pk-navy) !important;
  margin-bottom: 6px !important;
}
.col-md-6 .gsc-icon-box .desc p,
.col-lg-6 .gsc-icon-box .desc p {
  color: var(--pk-text-mid) !important;
  font-size: clamp(0.85rem, 1vw, 0.95rem) !important;
  line-height: 1.75 !important;
  margin-bottom: 0;
}

/* Price highlight in right schedule column */
.col-md-6 .gsc-icon-box .price,
.col-lg-6 .gsc-icon-box .price {
  font-family: var(--pk-font-head) !important;
  font-size: clamp(1.6rem, 3vw, 2rem) !important;
  font-weight: 900 !important;
  color: var(--pk-gold) !important;
  line-height: 1.1;
}

/* ── CTA ROW: has-background gsc-call-to-action ──
   The .has-background class signals the blockbuilder
   set an inline background on the widget. We add our
   navy skin + gold button for consistency.
   ================================================= */
.gsc-call-to-action.has-background {
  background: var(--pk-navy) !important;
  border-radius: var(--pk-radius-lg) !important;
  padding: 48px 40px !important;
}
.gsc-call-to-action.has-background.text-light .title {
  font-family: var(--pk-font-head) !important;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem) !important;
  font-weight: 900 !important;
  color: var(--pk-white) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 10px !important;
}
.gsc-call-to-action.has-background.text-light .desc p {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: clamp(0.9rem, 1.2vw, 1rem) !important;
}
.gsc-call-to-action.has-background .btn {
  background: var(--pk-gold) !important;
  color: var(--pk-navy) !important;
  border: 2px solid var(--pk-gold) !important;
  font-family: var(--pk-font-head) !important;
  font-weight: 800 !important;
  font-size: clamp(0.88rem, 1.2vw, 0.98rem) !important;
  padding: 13px 30px !important;
  border-radius: var(--pk-radius) !important;
  letter-spacing: 0.04em;
  transition: var(--pk-transition);
}
.gsc-call-to-action.has-background .btn:hover {
  background: transparent !important;
  color: var(--pk-gold) !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .pk-bb-hero .gbb-row-wrapper {
    min-height: 420px;
    padding-top: 80px !important;
    padding-bottom: 70px !important;
  }
  .pk-bb-hero .widget.gsc-heading .title {
    font-size: clamp(2.2rem, 6vw, 3.6rem) !important;
  }
}

@media (max-width: 767px) {
  .pk-bb-hero .gbb-row-wrapper {
    min-height: 360px;
    padding-top: 64px !important;
    padding-bottom: 60px !important;
  }
  .pk-bb-hero .widget.gsc-heading .title {
    font-size: clamp(1.9rem, 8vw, 2.8rem) !important;
  }
  .pk-bb-hero .widget.gsc-heading .desc p {
    font-size: 0.95rem !important;
  }
  /* Stack col-lg-7 / col-lg-5 on mobile */
  .col-md-7 .gsc-icon-box.top-left,
  .col-lg-7 .gsc-icon-box.top-left {
    padding: 12px 0 !important;
  }
  /* Gray highlight cards full-width */
  .gbb-row-wrapper[style*="background-color:#f8f9fb"] [class*="col-lg-"],
  .gbb-row-wrapper[style*="background-color: #f8f9fb"] [class*="col-lg-"] {
    margin-bottom: 16px;
  }
  /* CTA stack layout */
  .gsc-call-to-action.has-background {
    padding: 36px 24px !important;
  }
  .gsc-call-to-action.button-right .content-inner {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .gsc-call-to-action.button-right .content-inner .btn {
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .pk-bb-hero .gbb-row-wrapper {
    min-height: 300px;
  }
  .pk-bb-hero a.btn {
    padding: 12px 24px !important;
    font-size: 0.88rem !important;
  }
  .gsc-call-to-action.has-background {
    padding: 28px 18px !important;
  }
}

/* =============================================
   34. HERO BANNER STANDARDISATION
   About Us (node-166) and Contact Us (node-168) previously used
   a GBB row as a DIY navy banner (breadcrumb disabled).
   Breadcrumb is now enabled on both nodes so the standard
   breadcrumb block renders the banner identically to Programs.
   These rules:
     a) strip the GBB first-row of its duplicate navy bg / padding
     b) hide the gsc_heading h2 (already shown in the breadcrumb
        banner as .page-title)
     c) re-style the remaining subtitle + desc as a compact
        white intro strip below the banner
   ============================================= */

/* ── (a) Neutralise the GBB first row's DIY banner styling ── */
.node-166 .pk-bb-fullwidth .gbb-row:first-child,
.node-168 .pk-bb-fullwidth .gbb-row:first-child {
  background-color: transparent !important;
  background-image: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ── (b) Hide the duplicate page title inside the GBB heading ── */
.node-166 .pk-bb-fullwidth .gbb-row:first-child .gsc-heading .title,
.node-168 .pk-bb-fullwidth .gbb-row:first-child .gsc-heading .title,
.node-166 .pk-bb-fullwidth .gbb-row:first-child .gsc-heading .heading-line,
.node-168 .pk-bb-fullwidth .gbb-row:first-child .gsc-heading .heading-line {
  display: none !important;
}

/* ── (c) Re-style subtitle + desc as a clean intro strip ── */
.node-166 .pk-bb-fullwidth .gbb-row:first-child .gsc-heading,
.node-168 .pk-bb-fullwidth .gbb-row:first-child .gsc-heading {
  padding: 28px 0 24px !important;
  background: transparent !important;
}

.node-166 .pk-bb-fullwidth .gbb-row:first-child .gsc-heading .sub-title,
.node-168 .pk-bb-fullwidth .gbb-row:first-child .gsc-heading .sub-title {
  font-family: var(--pk-font-head) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--pk-gold) !important;
  display: block;
  margin-bottom: 10px !important;
}

.node-166 .pk-bb-fullwidth .gbb-row:first-child .gsc-heading .desc,
.node-168 .pk-bb-fullwidth .gbb-row:first-child .gsc-heading .desc {
  color: rgba(0,0,0,0.6) !important;
  font-size: 1rem !important;
  max-width: 680px;
  margin: 0 auto !important;
}

/* =============================================================================
   CONTACT PAGE — pk-contact-* (page--contact.html.twig)
   ============================================================================= */

/* Hero */
.pk-contact-hero {
  background: linear-gradient(135deg, #0A1628 0%, #1b3d6b 100%);
  padding: 4rem 1.5rem 3.5rem;
  text-align: center;
}
.pk-contact-hero-icon { font-size: 2.5rem; margin-bottom: .75rem; line-height: 1; }
.pk-contact-hero-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .75rem;
  line-height: 1.2;
}
.pk-contact-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.7);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Two-column wrapper */
.pk-contact-page {
  background: #F7F9FC;
  padding: 3rem 1.5rem 4rem;
}
.pk-contact-wrap {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 2rem;
  align-items: start;
}

/* ── Info card (left) ── */
.pk-contact-info-card {
  background: linear-gradient(160deg, #0A1628 0%, #1b3d6b 100%);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  color: #fff;
  position: sticky;
  top: 1.5rem;
}
.pk-contact-info-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--pk-gold, #E8A020);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}
.pk-contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pk-contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.pk-contact-info-item:last-child { border-bottom: none; }
.pk-ci-icon { font-size: 1.2rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.pk-ci-body { display: flex; flex-direction: column; gap: .25rem; }
.pk-ci-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--pk-gold, #E8A020);
}
.pk-ci-value {
  font-size: .92rem;
  color: rgba(255,255,255,.82);
  line-height: 1.55;
}
.pk-ci-link { color: rgba(255,255,255,.82); text-decoration: none; }
.pk-ci-link:hover { color: var(--pk-gold, #E8A020); }

/* Social links */
.pk-contact-social {
  display: flex;
  gap: .75rem;
  margin-top: .5rem;
}
.pk-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  transition: background .2s, color .2s;
  text-decoration: none;
}
.pk-social-btn:hover { background: var(--pk-gold, #E8A020); color: #0A1628; }

/* ── Form card (right) ── */
.pk-contact-form-card {
  background: #fff;
  border-radius: 16px;
  padding: 2.25rem 2rem;
  box-shadow: 0 8px 40px rgba(10,22,40,.10);
}
.pk-contact-form-card-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--pk-navy, #0A1628);
  margin: 0 0 .4rem;
}
.pk-contact-form-card-sub {
  font-size: .92rem;
  color: #64748B;
  margin: 0 0 1.75rem;
}

/* Form field rows */
.pk-cf-row {
  margin-bottom: 1.25rem;
}
.pk-cf-row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Override parent theme .contact-feedback wrapper */
.pk-contact-form-body .contact-feedback {
  all: unset;
  display: contents;
}
.pk-contact-form-body .form-group {
  all: unset;
  display: contents;
}

/* Inputs */
.pk-contact-form-body .pk-input,
.pk-contact-form-body .form-control {
  width: 100%;
  box-sizing: border-box;
  padding: .85rem 1rem;
  border: 2px solid #E2E8F0;
  border-radius: 10px;
  font-size: .95rem;
  font-family: var(--pk-font-body, inherit);
  color: var(--pk-navy, #0A1628);
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
  outline: none;
}
.pk-contact-form-body .pk-input:focus,
.pk-contact-form-body .form-control:focus {
  border-color: var(--pk-gold, #E8A020);
  box-shadow: 0 0 0 3px rgba(232,160,32,.15);
}
.pk-contact-form-body .pk-textarea {
  min-height: 140px;
  resize: vertical;
}

/* Labels */
.pk-contact-form-body label,
.pk-contact-form-body .label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pk-navy, #0A1628);
  margin-bottom: .4rem;
}

/* Form items */
.pk-contact-form-body .form-item {
  margin-bottom: 0;
}

/* Submit button */
.pk-contact-form-body .pk-btn-submit,
.pk-contact-form-body .form-submit {
  background: var(--pk-gold, #E8A020);
  color: var(--pk-navy, #0A1628);
  border: none;
  border-radius: 10px;
  padding: .9rem 2.5rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s, transform .18s, box-shadow .18s;
  display: inline-block;
}
.pk-contact-form-body .pk-btn-submit:hover,
.pk-contact-form-body .form-submit:hover {
  background: #d4901a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232,160,32,.35);
}

/* Status messages */
.pk-contact-form-body .messages--status {
  background: #DCFCE7;
  border: 1px solid #86EFAC;
  color: #14532D;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
}

/* =============================================================================
   CONTACT PAGE — RESPONSIVE
   ============================================================================= */

@media (max-width: 900px) {
  .pk-contact-wrap {
    grid-template-columns: 1fr;
  }
  .pk-contact-info-card {
    position: static;
  }
}

@media (max-width: 600px) {
  .pk-contact-hero { padding: 2.5rem 1.25rem 2rem; }
  .pk-contact-hero-title { font-size: 1.7rem; }
  .pk-contact-page { padding: 1.5rem 1rem 2.5rem; }
  .pk-contact-form-card { padding: 1.5rem 1.25rem; }
  .pk-cf-row--half { grid-template-columns: 1fr; }
}



/* ── About section responsive ── */
.pk-about-right {
  padding-left: 60px;
}
@media (max-width: 767px) {
  .pk-about-right {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-top: 30px;
  }
}



/* ── Mobile menu text color fix ── */
@media (max-width: 991px) {
  .gva-offcanvas-mobile.open nav ul.menu li a,
  .gva-offcanvas-mobile.open ul.menu li a,
  .gva-offcanvas-mobile.open a {
    color: #ffffff !important;
  }
  .gva-offcanvas-mobile.open nav ul.menu li a:hover,
  .gva-offcanvas-mobile.open ul.menu li a:hover {
    color: var(--pk-gold) !important;
  }
  .gva-offcanvas-mobile.open nav ul.menu li {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .gva-offcanvas-mobile.open nav ul.menu li ul.menu li a {
    color: rgba(255,255,255,0.8) !important;
    font-size: 0.9rem;
    padding-left: 15px;
  }
}






/* ── Front About block mobile fix ── */
@media (max-width: 767px) {
  #block-pk-front-about .col-lg-5,
  #block-pk-front-about .col-md-12[style*="41.666"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  #block-pk-front-about .col-lg-7,
  #block-pk-front-about .col-md-12[style*="58.333"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px !important;
  }
}



/* =============================================
   MOBILE TOOLS BAR (Sign In / Register / Help / Cart)
   ============================================= */
.pk-mobile-tools {
  background-color: var(--pk-navy-mid);
  border-bottom: 1px solid rgba(232, 160, 32, 0.3);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1100;
  width: 100%;
}

.pk-mobile-tools-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px 0;
}

.pk-mobile-tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
  line-height: 1;
}

.pk-mobile-tool-item:hover,
.pk-mobile-tool-item:focus {
  color: #E8A020 !important;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.pk-mobile-tool-item.icon-signin {
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.pk-mobile-tool-item.icon-menu {
  border: none;
}

.pk-mobile-tool-item.icon-menu:hover,
.pk-mobile-tool-item.icon-menu:focus {
  background: rgba(255, 255, 255, 0.08);
}

.pk-mobile-tool-item.icon-cart {
  position: relative;
  border: none;
}

.pk-mobile-tool-item.icon-logout {
  border: 1px solid rgba(232, 160, 32, 0.5);
  color: #E8A020 !important;
}

.pk-mobile-tool-item.icon-logout:hover,
.pk-mobile-tool-item.icon-logout:focus {
  background: rgba(232, 160, 32, 0.15);
  color: #E8A020 !important;
}

.pk-cart-badge-mobile {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #E8A020;
  color: #0A1628;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

@media (max-width: 991px) {
  /* ── 侧边栏菜单重构：纯白背景，深色文字 ── */
  .mobile-menu-wrapper,
  .gva-offcanvas-mobile {
    background: #ffffff !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .mobile-menu ul li,
  .gva-offcanvas-mobile .menu-item {
    border-bottom: 1px solid #eeeeee !important;
  }

  .mobile-menu ul li a,
  .gva-offcanvas-mobile .menu-item a,
  .gva-offcanvas-mobile.open .menu-item a,
  .gva-offcanvas-mobile.open .menu-item.menu-item--collapsed a,
  .gva-offcanvas-mobile.open .menu-item.menu-item--expanded a {
    color: #333333 !important;
    padding: 15px 20px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    display: block;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .mobile-menu ul li a:active,
  .mobile-menu ul li a:hover,
  .gva-offcanvas-mobile .menu-item a:hover,
  .gva-offcanvas-mobile.open .menu-item a:hover {
    background: #f5f5f5 !important;
    color: #E8A020 !important;
  }

  /* Sign In section at bottom of sidebar */
  .gva-offcanvas-mobile::after {
    content: '';
    display: block;
    height: 1px;
    background: #eee;
    margin: 10px 20px;
  }
}

/* Topbar hidden on mobile */
@media (max-width: 991px) {
  .topbar {
    display: none;
  }
}


/* ═══════════════════════════════════════════════
   MOBILE SLIDE-OUT MENU
   ═══════════════════════════════════════════════ */

/* Scroll-lock: set by JS via body class — avoids inline-style fights */
body.pk-menu-open {
  overflow: hidden !important;
  /* Prevent iOS rubber-band scroll behind the drawer */
  position: fixed;
  width: 100%;
}

.pk-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.pk-mobile-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.pk-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 88%;
  max-width: 360px;
  background: #0A1628;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
  overflow: hidden;
}
.pk-mobile-menu.open { transform: translateX(0); }

.pk-mobile-menu-header {
  background: #132240;
  padding: 20px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  border-bottom: 2px solid #E8A020;
}
.pk-mobile-menu-brand { display: flex; align-items: center; }
/* Logo image inside the drawer */
.pk-mobile-menu-brand .site-branding-logo img,
.pk-mobile-menu-brand .site-logo img {
  max-height: 44px;
  width: auto;
  filter: brightness(0) invert(1); /* white logo on dark background */
}
.pk-mobile-close {
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 20px; cursor: pointer; padding: 4px 8px;
  transition: color 0.2s;
}
.pk-mobile-close:hover { color: #fff; }

.pk-mobile-nav { flex: 1; overflow-y: auto; padding: 8px 0; -webkit-overflow-scrolling: touch; }
.pk-mobile-nav ul.menu { list-style: none; padding: 0; margin: 0; }
.pk-mobile-nav ul.menu li { border-bottom: 1px solid rgba(255,255,255,0.05); }
.pk-mobile-nav ul.menu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 22px;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.pk-mobile-nav ul.menu li a:hover {
  background: rgba(255,255,255,0.05);
  color: #E8A020 !important;
}
.pk-mobile-nav ul.menu li.menu-item--active-trail > a,
.pk-mobile-nav ul.menu li.is-active > a {
  color: #E8A020 !important;
  background: rgba(232,160,32,0.08);
  border-left: 3px solid #E8A020;
}
.pk-mobile-nav ul.menu li a::after {
  content: "›";
  color: rgba(255,255,255,0.25);
  font-size: 18px;
}
.pk-mobile-nav ul.menu li ul.menu {
  background: rgba(0,0,0,0.2);
  padding-left: 0;
}
.pk-mobile-nav ul.menu li ul.menu li a {
  padding-left: 36px;
  font-size: 14px;
  color: rgba(255,255,255,0.75) !important;
}
.pk-mobile-nav ul.menu li ul.menu li a:hover {
  color: #E8A020 !important;
}

.pk-mobile-menu-footer {
  background: #132240;
  padding: 12px 16px;
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pk-mobile-footer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  color: rgba(255,255,255,0.7) !important;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.2s;
}
.pk-mobile-footer-item:last-child { border-bottom: none; }
.pk-mobile-footer-item:hover { color: #E8A020 !important; }

/* Anonymous sign-up prompt in drawer footer */
.pk-mobile-signup-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 8px;
  text-align: center;
}
.pk-mobile-signup-prompt span {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
}
.pk-mobile-signup-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pk-gold);
  color: var(--pk-navy) !important;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
  width: 100%;
  justify-content: center;
}
.pk-mobile-signup-btn:hover {
  background: var(--pk-gold-dark);
  color: var(--pk-navy) !important;
  transform: translateY(-1px);
}

.pk-mobile-icon { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; }
.pk-mobile-icon-label { color: #fff; font-size: 9px; }


/* ═══════════════════════════════════════════════════════════
   PK NAV ROW
   Desktop: [Logo] [Nav links flex-1] [Account icon] [CTA]
   Mobile:  [Ham]  [spacer]           [Cart block] [Account block]
   ═══════════════════════════════════════════════════════════ */

/* ── Row container ── */
.pk-nav-row {
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 4px;
}

/* ── Hamburger button ──
   Gavias base theme sets .menu-bar { position:absolute; right:35px }
   and .menu-bar span { position:absolute; background:#222 }.
   We must override with !important to neutralise both rules.         */
.pk-nav-ham {
  /* Override Gavias absolute positioning (it sets position:absolute; right:35px) */
  position: relative !important;
  right: auto !important;
  top: auto !important;
  margin-top: 0 !important;
  /* Our layout */
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 !important;
  cursor: pointer;
  background: transparent !important;
  border: none;
  z-index: 50;       /* now effective — keeps button above any siblings */
}
.pk-nav-ham span {
  /* Reset Gavias absolute positioning on spans */
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  /* Our styling */
  display: block !important;
  width: 24px !important;
  height: 2px !important;
  background: #ffffff !important;
  border-radius: 2px !important;
  flex-shrink: 0;
  opacity: 1 !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s !important;
}
.pk-nav-ham.active span:nth-child(1) { transform: translateY(8px) rotate(45deg) !important; }
.pk-nav-ham.active span:nth-child(2) { opacity: 0 !important; }
.pk-nav-ham.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg) !important; }

/* ── Logo ── */
.pk-nav-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.pk-nav-logo .site-logo img,
.pk-nav-logo img {
  max-height: 50px;
  width: auto;
  display: block;
}

/* ── Desktop nav (main menu links) ── */
.pk-nav-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ── Right-side action group ── */
.pk-nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

/* ── Icon link base ── */
.pk-nav-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
  color: var(--pk-navy);  /* dark icons on white desktop header */
}
.pk-nav-icon:hover { background: rgba(10,22,40,0.07); text-decoration: none; color: var(--pk-gold); }
.pk-nav-icon-label { font-size: 11px; font-weight: 600; color: currentColor; white-space: nowrap; }

/* Cart: gold color */
.pk-nav-icon--cart { color: var(--pk-gold); }
.pk-nav-icon--cart:hover { color: var(--pk-gold-dark); background: rgba(232,160,32,0.08); }

/* Account / Sign In: navy, hover gold */
.pk-nav-icon--account { color: var(--pk-navy); }
.pk-nav-icon--account:hover { color: var(--pk-gold); }

/* Sign Out button – subtle red on hover */
.pk-nav-icon--logout { color: var(--pk-navy); margin-left: 2px; }
.pk-nav-icon--logout:hover { color: #DC2626; }

/* ── Cart badge ── */
.pk-cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  background: #F2A900;
  color: #0A1628;
  font-size: 9px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* ── Hamburger bar (also used as .menu-bar in Gavias) ── */
.menu-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.menu-bar span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.25s;
}
.menu-bar.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-bar.active span:nth-child(2) { opacity: 0; }
.menu-bar.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ───────────────────────────────────────────────
   DESKTOP  ≥ 992px
   Hamburger hidden, logo at left, nav expands
   mobile_actions region hidden
   ─────────────────────────────────────────────── */
@media (min-width: 992px) {
  .pk-nav-ham         { display: none; }
  .pk-mobile-actions  { display: none; }           /* mobile_actions region */
  .pk-mobile-account  { display: none !important; } /* mobile account icon hidden on desktop */
  .pk-mobile-register { display: none !important; } /* mobile register btn hidden on desktop */
  .pk-desktop-account { display: flex; align-items: center; }
  .pk-desktop-only    { display: inline-flex; align-items: center; }
}

/* ───────────────────────────────────────────────
   MOBILE  ≤ 991px
   Hamburger left, logo hidden (in drawer),
   desktop nav hidden, mobile_actions region visible
   ─────────────────────────────────────────────── */
@media (max-width: 991px) {
  .pk-nav-row {
    height: 68px;   /* slightly taller to fit icon + label */
  }
  .pk-nav-ham {
    display: flex;
  }
  .pk-nav-logo .site-logo img {
    max-height: 40px;
  }
  .pk-nav-center {
    display: none;
  }
  /* Show labels on mobile – icon + text like the user wants */
  .pk-nav-icon-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
  }
  .pk-header-cta-wrap {
    display: none;
  }
  /* On mobile the header bg is dark navy – flip all icons to white */
  .pk-nav-icon,
  .pk-nav-icon--cart,
  .pk-nav-icon--account {
    color: #ffffff !important;
    padding: 6px 10px;
    gap: 4px;
  }
  .pk-nav-icon:hover,
  .pk-nav-icon--cart:hover,
  .pk-nav-icon--account:hover {
    color: var(--pk-gold) !important;
    background: rgba(255,255,255,0.1);
  }
  .pk-nav-icon svg {
    width: 22px;
    height: 22px;
  }
  /* Mobile-only account icon (sign-in / my account) */
  .pk-mobile-account {
    display: flex;
    align-items: center;
  }
  .pk-mobile-account .pk-nav-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
  }
  .pk-mobile-account .pk-nav-icon:hover { background: rgba(255,255,255,0.1); }

  /* Mobile-only register button – far right, anonymous only */
  .pk-mobile-register {
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
  }
  .pk-mobile-register:hover { background: rgba(255,255,255,0.1); }
  .pk-mobile-register-label {
    display: none; /* label hidden to keep bar tight — icon only */
  }

  /* Push action group to the right */
  .pk-nav-actions {
    margin-left: auto;
    gap: 2px;
    padding-right: 6px;
  }

  /* mobile_actions region: render blocks as inline icon items */
  .pk-mobile-actions {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  /* Strip Drupal block wrapper inside mobile_actions */
  .pk-mobile-actions .block {
    display: contents;           /* block wrapper becomes invisible in layout */
  }

  /* Account menu block → icon-style links */
  .pk-mobile-actions .menu--account,
  .pk-mobile-actions ul.menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
  }
  .pk-mobile-actions ul.menu li { list-style: none; }
  .pk-mobile-actions ul.menu li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #fff !important;
    text-decoration: none;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
    white-space: nowrap;
  }
  .pk-mobile-actions ul.menu li a:hover {
    background: rgba(255,255,255,0.1);
    color: #F2A900 !important;
  }
  /* Prepend a user icon to account menu links using pseudo-element SVG background */
  .pk-mobile-actions ul.menu li a::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
  }

  /* Commerce cart block inside mobile_actions */
  .pk-mobile-actions .cart-block,
  .pk-mobile-actions .cart-block--summary {
    display: flex;
    align-items: center;
  }
  .pk-mobile-actions .cart-block a,
  .pk-mobile-actions .cart-block--summary a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #F2A900 !important;
    text-decoration: none;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
    position: relative;
  }
  .pk-mobile-actions .cart-block a:hover { background: rgba(255,255,255,0.1); }
}

/* ═══════════════════════════════════════════════════════════
   COMMERCE CART – suppress "Keep Shopping" link globally
   (CSS backup in case AJAX refreshes a cached template)
   ═══════════════════════════════════════════════════════════ */
.cart-no-items a,
.cart-no-items .keep-shopping,
.cart-no-items p a {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE DRAWER – brand text (no logo image)
   ═══════════════════════════════════════════════════════════ */
.pk-drawer-brand { display: flex; align-items: center; }
.pk-drawer-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.pk-drawer-logo {
  height: 40px;
  width: auto;
  display: block;
  filter: none;   /* show original logo colours, no invert */
}

/* ═══════════════════════════════════════════════════════════
   MOBILE DRAWER – nav region (mobile_nav)
   Strip Drupal block wrapper; style the menu list directly
   ═══════════════════════════════════════════════════════════ */
.pk-mobile-nav .block { display: contents; }
.pk-mobile-nav .block > h2 { display: none; }     /* hide block label */
.pk-mobile-nav ul.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pk-mobile-nav ul.menu > li {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pk-mobile-nav ul.menu > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 22px;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-left 0.2s;
}
.pk-mobile-nav ul.menu > li > a::after {
  content: '›';
  color: rgba(255,255,255,0.25);
  font-size: 18px;
  line-height: 1;
}
.pk-mobile-nav ul.menu > li > a:hover,
.pk-mobile-nav ul.menu > li > a:focus {
  background: rgba(255,255,255,0.05);
  color: #E8A020 !important;
}
.pk-mobile-nav ul.menu > li.menu-item--active-trail > a,
.pk-mobile-nav ul.menu > li.is-active > a {
  color: #E8A020 !important;
  border-left: 3px solid #E8A020;
  background: rgba(232,160,32,0.07);
}
/* Sub-menu */
.pk-mobile-nav ul.menu ul.menu {
  background: rgba(0,0,0,0.18);
}
.pk-mobile-nav ul.menu ul.menu li a {
  padding: 13px 22px 13px 38px;
  font-size: 14px;
  color: rgba(255,255,255,0.75) !important;
}
.pk-mobile-nav ul.menu ul.menu li a:hover { color: #E8A020 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL MOBILE OVERFLOW SAFETY
   Prevents any form input or image from breaking the viewport width.
   ═══════════════════════════════════════════════════════════════════════════ */
.pk-free-trial-page input,
.pk-free-trial-page select,
.pk-free-trial-page textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN TOOLBAR ISOLATION
   The Drupal toolbar renders on top of the front-end theme, so global
   selectors (a, body, h1-h6, p) in pureking.css can bleed into it.
   This block hard-resets all the relevant properties inside
   #toolbar-administration so admins always see a clean, standard toolbar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Full white-theme reset for the admin toolbar ──────────────────────────
   Gavias/PureKing has broad nav + body selectors (specificity 0,2,2) that
   bleed dark-navy backgrounds and gold/white link colors into the Drupal
   admin toolbar.  We override EVERY relevant property with !important so
   the toolbar is always clean white regardless of page context.
   ─────────────────────────────────────────────────────────────────────── */

/* Container & bar -------------------------------------------------------- */
#toolbar-administration,
#toolbar-administration .toolbar-bar {
  background-color: #fff !important;
  color: #333 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10) !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* Trays (horizontal dropdown + vertical sidebar) ------------------------- */
#toolbar-administration .toolbar-tray,
#toolbar-administration .toolbar-tray-horizontal,
#toolbar-administration .toolbar-tray-vertical,
#toolbar-administration .toolbar-menu,
#toolbar-administration .toolbar-lining {
  background-color: #fff !important;
  color: #333 !important;
  border-color: #e0e0e0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
}

/* All links & buttons ---------------------------------------------------- */
#toolbar-administration a,
#toolbar-administration a:visited,
#toolbar-administration .toolbar-item,
#toolbar-administration button,
#toolbar-administration .toolbar-icon {
  color: #333 !important;
  background-color: transparent !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
  font-weight: 600 !important;
}

/* Hover / focus ---------------------------------------------------------- */
#toolbar-administration a:hover,
#toolbar-administration a:focus,
#toolbar-administration .toolbar-item:hover,
#toolbar-administration .toolbar-item:focus,
#toolbar-administration button:hover {
  color: #E8A020 !important;
  background-color: rgba(232,160,32,0.08) !important;
  text-decoration: none !important;
}

/* Active tab (currently open menu) --------------------------------------- */
#toolbar-administration .toolbar-tab.is-active > .toolbar-item,
#toolbar-administration .toolbar-tab > .toolbar-item.is-active {
  color: #E8A020 !important;
  background-color: #fff !important;
  border-color: #E8A020 !important;
}

/* Menu items at every level ---------------------------------------------- */
#toolbar-administration li,
#toolbar-administration .menu-item,
#toolbar-administration .toolbar-menu li {
  background-color: transparent !important;
  color: #333 !important;
  border-color: #f0f0f0 !important;
}

/* Toolbar icons: invert the default white SVG icons to dark --------------- */
#toolbar-administration .toolbar-icon::before,
#toolbar-administration [class*="toolbar-icon-"]::before {
  filter: invert(0) brightness(0.25) !important;
}
#toolbar-administration .toolbar-tab.is-active .toolbar-icon::before,
#toolbar-administration a:hover .toolbar-icon::before {
  filter: invert(0) brightness(0) sepia(1) hue-rotate(5deg) saturate(6) !important;
}

/* Headings inside toolbar ------------------------------------------------ */
#toolbar-administration h1,
#toolbar-administration h2,
#toolbar-administration h3,
#toolbar-administration h4,
#toolbar-administration h5,
#toolbar-administration h6 {
  font-size: inherit !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #333 !important;
  letter-spacing: normal !important;
  margin: 0 !important;
}

/* Focus outlines --------------------------------------------------------- */
#toolbar-administration a:focus,
#toolbar-administration button:focus {
  outline: 2px solid #E8A020 !important;
  outline-offset: 2px !important;
}

/* Smooth slide animation for vertical tray (mobile) ---------------------- */
#toolbar-administration .toolbar-tray {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  -webkit-overflow-scrolling: touch;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1) !important;
}

/* 9. ── Topbar: hide the navy contact bar when admin toolbar is present ──
   It creates a visual "double header" for admins on desktop.
   Anonymous visitors are unaffected.                              ── */
body.toolbar-fixed .topbar {
  display: none !important;
}

/* 10 + 11. ── Admin toolbar + PK header coexistence ──────────────────────────
   - margin-top: 0  → body already has padding-top:39px (from toolbar.js inline
     style), so no extra margin needed.
   - z-index: 400   → after toolbar.js sets .toolbar-oriented the toolbar bar
     drops to z-index:502. Our #header default is 999, which would make the PK
     header render ON TOP of the admin toolbar. Capping it at 400 keeps the
     admin toolbar visible above the site header.                            ── */
body.toolbar-fixed #header {
  margin-top: 0;
}

/* ── Standard local tasks (admin / non-user pages) ──────────────────────── */
.pk-local-tasks-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.pk-local-tasks-tabs { flex: 1 1 auto; }

.pk-local-tasks-logout { display: none; }
.path-user .pk-local-tasks-logout {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
  align-self: center;
  padding: .45rem 1rem;
  background: #fff;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  color: #64748B;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.path-user .pk-local-tasks-logout:hover { background: #FEF2F2; border-color: #FCA5A5; color: #DC2626; }
.path-user .pk-local-tasks-logout svg { flex-shrink: 0; }

/* ── PureKing user-account pill navigation ───────────────────────────────── */
.pk-user-nav-wrap {
  margin: 0 0 28px;
  background: #fff;
  border-bottom: 1px solid #F1F5F9;
  position: sticky;
  top: 0;
  z-index: 80;
}

.pk-user-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 4px;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.pk-user-nav::-webkit-scrollbar { display: none; }

/* Each <li> from Drupal */
.pk-user-nav li,
.pk-user-nav li.is-active {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

/* The <a> tag */
.pk-user-nav li a {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 14px 18px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #64748B;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .18s ease, border-color .18s ease;
  position: relative;
}

.pk-user-nav li a:hover {
  color: #0A1628;
  border-bottom-color: #E8A020;
}

.pk-user-nav li a.is-active,
.pk-user-nav li.is-active a {
  color: #E8A020;
  border-bottom-color: #E8A020;
  font-weight: 700;
}

/* Icon inside each tab */
.pk-tab-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: .75;
  transition: opacity .18s ease;
}
.pk-user-nav li a:hover .pk-tab-icon,
.pk-user-nav li a.is-active .pk-tab-icon,
.pk-user-nav li.is-active a .pk-tab-icon {
  opacity: 1;
}

.pk-tab-label { line-height: 1; }

/* Mobile: tighten padding, show icons only below 480px */
@media (max-width: 600px) {
  .pk-user-nav-wrap {
    top: 0;
  }
  .pk-user-nav li a {
    padding: 12px 14px 10px;
    font-size: 13px;
    gap: 5px;
  }
}

@media (max-width: 420px) {
  .pk-tab-label { display: none; }
  .pk-tab-icon { opacity: 1; }
  .pk-user-nav li a {
    padding: 14px 16px;
    flex-direction: column;
    gap: 0;
    border-bottom-width: 3px;
  }
  .pk-user-nav li a.is-active::after,
  .pk-user-nav li.is-active a::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #E8A020;
    margin: 3px auto 0;
  }
}

/* ── Content area mobile fixes (user pages) ──────────────────────────────── */
.path-user .layout-container {
  overflow-x: hidden;
}

.path-user table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.path-user .field--type-image img,
.path-user img {
  max-width: 100%;
  height: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   Contextual links / admin editing UI — dark-section color fix
   Problem: `#footer a { color: rgba(255,255,255,0.65) }` has specificity
   1,0,1 (ID+element) which beats the core contextual-links rules (0,3,1),
   making edit-popup links invisible (white-on-white).
   Fix: restore correct foreground colors only for the admin overlay elements
   that appear inside dark sections. NO toolbar rules — leave Claro untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* Contextual trigger button (pencil icon) visible on dark backgrounds */
#footer .contextual .trigger,
.gbb-row-wrapper .contextual .trigger {
  background-color: #fff !important;
  border-color: #aaa !important;
  color: #333 !important;
}

/* Contextual links dropdown UL — override #footer ul { padding:0 } */
#footer ul.contextual-links,
.gbb-row-wrapper ul.contextual-links {
  padding: 4px 0 !important;
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
  border-radius: 4px !important;
  min-width: 160px !important;
}

/* Contextual links list items — override #footer ul li { color:white } */
#footer ul.contextual-links li,
.gbb-row-wrapper ul.contextual-links li {
  background-color: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  color: #333 !important;
  list-style: none !important;
}
#footer ul.contextual-links li:last-child,
.gbb-row-wrapper ul.contextual-links li:last-child {
  border-bottom: none !important;
}

/* Contextual links anchors — override #footer a { color:white } */
#footer ul.contextual-links a,
.gbb-row-wrapper ul.contextual-links a {
  color: #333 !important;
  background-color: transparent !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 7px 16px !important;
  display: block !important;
}
#footer ul.contextual-links a:hover,
.gbb-row-wrapper ul.contextual-links a:hover {
  color: #000 !important;
  background-color: #f0f4ff !important;
  padding-left: 20px !important;
}

/* Gavias blockbuilder edit-block button (blue pencil overlay) */
.gavias-blockbuilder-content .link-edit-blockbuider {
  color: #fff !important;
  background-color: #4582FF !important;
}
.gavias-blockbuilder-content .link-edit-blockbuider:hover {
  color: #fff !important;
  background-color: #2d65e0 !important;
}

/* ── Contact form: fix label/input overlap ────────────────────────────────
 * Gavias template.css applies height:45px; line-height:45px to the WRAPPER
 * DIV (.js-form-item-mail / .js-form-item-name) — not just the input —
 * which forces both label + input into 45 px and causes them to overlap.
 *
 * We also restore the child-theme border/background that Gavias strips.
 * ────────────────────────────────────────────────────────────────────────── */
.contact-message-form .js-form-item-mail,
.contact-message-form .js-form-item-name {
  height: auto !important;
  line-height: normal !important;
}

/* Restore clean border/background overridden by Gavias template.css */
.contact-message-form input[type="text"],
.contact-message-form input[type="email"] {
  height: auto !important;
  line-height: normal !important;
  padding: 14px 18px !important;
  border: 2px solid var(--pk-gray) !important;
  background: var(--pk-white) !important;
  border-radius: var(--pk-radius) !important;
  box-shadow: none !important;
}
.contact-message-form input[type="text"]:focus,
.contact-message-form input[type="email"]:focus {
  border-color: var(--pk-gold) !important;
  box-shadow: 0 0 0 3px rgba(232,160,32,0.15) !important;
  outline: none !important;
}
.contact-message-form .form-item label {
  display: block !important;
  margin-bottom: 8px !important;
  height: auto !important;
  line-height: 1.4 !important;
}

/* =============================================
   COACH DETAIL — photo frame
   ============================================= */
.pk-team-photo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.pk-team-photo {
  width: 220px;
  height: 275px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(10, 22, 40, 0.18);
  position: relative;
}

.pk-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.45s ease;
}

.pk-team-photo:hover img {
  transform: scale(1.08);
}

@media (max-width: 767px) {
  .pk-team-photo {
    width: 180px;
    height: 225px;
  }
}

/* ── 首页场馆展示网格 ─────────────────────────────────────────────────── */
.pk-venues-section { background: #F4F6F9; }

.pk-venue-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.pk-venue-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(10,22,40,0.07);
  transition: transform .25s, box-shadow .25s;
}

.pk-venue-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(10,22,40,0.12);
}

.pk-venue-card__icon {
  font-size: 2.8rem;
  margin-bottom: 16px;
}

.pk-venue-card__name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0A1628;
  margin-bottom: 10px;
}

.pk-venue-card__addr,
.pk-venue-card__meta {
  font-size: 0.85rem;
  color: #4A5568;
  margin-bottom: 8px;
}

.pk-venue-card__addr i,
.pk-venue-card__meta i {
  color: #E8A020;
  margin-right: 5px;
}

.pk-venue-card__btn {
  display: inline-block;
  margin-top: 16px;
  background: #E8A020;
  color: #0A1628;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s;
}

.pk-venue-card__btn:hover {
  background: #F5B840;
  color: #0A1628;
  text-decoration: none;
}

@media (max-width: 991px) {
  .pk-venue-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .pk-venue-grid { grid-template-columns: 1fr; }
}

/* ── 微信咨询横幅 ─────────────────────────────────────────────────────── */
.pk-wechat-bar {
  background: linear-gradient(135deg, #0A1628 0%, #1E3560 100%);
  padding: 80px 0;
}

.pk-wechat-bar__inner {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

.pk-wechat-bar__text {
  flex: 1;
  min-width: 280px;
}

.pk-wechat-bar__qr {
  flex: 0 0 auto;
}

.pk-wechat-qr-box {
  width: 180px;
  height: 180px;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(232,160,32,0.4);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pk-wechat-qr-placeholder {
  text-align: center;
}

@media (max-width: 767px) {
  .pk-wechat-bar__inner { justify-content: center; text-align: center; }
  .pk-wechat-bar__text { text-align: center; }
  .pk-wechat-bar__text .pk-hero-btns,
  .pk-wechat-bar__text > div[style*="display:flex"] { justify-content: center; }
}
}