/* ===============================
   CEDAR HILLS WARD SUNDAY SCHOOL STYLESHEET
   
   This CSS provides a clean, professional design for the Sunday School website.
   It includes responsive layouts, light/dark mode support, and accessibility features.
   
   STRUCTURE:
   1. CSS Variables (colors, spacing, fonts)
   2. Base/Reset Styles
   3. Layout Container
   4. Header (branding + navigation)
   5. Main Content Styles
   6. Footer
   7. Responsive Breakpoints
   =============================== */


/* ===============================
   1. CSS VARIABLES
   Define all colors, spacing, and sizes here for easy customization
   =============================== */
:root {
  /* LAYOUT */
  --content-max: 68rem;              /* Maximum width for content (1088px) */
  
  /* COLORS - Monochromatic with subtle blue accent */
  --text: #1a1a1a;                   /* Main text color - almost black */
  --text-muted: #666666;             /* Secondary text - medium gray */
  --bg: #ffffff;                     /* Page background - white */
  --bg-soft: #f8f9fa;                /* Soft background for cards/sections */
  --border: #e0e0e0;                 /* Border color - light gray */
  --accent: #2c5282;                 /* Accent color - muted blue */
  --accent-soft: #edf2f7;            /* Soft accent background */
  --link: #2563eb;                   /* Link color - brighter blue */
  --link-visited: #7c3aed;           /* Visited link - purple */
  
  /* TYPOGRAPHY */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;  /* For headings/emphasis */
  --fs-base: 16px;                   /* Base font size */
  --fs-small: 0.875rem;              /* Small text (14px) */
  --fs-large: 1.125rem;              /* Large text (18px) */
  --line-height: 1.6;                /* Comfortable reading line-height */
  
  /* SPACING SCALE - Consistent spacing throughout */
  --space-xs: 0.25rem;               /* 4px - very tight spacing */
  --space-sm: 0.5rem;                /* 8px - small spacing */
  --space-md: 1rem;                  /* 16px - medium spacing */
  --space-lg: 1.5rem;                /* 24px - large spacing */
  --space-xl: 2rem;                  /* 32px - extra large spacing */
  
  /* COMPONENT SIZES */
  --radius: 8px;                     /* Border radius for cards/buttons */
  --header-height: auto;             /* Header height - auto for flexibility */
}

/* DARK MODE COLORS
   These override the light mode colors when user prefers dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #e8e8e8;                 /* Light text on dark bg */
    --text-muted: #a0a0a0;           /* Muted text in dark mode */
    --bg: #0f0f0f;                   /* Very dark background */
    --bg-soft: #1a1a1a;              /* Slightly lighter dark bg */
    --border: #2a2a2a;               /* Dark border */
    --accent: #4a90e2;               /* Lighter blue for dark mode */
    --accent-soft: #1a2332;          /* Dark blue background */
    --link: #60a5fa;                 /* Bright blue for visibility */
    --link-visited: #a78bfa;         /* Bright purple for visited */
  }
}


/* ===============================
   2. BASE & RESET STYLES
   Reset browser defaults and set foundation styles
   =============================== */
   
/* Apply border-box to everything - makes sizing predictable */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base HTML and body styles */
html {
  height: 100%;
  scroll-behavior: smooth;           /* Smooth scrolling for anchor links */
}

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;  /* Better font rendering on Mac */
  -moz-osx-font-smoothing: grayscale;
}

/* Link styles */
a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;       /* Space between text and underline */
  transition: color 0.2s ease;      /* Smooth color transition on hover */
}

a:visited {
  color: var(--link-visited);
}

a:hover {
  text-decoration-thickness: 2px;   /* Thicker underline on hover */
}

/* Accessible focus styles - visible keyboard navigation */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Selection color - what shows when user highlights text */
::selection {
  background: var(--accent-soft);
  color: var(--text);
}


/* ===============================
   3. LAYOUT CONTAINER
   Centers content and adds side padding
   =============================== */
