/* =========================
RESET / BASE
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
line-height: 1.6;
color: #1a1a1a;
background: #ffffff;
}

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

/* =========================
LAYOUT
========================= */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

.container.narrow {
max-width: 750px;
}

.container.calendar-container {
max-width: 1400px;
}

.section {
padding: 80px 0;
}

.section-alt {
background: #f7f7f7;
}

.section-dark {
background: #111;
color: #fff;
}

/* =========================
NAVY SECTION (UPCOMING CLASSES)
========================= */
.section-navy {
background: linear-gradient(180deg, #0d1b2a 0%, #0a1622 100%);
color: #ffffff;
border-top: 2px solid #d4af37;
}

.section-navy p {
color: #d0d6dc;
}

.section-navy .section-label {
color: #d4af37;
}

.section-navy h2 {
color: #ffffff;
}

/* Softer card for dark background */
.section-navy .calendar-card {
background: #f9fafb;
border: 1px solid rgba(255, 255, 255, 0.08);
}

/* =========================
HEADER / NAV
========================= */
.site-header {
background: #111;
color: #fff;
padding: 18px 0;
}

.nav-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}

.header-logo {
width: 200px;
height: 120px;
object-fit: contain;
}

.main-nav {
display: flex;
gap: 16px;
}

.main-nav a {
color: #fff;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s ease;
}

.main-nav a:hover {
color: #d4af37;
}

/* =========================
HERO
========================= */
.hero {
position: relative;
background:
linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
url("images/arc-hero.png") center/cover no-repeat;
color: #fff;
padding: 140px 0;
}

.hero-text h1 {
font-size: 2.6rem;
margin-bottom: 20px;
}

.hero-subtext {
margin-bottom: 25px;
}

.eyebrow {
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 1px;
color: #d4af37;
margin-bottom: 10px;
}

/* =========================
BUTTONS
========================= */
.btn {
display: inline-block;
padding: 12px 20px;
border-radius: 4px;
text-decoration: none;
font-size: 0.9rem;
margin-right: 10px;
}

.btn-primary {
background: #d4af37;
color: #000;
}

.btn-secondary {
border: 1px solid #fff;
color: #fff;
}

/* =========================
TRUST BAR
========================= */
.trust-bar {
margin-top: 30px;
font-size: 0.8rem;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.trust-bar span {
background: rgba(255, 255, 255, 0.1);
padding: 6px 10px;
border-radius: 3px;
}

/* =========================
TYPOGRAPHY
========================= */
.section-label {
font-size: 0.75rem;
text-transform: uppercase;
color: #d4af37;
margin-bottom: 10px;
}

h2 {
font-size: 2rem;
margin-bottom: 20px;
}

p {
margin-bottom: 15px;
}

/* =========================
CALENDAR
========================= */
.calendar-intro {
text-align: center;
max-width: 720px;
margin: 0 auto 2rem auto;
}

.calendar-card {
border-radius: 10px;
padding: 16px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.calendar-card iframe {
width: 100%;
height: 1000px;
border: 0;
border-radius: 6px;
}

/* =========================
FOOTER
========================= */
.site-footer {
background: #111;
color: #fff;
padding: 30px 0;
text-align: center;
}

/* =========================
RESPONSIVE
========================= */
@media (max-width: 900px) {
.calendar-card iframe {
height: 800px;
}

.nav-wrap {
flex-direction: column;
gap: 10px;
}
}

@media (max-width: 600px) {
.calendar-card iframe {
height: 700px;
}

.header-logo {
width: 150px;
height: auto;
}
}