:root {
  --color-primary: #B89A60;
  --color-black: #111111;
  --color-white: #ffffff;
  --color-muted: #6b6b6b; /* subtle grey for secondary text */
  --color-border: #eaeaea; /* light border */
}

/* Google Fonts: Nanum Myeongjo (for headings) and League Spartan (for body) */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=League+Spartan:wght@300;400;500;600;700;800&display=swap');

html, body {
  font-family: 'League Spartan', 'Spartan', Helvetica, Arial, Lucida, sans-serif;
  color: var(--color-white);
  background: #000000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure page wrapper and content inherit the black background */
.page-wrapper, .site-content, .pbmit-bg-color-light, .pbmit-bg-color-secondary, body {
  background-color: #000000 !important;
}

/* Adjust default text colors for readability on black */
body, p, li, a, span, h1, h2, h3, h4, h5, h6 {
  color: var(--color-white);
}

/* Muted text becomes a soft grey on black */
:root {
  --color-muted: #c9c9c9;
  --color-border: #222222;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Nanum Myeongjo', serif;
  color: var(--color-white);
  letter-spacing: 0.2px;
}

/* Primary accents */
.a-primary, .text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }

/* Buttons general normalization to elegant style */
.btn, .pbmit-rev-btn, a.btn, button {
  font-family: inherit;
}
.btn-primary, .pbmit-rev-btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
}
.btn-primary:hover, .pbmit-rev-btn:hover {
  filter: brightness(0.95);
}

/* Slider title override (remove Orbitron look) */
.pbmit-slide-title, .pbmit-slide-title-stoke {
  font-family: 'Nanum Myeongjo', serif !important;
  text-transform: none;
}

/* Sections spacing and subtle elegance */
.section-welcome, .section-services, .section-classes {
  padding: 60px 0;
}
.section-welcome p, .section-services p, .section-classes p {
  color: var(--color-muted);
}

/* Service and class boxes with clean borders */
.service-box, .class-box {
  background: #0a0a0a;
  border: 1px solid var(--color-border);
  padding: 24px;
  border-radius: 10px;
  transition: box-shadow .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
}
.service-box:hover, .class-box:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

/* Make class boxes have uniform height with scrollable text area */
.class-box .class-image { flex-shrink: 0; }
.class-box .class-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Limit the description area height and enable scrolling for overflow to keep blocks homogeneous */
 .class-box .class-info .class-desc {
  position: relative;
  max-height: 260px; /* Only the text block scrolls */
  overflow: auto;
  scrollbar-width: thin; /* Firefox */
  overflow-y: scroll; /* always show vertical scrollbar when applicable */
  scrollbar-gutter: stable both-edges; /* keep space for scrollbar */
}
/* Strong visible scrollbar styles */
.class-box .class-info .class-desc::-webkit-scrollbar { height: 10px; width: 10px; }
.class-box .class-info .class-desc::-webkit-scrollbar-track { background: rgba(184,154,96,0.15); border-radius: 8px; }
.class-box .class-info .class-desc::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 8px; border: 2px solid rgba(0,0,0,0.6); }
/* Firefox */
.class-box .class-info .class-desc { scrollbar-color: var(--color-primary) rgba(184,154,96,0.15); }

/* Subtle scroll hint (fade at bottom) */
.class-box .class-info .class-desc::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,10,10,0), rgba(10,10,10,0.9));
}

/* Ensure CTA button stays visible and non-scrolling */
.class-box .class-info .btn { align-self: flex-start; margin-top: 8px; }

/* Marquee area adjustments if dark */
.pbmit-bg-color-blackish, .pbmit-marquee-effect-section {
  background-color: var(--color-black) !important;
}
.pbmit-marquee-effect-section h2, .pbmit-marquee-effect-section .pbmit-element-title {
  color: var(--color-white) !important;
  font-family: 'Nanum Myeongjo', serif;
}

/* Links */
a { color: var(--color-primary); }
a:hover { color: #a88752; }