.container {
  max-width: var(--content-max);    /* Don't exceed max width */
  margin: 0 auto;                   /* Center horizontally */
  padding: 0 var(--space-md);       /* Side padding for mobile */
}


/* ===============================
   4. SITE HEADER
   Contains branding (title + byline) and navigation
   
   DESKTOP LAYOUT:
   ┌─────────────────────────────────────────┐
   │ [Title + Byline]          [Nav] [Nav]   │
   └─────────────────────────────────────────┘
   
   MOBILE LAYOUT (stacked):
   ┌─────────────────┐
   │ Title           │
   │ Byline          │
   │ [≡ Menu]        │
   └─────────────────┘
   =============================== */

.site-header {
  border-bottom: 1px solid var(--border);
  padding: var(--space-md) 0;
  background: var(--bg);
  position: sticky;                  /* Stick to top when scrolling */
  top: 0;
  z-index: 100;                      /* Stay above other content */
}

/* Header container - uses flexbox for left/right layout */
.site-header .container {
  display: flex;
  justify-content: space-between;   /* Space between left (brand) and right (nav) */
  align-items: center;              /* Vertically center items */
  gap: var(--space-lg);             /* Space between brand and nav */
  flex-wrap: wrap;                  /* Allow wrapping on small screens */
}

/* BRANDING SECTION (left side) */
.site-header .brand {
  /* No special styles needed - flex handles layout */
}

.site-header .brand .title {
  font-family: var(--font-serif);   /* Serif font for traditional feel */
  font-size: 1.5rem;                /* 24px */
  font-weight: 700;                 /* Bold */
  color: var(--text);
  line-height: 1.2;
  margin-bottom: var(--space-xs);   /* Small space before byline */
}

.site-header .brand .subtitle {
  font-size: var(--fs-small);       /* Smaller than title */
  color: var(--text-muted);         /* Muted color */
  line-height: 1.3;
}

/* NAVIGATION SECTION (right side) */
.site-header .nav {
  display: flex;
  gap: var(--space-sm);             /* Space between nav items */
  align-items: center;
}

/* Individual nav links/buttons */
.site-header .nav .btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;            /* Remove underline */
  font-weight: 600;
  font-size: var(--fs-small);
  transition: all 0.2s ease;        /* Smooth hover transition */
  cursor: pointer;
}

.site-header .nav .btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Active page indicator */
.site-header .nav .btn.is-active,
.site-header .nav .btn[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* HAMBURGER MENU (mobile only) */
.menu-toggle {
  display: none;                    /* Hidden by default (desktop) */
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-sm);
  cursor: pointer;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
}

.menu-toggle:hover {
  background: var(--bg-soft);
  border-color: var(--accent);
}

/* Mobile menu styles (shown when hamburger is clicked) */
@media (max-width: 768px) {
  /* Show hamburger button */
  .menu-toggle {
    display: block;
  }
  
  /* Hide nav by default on mobile */
  .site-header .nav {
    display: none;
    width: 100%;                    /* Full width when open */
    flex-direction: column;         /* Stack vertically */
    gap: var(--space-sm);
    padding-top: var(--space-md);
  }
  
  /* Show nav when menu is open */
  .site-header .nav.is-open {
    display: flex;
  }
  
  /* Full-width nav buttons on mobile */
  .site-header .nav .btn {
    width: 100%;
    text-align: center;
  }
  
  /* Make header container vertical on mobile */
  .site-header .container {
    flex-direction: column;
    align-items: flex-start;
  }
  
  /* Center brand on mobile */
  .site-header .brand {
    width: 100%;
    text-align: center;
  }
  
  /* Position hamburger in top-right */
  .site-header .container {
    position: relative;
  }
  
  .menu-toggle {
    position: absolute;
    top: 0;
    right: var(--space-md);
  }
}


/* ===============================
   5. MAIN CONTENT STYLES
   Typography and spacing for content
   =============================== */

main {
  padding: var(--space-xl) 0;       /* Top and bottom padding */
  min-height: 60vh;                 /* Ensure footer stays at bottom */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: 1.3;
  color: var(--text);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
}

