/* ============================================================
   Esperanza Farm Arts — Main Stylesheet
   ============================================================ */

/* ----- Fonts ----- */
body {
  font-family: "Albert Sans", sans-serif;
  font-weight: 400;
  color: #2d2d2d;
}

h1, h2, h3, h4, h5, h6,
.kranky {
  font-family: "Kranky", serif;
  font-weight: 400;
}

p { font-family: "Albert Sans", sans-serif; }

/* ----- Palette ----- */
:root {
  --efa-tan:     #f7efde;
  --efa-brown:   #6b4c2a;
  --efa-green:   #4a7c59;
  --efa-gold:    #c9a84c;
  --efa-rust:    #b85c38;
  --efa-dark:    #2d2d2d;
  --efa-light:   #faf7f2;
}

/* ----- Background ----- */
.efa-bg {
  background-image: url("/images/TheFarm.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

/* ----- Navbar ----- */
.efa-navbar {
  background-color: rgba(247, 239, 222, 0.96);
  border-bottom: 2px solid var(--efa-gold);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.efa-navbar .navbar-brand img { height: 50px; }

.efa-navbar .nav-link {
  font-family: "Albert Sans", sans-serif;
  font-weight: 600;
  color: var(--efa-brown) !important;
  padding: 0.5rem 0.85rem;
}

.efa-navbar .nav-link:hover,
.efa-navbar .nav-link.active {
  color: var(--efa-rust) !important;
}

.btn-efa-primary {
  background-color: var(--efa-green);
  color: #fff;
  border: none;
  font-family: "Albert Sans", sans-serif;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.4rem 1rem;
  text-decoration: none;
  display: inline-block;
}

.btn-efa-primary:hover {
  background-color: #3a6348;
  color: #fff;
}

.btn-efa-outline {
  border: 2px solid var(--efa-green);
  color: var(--efa-green);
  background: transparent;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.4rem 1rem;
  text-decoration: none;
  display: inline-block;
}

.btn-efa-outline:hover {
  background-color: var(--efa-green);
  color: #fff;
}

/* ----- Content Cards ----- */
.efa-card {
  background-color: rgba(255, 255, 255, 0.93);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.efa-card-tan {
  background-color: rgba(247, 239, 222, 0.95);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* ----- Section headings on cards ----- */
.section-heading {
  color: var(--efa-brown);
  border-bottom: 2px solid var(--efa-gold);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

/* ----- Offering / Session Cards ----- */
.offering-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: #fff;
}

.offering-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.offering-card .card-img-top {
  height: 200px;
  object-fit: cover;
}

.offering-type-badge {
  background-color: var(--efa-green);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
}

/* Session meta info */
.session-meta {
  font-size: 0.875rem;
  color: #666;
}
.session-meta i { color: var(--efa-green); }

.session-cost {
  font-size: 1.4rem;
  font-family: "Kranky", serif;
  color: var(--efa-brown);
}

/* ----- Footer ----- */
.efa-footer {
  background-color: var(--efa-dark);
  color: #ccc;
  padding: 1.2rem 0;
  margin-top: auto;
}

.efa-footer a { color: var(--efa-gold); }
.efa-footer a:hover { color: #fff; }

/* ----- Forms ----- */
.form-label { font-weight: 600; color: var(--efa-dark); }

.form-control:focus,
.form-select:focus {
  border-color: var(--efa-green);
  box-shadow: 0 0 0 0.2rem rgba(74,124,89,0.2);
}

.form-check-input:checked {
  background-color: var(--efa-green);
  border-color: var(--efa-green);
}

/* ----- Step indicator (registration flow) ----- */
.step-indicator {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.step-indicator .step {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  background: #ddd;
  color: #888;
}

.step-indicator .step.active {
  background: var(--efa-green);
  color: #fff;
}

.step-indicator .step.done {
  background: var(--efa-gold);
  color: #fff;
}

.step-indicator .step-line {
  flex: 1;
  max-width: 60px;
  height: 2px;
  background: #ddd;
  align-self: center;
}

/* ----- Admin Layout ----- */
.admin-wrapper {
  display: flex;
  min-height: calc(100vh - 60px);
}

.admin-sidebar {
  width: 240px;
  min-width: 240px;
  background-color: var(--efa-dark);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.admin-sidebar .sidebar-brand {
  color: var(--efa-gold);
  font-family: "Kranky", serif;
  font-size: 1.2rem;
  padding: 0.5rem 1.2rem 1rem;
  border-bottom: 1px solid #444;
  margin-bottom: 0.5rem;
}

.admin-sidebar .nav-link {
  color: #ccc;
  padding: 0.6rem 1.2rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
  background-color: rgba(201,168,76,0.15);
  color: var(--efa-gold);
}

.admin-sidebar .nav-section {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #777;
  padding: 0.8rem 1.2rem 0.3rem;
}

.admin-main {
  flex: 1;
  padding: 2rem;
  background: var(--efa-light);
  overflow-x: hidden;
}

.admin-main h1 {
  font-size: 1.8rem;
  color: var(--efa-brown);
  margin-bottom: 1.5rem;
}

/* Admin stats cards */
.stat-card {
  background: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  text-align: center;
}

.stat-card .stat-number {
  font-family: "Kranky", serif;
  font-size: 2.5rem;
  color: var(--efa-green);
}

.stat-card .stat-label {
  font-size: 0.85rem;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Admin table */
.admin-table th {
  background-color: var(--efa-tan);
  color: var(--efa-brown);
  font-family: "Kranky", serif;
  font-weight: 400;
}

/* ----- Status Badges ----- */
.badge-confirmed  { background-color: #198754; color: #fff; }
.badge-pending    { background-color: #fd7e14; color: #fff; }
.badge-cancelled  { background-color: #dc3545; color: #fff; }
.badge-waitlist   { background-color: #6c757d; color: #fff; }
.badge-paid       { background-color: #198754; color: #fff; }
.badge-unpaid     { background-color: #dc3545; color: #fff; }
.badge-partial    { background-color: #fd7e14; color: #fff; }
.badge-scholarship{ background-color: #0dcaf0; color: #000; }

/* ----- Printable Roster ----- */
@media print {
  .no-print, .admin-sidebar, .efa-navbar, .efa-footer, .btn, nav {
    display: none !important;
  }

  .admin-wrapper { display: block; }
  .admin-main { padding: 0; background: #fff; }

  body { font-size: 11pt; color: #000; }

  .roster-header {
    text-align: center;
    border-bottom: 2pt solid #000;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
  }

  table { width: 100%; border-collapse: collapse; }
  table th, table td { border: 1pt solid #888; padding: 4pt 6pt; font-size: 9pt; }
  table th { background: #eee !important; font-weight: bold; }
  .page-break { page-break-before: always; }
}

/* ----- Moments Strip (homepage) ----- */
.moments-strip-wrap {
  background-color: rgba(247, 239, 222, 0.92);
  border-radius: 12px;
  padding: 1.2rem 1.4rem 0.8rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.moments-strip {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--efa-gold) transparent;
}

.moments-strip::-webkit-scrollbar { height: 4px; }
.moments-strip::-webkit-scrollbar-track { background: transparent; }
.moments-strip::-webkit-scrollbar-thumb { background: var(--efa-gold); border-radius: 2px; }

.moments-strip-item {
  flex: 0 0 auto;
  width: 160px;
  text-align: center;
}

.moments-strip-item img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.moments-strip-item img:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(0,0,0,0.26);
}

.moment-caption {
  font-size: 0.72rem;
  color: var(--efa-brown);
  font-style: italic;
  margin-top: 0.35rem;
  margin-bottom: 0;
  line-height: 1.3;
}

.moments-strip-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
}

.moments-more-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--efa-green);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.moments-more-link i {
  font-size: 1.8rem;
}

.moments-more-link:hover {
  color: var(--efa-rust);
}

/* ----- About page child photos ----- */
.about-child-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.about-child-photo:hover {
  transform: scale(1.03);
}

/* ----- Gallery page ----- */
.gallery-columns {
  columns: 2;
  column-gap: 1rem;
}

@media (min-width: 768px) {
  .gallery-columns { columns: 3; }
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

.gallery-item img {
  width: 100%;
  display: block;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-item img:hover {
  transform: scale(1.02);
  box-shadow: 0 7px 22px rgba(0,0,0,0.22);
}

.gallery-caption {
  font-size: 0.78rem;
  color: var(--efa-brown);
  font-style: italic;
  padding: 0.35rem 0.1rem 0;
  line-height: 1.35;
}

/* ----- Responsive adjustments ----- */
@media (max-width: 768px) {
  .admin-wrapper { flex-direction: column; }
  .admin-sidebar { width: 100%; height: auto; position: relative; }
  .admin-main { padding: 1rem; }
  .efa-card { padding: 1.2rem; }
}