/* ============================================================
   Ridgeline Professional Development Ltd — Custom Styles
   Tailwind handles layout & utility classes; this file covers
   transitions, animations, and states that need real CSS.
   ============================================================ */

/* ---- Base ------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  color: #0c4a6e; /* brand-800 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Epilogue', ui-sans-serif, system-ui, sans-serif;
}

/* ---- Scroll-animation (Fade In Up) ----------------------- */
.animate-hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Header scroll state --------------------------------- */
header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

header.header-scrolled {
  background-color: rgba(240, 249, 255, 0.95); /* brand-50 w/ slight transparency */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---- Mobile menu (slide-down) ----------------------------- */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease;
  opacity: 0;
}

.mobile-menu.open {
  max-height: 400px;
  opacity: 1;
}

/* ---- Buttons — micro-interaction -------------------------- */
.btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 14px rgba(8, 47, 73, 0.18);
}

.btn:active {
  transform: scale(0.98);
}

/* ---- Cards — hover lift ----------------------------------- */
.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

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

/* ---- FAQ accordion ---------------------------------------- */
details summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}

details summary::-webkit-details-marker,
details summary::marker {
  display: none;
  content: '';
}

details summary::after {
  content: '+';
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 600;
  color: #0369a1; /* brand-700 */
  transition: transform 0.25s ease;
}

details[open] summary::after {
  content: '\2212'; /* minus sign */
  transform: translateY(-50%) rotate(180deg);
}

details .faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding-top: 0;
  padding-bottom: 0;
}

details[open] .faq-content {
  max-height: 500px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* ---- Form focus states ------------------------------------ */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #0ea5e9; /* brand-500 */
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input.error,
textarea.error,
select.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.error-message {
  color: #ef4444;
  font-size: 0.8rem;
  margin-top: 0.25rem;
  display: none;
}

.error-message.visible {
  display: block;
}

/* ---- Cookie banner ---------------------------------------- */
.cookie-banner {
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform: translateY(100%);
  opacity: 0;
}

.cookie-banner.visible {
  transform: translateY(0);
  opacity: 1;
}

/* ---- Sticky-header scroll offset for anchor links --------- */
section[id],
div[id] {
  scroll-margin-top: 80px;
}

/* ---- Print styles ----------------------------------------- */
@media print {
  header,
  footer,
  .cookie-banner,
  .mobile-menu,
  nav {
    display: none !important;
  }

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

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    color: #555;
  }
}