h1 {
  font-size: 2rem;                  /* 32px */
  font-weight: 700;
  margin-top: 0;                    /* No top margin on first heading */
}

h2 {
  font-size: 1.5rem;                /* 24px */
  font-weight: 700;
}

h3 {
  font-size: 1.25rem;               /* 20px */
  font-weight: 600;
}

/* Paragraphs */
p {
  margin-bottom: var(--space-md);
}

p.lead {
  font-size: var(--fs-large);       /* Larger intro text */
  color: var(--text-muted);
}

/* Lists */
ul, ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-xl);
}

li {
  margin-bottom: var(--space-sm);
}

/* Horizontal rule */
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-xl) 0;
}

/* Utility classes */
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.meta {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Cards - for containing sections of content */
.card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Section - for major content divisions */
.section {
  margin-bottom: var(--space-xl);
}


/* ===============================
   6. SITE FOOTER
   Bottom page information
   =============================== */

.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-xl) 0;
  margin-top: var(--space-xl);
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.site-footer a {
  color: var(--link);
}

.site-footer p {
  margin-bottom: var(--space-sm);
}


/* ===============================
   7. RESPONSIVE BREAKPOINTS
   Adjust layout for different screen sizes
   =============================== */

/* Tablet and below (768px) */
@media (max-width: 768px) {
  :root {
    --fs-base: 15px;                /* Slightly smaller base font */
  }
  
  h1 { font-size: 1.75rem; }        /* Smaller headings on mobile */
  h2 { font-size: 1.375rem; }
  h3 { font-size: 1.125rem; }
  
  main {
    padding: var(--space-lg) 0;     /* Less padding on mobile */
  }
}

/* Small mobile (480px) */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-sm);     /* Less side padding on small screens */
  }
  
  .card {
    padding: var(--space-md);       /* Less card padding */
  }
}


/* ===============================
   8. ACCESSIBILITY IMPROVEMENTS
   Better experience for all users
   =============================== */

/* Skip to main content link (for screen readers) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: white;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  top: 0;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}




/* ===============================
   9. CALENDAR & RESOURCES ACCORDIONS
   Shared styles for <details class="section"> accordions used by:
   - /page/cal/cal2026.html (calendar)
   - /page/resources.html (resources)
   These were previously inline on the calendar page; moved here for reuse.
   =============================== */

/* Accordion section container (outer <details class="section">) */
details.section { /* Card-like container with soft background */
  border: 1px solid var(--border); /* subtle border | integrates with site theme */
  border-radius: var(--radius);    /* consistent radius per design system */
  background: var(--bg-soft);      /* soft background for contrast against page bg */
  margin-bottom: var(--space-lg);  /* spacing between sections */
  overflow: hidden;                /* clip summary corners when rounded */
}

/* Accordion summary (clickable heading row) */
details.section > summary { /* top bar that toggles open/closed */
  cursor: pointer;                     /* clear affordance */
  list-style: none;                    /* remove default marker */
  padding: var(--space-md) var(--space-lg); /* comfortable hit area */
  background: var(--accent-soft);      /* subtle accent background */
  border-bottom: 1px solid var(--border);
  font-family: var(--font-serif);      /* matches headings elsewhere */
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
  user-select: none;                   /* avoid accidental text selections */
}

/* Hide default disclosure markers in WebKit/Blink */
details.section > summary::-webkit-details-marker { display: none; }

/* Custom triangle marker that rotates when open */
details.section > summary::before { /* ▶ caret */
  content: '▶';
  display: inline-block;
  margin-right: 0.5rem;
  transform-origin: 50% 55%;
  transition: transform 0.2s ease;
}
details.section[open] > summary::before { transform: rotate(90deg); }

/* Inner padding wrappers (calendar uses .weeks; resources uses .links) */
.weeks, /* calendar’s wrapper */
.links  /* resources’ wrapper */ {
  padding: var(--space-md);
  background: var(--bg); /* slight contrast from .section bg */
}

