/* ======================================================================
   Cozy Pastel Theme … askfor.support
   Warm, safe, welcoming for LGBTQIA2S+, Healthcare,
   Education, and Technology support.
   Fonts: Baloo 2 (headings) + Nunito (body) via Google Fonts
   ====================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&family=Nunito:wght@400;600;700&display=swap');

/* ── Custom Properties ──────────────────────────────────────────────────── */
:root {
  --pink:           #F2B8C6;
  --lavender:       #C9C4E8;
  --mint:           #A8DFC5;
  --yellow:         #E8D88A;
  --green:          #9ECFAA;
  --peach:          #F0C4A0;
  --accent-pink:   #E07898;
  --accent-dark:   #b84d6a;
  --text:           #5A4B59;
  --text-light:    #7a6679;
  --card-bg:        #ffffff;
  --header-bg:      #F2C8D4;
  --footer-bg:      #D8CEF0;
  --border-r:       18px;
  --shadow-sm:       0 2px 8px rgba(90, 75, 89, 0.10);
  --shadow-md:       0 6px 20px rgba(90, 75, 89, 0.15);
  --shadow-lg:       0 12px 32px rgba(90, 75, 89, 0.20);
  --transition:     0.22s ease;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Body + Background ────────────────────────────────────────────────────
  background-image: /assets/images/background.jpg (cover, fixed)
*/
body {
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background-image: url('/assets/images/background.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
}

/* ── Container ────────────────────────────────────────────────────────────── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 22px;
}

/* ── Site Header / Navbar ──────────────────────────────────────────────────── */
.site-header {
  background: linear-gradient(90deg, var(--header-bg) 0%, #D8C8F0 100%);
  padding: 18px 0 14px;
  box-shadow: var(--shadow-sm);
  border-radius: 0 0 20px 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header h1 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.site-header h1 a {
  color: var(--text);
  text-decoration: none;
}

.site-header h1 a:hover,
.site-header h1 a:focus {
  color: var(--accent-pink);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.header-inner h1 {
  margin: 0;
  line-height: 1.2;
}

.header-inner .main-nav {
  margin-left: auto;
}

/* ── Badge Tray ──────────────────────────────────────────────────────────────── */
.badge-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.55);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  position: fixed;
  bottom: 14px;
  right: 14px;
  z-index: 200;
  white-space: nowrap;
}

.copyright-badge {
  font-size: 0.78rem;
  color: var(--text-light);
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(242, 184, 198, 0.40);
  border-radius: 999px;
  border: 1px solid rgba(224, 120, 152, 0.25);
  text-decoration: none;
  transition: background var(--transition);
}

.copyright-badge:hover,
.copyright-badge:focus {
  background: rgba(242, 184, 198, 0.70);
  outline: none;
}

.license-badge {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 4px;
  overflow: hidden;
  transition: opacity var(--transition);
  border: 1px solid rgba(201, 196, 232, 0.40);
}

.license-badge img {
  display: block;
  height: 20px;
  width: auto;
}

.license-badge:hover,
.license-badge:focus {
  opacity: 0.80;
  outline: none;
}

/* ── Navigation ────────────────────────────────────────────────────────────── */
.main-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-mascot {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-right: 4px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.main-nav a {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.60);
  color: var(--text);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition:
    background var(--transition),
    color var(--transition),
    box-shadow var(--transition);
  border: 1.5px solid rgba(201, 196, 232, 0.50);
}

.main-nav a:hover,
.main-nav a:focus {
  background: var(--pink);
  color: var(--accent-dark);
  box-shadow: 0 2px 10px rgba(224, 120, 152, 0.20);
  outline: none;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  text-align: center;
  margin-bottom: 48px;
  padding: 40px 28px 36px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--border-r);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
}

.hero h2 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
}

.hero p {
  font-size: 1.1rem;
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto;
}

/* ── Blurb Box (pink rounded panel) ──────────────────────────────────────── */
/* Soft pink background panel with 24px border-radius, pink glow shadow, and  */
/* a crayon-style wobbly border. Used on the "How This Site Works" section.   */
.blurb-box {
  /* Gradient background lives here — no filter/backdrop-filter on this element
     so the gradient is never rasterized through the displacement map.           */
  background: linear-gradient(90deg, var(--header-bg) 0%, #D8C8F0 100%);
  border-radius: 24px;
  padding: 36px 32px;
  margin-bottom: 40px;
  box-shadow:
    0 0 0 3px rgba(224, 120, 152, 0.45),
    0 8px 28px rgba(224, 120, 152, 0.25);
  /* No border here — the ::before pseudo-element draws the wobbly crayon border */
  border: none;
  position: relative;
  overflow: visible; /* allow ::before inset to paint outside if needed */
}

/* Crayon-wobble border layer — lives on ::before so the filter operates only on
   the SVG stroke paths and never rasterizes the gradient background above.      */
.blurb-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  z-index: 0;
  /* Inline SVG: dashed rounded-rect path, warped by feTurbulence displacement  */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='crayon' x='-4%25' y='-15%25' width='108%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.025 0.04' numOctaves='3' seed='2' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='2.2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='4' y='4' width='992' height='192' rx='22' ry='22' fill='none' stroke='%23E07898' stroke-width='4' stroke-dasharray='28%2C14' filter='url(%23crayon)'/%3E%3Crect x='4' y='4' width='992' height='192' rx='22' ry='22' fill='none' stroke='%23F0B0C0' stroke-width='2' stroke-dasharray='28%2C14' stroke-dashoffset='8' opacity='0.55' filter='url(%23crayon)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Ensure content sits above the ::before border layer */
.blurb-box > * {
  position: relative;
  z-index: 1;
}

/* Ensure .page-header does not override .blurb-box when both classes are present */
.page-header.blurb-box {
  background: linear-gradient(90deg, var(--header-bg) 0%, #D8C8F0 100%);
  border-radius: 24px;
  box-shadow:
    0 0 0 3px rgba(224, 120, 152, 0.45),
    0 8px 28px rgba(224, 120, 152, 0.25);
}

/* ── Category Cards Grid ────────────────────────────────────────────────────── */
.category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}

/* ── Card (shared) ──────────────────────────────────────────────────────────── */
.card,
.resource-card {
  background: var(--card-bg);
  padding: 26px 24px;
  border-radius: var(--border-r);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1.5px solid rgba(201, 196, 232, 0.80);
}

.card:hover,
.card:focus {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  outline: none;
  border-color: var(--accent-pink);
}

.card h3 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.card p {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.55;
}

/* ── Resource List ──────────────────────────────────────────────────────────── */
.resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.resource-card:hover,
.resource-card:focus {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  outline: none;
  border-color: var(--accent-pink);
}

.resource-card h3 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.3;
}

.resource-card .desc {
  font-size: 0.88rem;
  color: var(--text-light);
  margin-bottom: 10px;
  line-height: 1.5;
}

.resource-card p {
  font-size: 0.88rem;
  color: var(--text-light);
  margin-bottom: 6px;
}

.resource-card a {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-dark);
  background: rgba(242, 184, 198, 0.30);
  border: 1.5px solid rgba(224, 120, 152, 0.40);
  border-radius: 999px;
  padding: 3px 12px;
  text-decoration: none;
  transition:
    background var(--transition),
    color var(--transition);
  margin-top: 4px;
}

.resource-card a:hover,
.resource-card a:focus {
  background: var(--pink);
  color: var(--accent-dark);
  outline: none;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: 64px;
  padding: 28px 0 56px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-light);
  background: rgba(216, 206, 240, 0.55);
  border-radius: 20px 20px 0 0;
  backdrop-filter: blur(4px);
}

.site-footer a {
  color: var(--accent-dark);
  text-decoration: none;
  font-weight: 700;
}

.site-footer a:hover,
.site-footer a:focus {
  text-decoration: underline;
  outline: none;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .site-header {
    padding: 12px 0 10px;
  }

  .site-header h1 {
    font-size: 1.1rem;
  }

  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 4px;
  }

  .main-nav a {
    font-size: 0.82rem;
    padding: 4px 11px;
  }

  .hero {
    padding: 28px 16px 24px;
  }

  .hero h2 {
    font-size: 1.5rem;
  }

  .category-cards,
  .resource-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 12px;
  }

  .card,
  .resource-card {
    padding: 18px 16px;
  }

  .hero h2 {
    font-size: 1.3rem;
  }

  .site-footer {
    padding: 20px 0 52px;
  }
}