/**
 * Te Puna Hiro'a — Mana Flow Custom Styles
 * Design: Oceanic Naturalism × Japanese Wabi-Sabi
 * Palette: Deep Ocean Teal × Living Coral × Sand Ivory
 */

/* ─── CSS Custom Properties ─────────────────────────────── */
:root {
  --tph-teal: #0A3D5C;
  --tph-teal-light: #1a5a7a;
  --tph-coral: #E8725A;
  --tph-coral-dark: #c95d47;
  --tph-amber: #C4883A;
  --tph-sand: #F5F0E8;
  --tph-sand-dark: #EDE5D8;
  --tph-navy: #0D1B2A;
  --tph-navy-light: #1B2D3E;
  --tph-text: #1a2a3a;
  --tph-text-muted: #5a6a7a;
  --tph-white: #FEFCF9;
  --tph-shadow-sm: 0 2px 8px rgba(10,61,92,0.06);
  --tph-shadow-md: 0 8px 24px rgba(10,61,92,0.08);
  --tph-shadow-lg: 0 16px 40px rgba(10,61,92,0.1);
  --tph-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(232, 114, 90, 0.2);
  color: var(--tph-text);
}

img {
  border-radius: 2px;
}

/* ─── Header ────────────────────────────────────────────── */
.tph-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(254, 252, 249, 0.92) !important;
  border-bottom: 1px solid var(--tph-sand-dark);
  transition: box-shadow var(--tph-transition);
}

.tph-header.scrolled {
  box-shadow: var(--tph-shadow-sm);
}

/* Navigation login button */
.tph-nav-login a {
  background: var(--tph-teal);
  color: var(--tph-white) !important;
  padding: 0.4rem 1.2rem;
  border-radius: 2px;
  transition: background var(--tph-transition);
}

.tph-nav-login a:hover {
  background: var(--tph-teal-light);
}

/* ─── Hero ──────────────────────────────────────────────── */
.tph-hero {
  position: relative;
}

.tph-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--tph-white));
  pointer-events: none;
}

/* ─── News Ticker ───────────────────────────────────────── */
.tph-news-bar {
  position: relative;
  z-index: 10;
}

.tph-news-ticker {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.25rem 0;
}

.tph-news-ticker::-webkit-scrollbar {
  display: none;
}

.tph-news-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--tph-text);
  font-size: 0.85rem;
  transition: color var(--tph-transition);
  flex-shrink: 0;
}

.tph-news-item:hover {
  color: var(--tph-coral);
}

.tph-news-item time {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--tph-text-muted);
  flex-shrink: 0;
}

.tph-no-news {
  text-align: center;
  color: var(--tph-text-muted);
  font-size: 0.85rem;
}

/* ─── Program Cards ─────────────────────────────────────── */
.tph-program-card {
  transition: transform var(--tph-transition), box-shadow var(--tph-transition);
  box-shadow: var(--tph-shadow-sm);
}

.tph-program-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tph-shadow-md);
}

/* ─── Event Cards ───────────────────────────────────────── */
.tph-events-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tph-event-card {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--tph-white);
  border-radius: 2px;
  box-shadow: var(--tph-shadow-sm);
  transition: box-shadow var(--tph-transition);
}

.tph-event-card:hover {
  box-shadow: var(--tph-shadow-md);
}

.tph-event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  padding: 0.5rem;
  background: var(--tph-teal);
  color: white;
  border-radius: 2px;
  flex-shrink: 0;
}

.tph-event-month {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tph-event-day {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

.tph-event-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tph-event-info h4 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 500;
}

.tph-event-info h4 a {
  text-decoration: none;
  color: var(--tph-text);
  transition: color var(--tph-transition);
}

.tph-event-info h4 a:hover {
  color: var(--tph-coral);
}

.tph-event-location,
.tph-event-time,
.tph-event-price {
  font-size: 0.8rem;
  color: var(--tph-text-muted);
}

/* ─── Video Cards ───────────────────────────────────────── */
.tph-video-card,
.tph-archive-card {
  transition: transform var(--tph-transition), box-shadow var(--tph-transition);
  box-shadow: var(--tph-shadow-sm);
  overflow: hidden;
}

.tph-video-card:hover,
.tph-archive-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tph-shadow-md);
}

/* ─── Video Player ──────────────────────────────────────── */
.tph-video-player,
.tph-video-player-wrapper {
  overflow: hidden;
  border-radius: 4px;
  box-shadow: var(--tph-shadow-lg);
}

.tph-bunny-player {
  position: relative;
  padding-top: 56.25%;
  background: var(--tph-navy);
  border-radius: 4px;
  overflow: hidden;
}

.tph-bunny-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── Page Header (dark) ────────────────────────────────── */
.tph-page-header {
  position: relative;
}

.tph-page-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--tph-sand));
  pointer-events: none;
}

/* ─── CTA Section ───────────────────────────────────────── */
.tph-cta-section {
  position: relative;
}

/* ─── Footer ────────────────────────────────────────────── */
.tph-footer a {
  transition: color var(--tph-transition);
}

.tph-footer a:hover {
  color: var(--tph-coral) !important;
}

/* ─── MemberPress Integration ───────────────────────────── */
.mepr-login-form,
.mepr-signup-form {
  max-width: 480px;
  margin: 0 auto;
  padding: 2rem;
  background: var(--tph-white);
  border-radius: 2px;
  box-shadow: var(--tph-shadow-md);
}

.mepr-login-form label,
.mepr-signup-form label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tph-text-muted);
}

.mepr-login-form input[type="text"],
.mepr-login-form input[type="password"],
.mepr-login-form input[type="email"],
.mepr-signup-form input[type="text"],
.mepr-signup-form input[type="password"],
.mepr-signup-form input[type="email"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--tph-sand-dark);
  border-radius: 2px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  transition: border-color var(--tph-transition);
}

.mepr-login-form input:focus,
.mepr-signup-form input:focus {
  border-color: var(--tph-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 61, 92, 0.1);
}

.mepr-login-form input[type="submit"],
.mepr-signup-form input[type="submit"] {
  background: var(--tph-coral);
  color: white;
  border: none;
  padding: 0.9rem 2rem;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--tph-transition);
  width: 100%;
}

.mepr-login-form input[type="submit"]:hover,
.mepr-signup-form input[type="submit"]:hover {
  background: var(--tph-coral-dark);
}

/* ─── Animations ────────────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tph-animate-in {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
  .tph-event-card {
    flex-direction: column;
    gap: 1rem;
  }

  .tph-event-date {
    flex-direction: row;
    gap: 0.5rem;
    min-width: auto;
    padding: 0.4rem 0.75rem;
  }

  .tph-news-ticker {
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .tph-hero h1 {
    font-size: 2rem !important;
  }
}

/* ─── Print Styles ──────────────────────────────────────── */
@media print {
  .tph-header,
  .tph-footer,
  .tph-cta-section,
  .tph-news-bar {
    display: none;
  }
}