/* Week rows (calendar only): <details class="week"> and its summary */
details.week {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  background: var(--bg);
}
details.week > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
details.week > summary:hover { background: var(--bg-soft); }

/* Calendar sub-elements (kept for visual parity with 2026 calendar) */
.week-date {
  font-weight: 700;
  color: var(--accent);
  min-width: 9rem;
  white-space: nowrap;
}
.week-assign {
  color: var(--text-muted);
  font-size: var(--fs-small);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teaching-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Calendar week content panels */
.week-content {
  padding: var(--space-md);
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
.week-content--lesson {
  /* Subtle left border for “teaching” weeks (uses color-mix if supported) */
  border-left: 3px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.week-content--nonlesson { border-left: 3px solid var(--border); }

/* Shared utility: subdued explanatory text */
.subtle {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.45;
}

/* Calendar small lists (readings) */
.subtle-list.readings {
  margin: 0.25rem 0 0.75rem 1.25rem; /* indent bullets slightly */
  padding: 0;
}
.subtle-list.readings li { margin: 0.15rem 0; }

/* Calendar inline labels and links */
.readings-label,
.cfm-label,
.lesson-label { font-weight: 600; margin-right: 0.25rem; }
.scripture-link {
  color: inherit;                         /* inherit surrounding text color */
  text-decoration: underline dotted;      /* subtle dotted underline */
}
.scripture-link:hover {
  color: var(--accent);
  text-decoration: underline;             /* solid underline on hover */
}
.cfm-line,
.lesson-line { margin: 0.25rem 0; }
.cfm-link,
.lesson-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 35%, transparent);
}
.cfm-link:hover,
.lesson-link:hover { text-decoration: underline; }

/* -------------------------------
   9.5 Resources page extras
   ------------------------------- */

/* Simple toolbar row that mirrors calendar’s button style */
.resources-toolbar {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap; /* keep buttons from overflowing on small screens */
}

/* Clean bullet list for resource links */
.resource-list { /* used inside each <details.section> on /resources */
  margin: 0.25rem 0 0.5rem 1.25rem; /* subtle indent similar to .subtle-list */
  padding: 0;
}
.resource-list li {
  margin: 0.35rem 0;
  line-height: 1.5;
}

/* Responsive adjustments for week summaries (calendar) */
@media (max-width: 768px) {
  details.week > summary { flex-wrap: wrap; align-items: flex-start; }
  .week-date { min-width: auto; }
  .week-assign { width: 100%; white-space: normal; } /* allow wrapping */
}


/* Embed a custom font */
/* ===== CUSTOM FONT SETUP ===== */
/* 
   To use your hand-drawn font:
   1. Create a folder at: /asset/fonts/
   2. Put your font file in that folder (either .otf or .ttf)
   3. Replace 'YourHandDrawnFont' below with a name for your font (can be anything)
   4. Replace 'yourfont.otf' and 'yourfont.ttf' with your actual filename
   5. If you only have ONE format (either OTF or TTF), delete the other line
      For example, if you only have a .ttf file, delete the .otf line
*/

@font-face {
    font-family: 'YourHandDrawnFont';  /* Change this to whatever you want to call your font */
    src: url('/asset/fonts/yourfont.otf') format('opentype'),  /* Replace 'yourfont.otf' with your actual OTF filename */
         url('/asset/fonts/yourfont.ttf') format('truetype');  /* Replace 'yourfont.ttf' with your actual TTF filename */
    font-weight: normal;
    font-style: normal;
}

/* ===== TEXT BLOCK STYLING ===== */
/* 
   This applies your custom font to the raw text blocks (pre and code tags)
   The fallback fonts ensure text displays even if custom font doesn't load
   - 'YourHandDrawnFont' = your custom font (must match the name above)
   - monospace = generic monospace fallback
   - 'Apple Color Emoji', 'Segoe UI Emoji' = ensures emoji display properly
*/

pre, code {
    font-family: 'YourHandDrawnFont', monospace​​​​​​​​​​​​​​​​