/* ============================================================================
   HOME PAGE - ACADEMICS SECTION
   ============================================================================
   This section displays academic information (Programs, Facilities, Benefits)
   on the home page. Styled to match the "About Hogwarts" panel above it.
   ========================================================================== */

/* Main wrapper for the academics content on home page */
#home-academics {
  max-width: 1200px;              /* Same width as About section for consistency */
  margin: 30px auto 0;             /* Center it and add space above */
  padding: 30px 20px;              /* Internal padding for content */
  background: linear-gradient(135deg, rgba(244,236,216,0.95), rgba(255,255,255,0.85)); /* Parchment gradient */
  border: 3px solid var(--color-parchment-edge);  /* Brown border to look like parchment */
  border-radius: 16px;             /* Rounded corners */
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);  /* Shadow for depth */
  position: relative;              /* For the ::before element positioning */
  overflow: hidden;                /* Clip the shine effect */
}

/* Decorative shine effect overlay on the academics panel */
#home-academics::before {
  content: "";                     /* Empty content for visual effect only */
  position: absolute;              /* Position over the panel */
  inset: 0;                        /* Cover entire panel */
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.6), transparent 70%); /* Light shine */
  pointer-events: none;            /* Don't block clicks */
}

/* Individual sections inside the academics wrapper (transparent to show parent background) */
#home-academics .admissions-section { 
  background: transparent;         /* No extra background - use parent's parchment */
  border: 0;                       /* No border needed */
  box-shadow: none;                /* No shadow - parent has it */
  padding: 10px 0;                 /* Minimal padding */
  margin: 35px 0;                  /* Space between sections */
}

/* Headings inside the academics sections */
#home-academics .admissions-section h2 { 
  margin-top: 0;                   /* Remove extra top margin */
  color: var(--color-ink);         /* Dark brown ink color */
  text-shadow: 0 2px 4px rgba(0,0,0,0.15);  /* Subtle shadow for depth */
}

/* ============================================================================
   HOGWARTS GLOBAL THEME
   ============================================================================
   Core styles and design system used across the entire website.
   Includes: fonts, colors, base elements, and reusable utilities.
   ========================================================================== */

/* Import Google Fonts - Cinzel for headings, EB Garamond for body text */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

/* ----------------------------------------------------------------------------
   CSS VARIABLES (Design Tokens)
   ----------------------------------------------------------------------------
   These variables store reusable colors, fonts, and values.
   Change once here, affects everywhere!
   -------------------------------------------------------------------------- */
:root {
  /* FONTS - Use these for consistent typography */
  --font-display: 'Cinzel', 'Georgia', serif;      /* For headings and titles */
  --font-body: 'EB Garamond', 'Garamond', serif;   /* For paragraphs and body text */
  
  /* COLORS - Parchment and ink theme */
  --color-parchment-base: #f4ecd8;                 /* Light beige parchment background */
  --color-parchment-edge: #e2d5b4;                 /* Darker beige for borders */
  --color-ink: #2c1b0f;                            /* Dark brown text (like old ink) */
  --color-ink-faded: #5d4037;                      /* Lighter brown for secondary text */
  --color-gold: #c9a227;                           /* Golden yellow for accents */
  --color-shadow: rgba(0,0,0,0.15);                /* Subtle shadow color */
  
  /* HOUSE COLORS - Official Hogwarts house colors */
  --gryffindor: #ae0001;                           /* Red (courage and bravery) */
  --slytherin: #2a623d;                            /* Green (ambition and cunning) */
  --ravenclaw: #0e1a40;                            /* Blue (wisdom and wit) */
  --hufflepuff: #ecb939;                           /* Yellow (loyalty and hard work) */
}

/* Make all elements use border-box sizing (includes padding/border in width) */
* { 
  box-sizing: border-box; 
}

/* ----------------------------------------------------------------------------
   BODY - Base page styling
   -------------------------------------------------------------------------- */
body {
  margin: 0;                                       /* Remove default margin */
  font-family: var(--font-body);                   /* Use Garamond font for everything */
  background: url('images/parchment-bg.jpg') repeat var(--color-parchment-base); /* Parchment texture */
  color: var(--color-ink);                         /* Dark brown text */
  line-height: 1.5;                                /* Comfortable reading spacing */
  -webkit-font-smoothing: antialiased;             /* Smooth fonts on Mac */
  
  /* Add padding to prevent content hiding under fixed navbar/footer */
  padding-top: 80px;                               /* Space for fixed navbar at top */
  padding-bottom: 70px;                            /* Space for fixed footer at bottom */
}

/* ----------------------------------------------------------------------------
   TYPOGRAPHY - Heading styles
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { 
  font-family: var(--font-display);                /* Use fancy Cinzel font for headings */
  letter-spacing: 0.5px;                           /* Slight spacing between letters */
}
h1 { font-weight: 700; }                           /* Extra bold for main titles */
h2 { font-weight: 600; }                           /* Semi-bold for section titles */
h3, h4 { font-weight: 600; }                       /* Semi-bold for smaller headings */

/* ----------------------------------------------------------------------------
   LINKS - Default link styling
   -------------------------------------------------------------------------- */
a { 
  color: var(--color-ravenclaw, #0e1a40);          /* Blue color by default */
  text-decoration: none;                           /* Remove underline */
  transition: color .25s ease;                     /* Smooth color change on hover */
}
a:hover { 
  color: var(--color-gold);                        /* Turn gold when hovering */
}

/* ----------------------------------------------------------------------------
   UTILITY CLASSES - Reusable helper classes
   -------------------------------------------------------------------------- */

/* TEXT COLOR UTILITIES - Add house colors to text */
.accent-gryffindor { color: var(--gryffindor); }   /* Red text */
.accent-slytherin { color: var(--slytherin); }     /* Green text */
.accent-ravenclaw { color: var(--ravenclaw); }     /* Blue text */
.accent-hufflepuff { color: var(--hufflepuff); }   /* Yellow text */

/* BACKGROUND COLOR UTILITIES - Add house colors as backgrounds */
.bg-gryffindor { background-color: var(--gryffindor); color: #fff; }  /* Red background, white text */
.bg-slytherin { background-color: var(--slytherin); color: #fff; }    /* Green background, white text */
.bg-ravenclaw { background-color: var(--ravenclaw); color: #fff; }    /* Blue background, white text */
.bg-hufflepuff { background-color: var(--hufflepuff); color: #000; }  /* Yellow background, black text */

/* PARCHMENT PANEL - Reusable card/panel with parchment look */
.parchment-panel {
  background: linear-gradient(135deg, var(--color-parchment-base) 0%, #fff 45%, var(--color-parchment-edge) 100%); /* Gradient for depth */
  border: 2px solid var(--color-parchment-edge);   /* Brown border */
  border-radius: 12px;                             /* Rounded corners */
  box-shadow: 0 4px 12px var(--color-shadow);      /* Drop shadow for depth */
}

/* ----------------------------------------------------------------------------
   CUSTOM SCROLLBAR - Styled scrollbar (Chrome/Edge only)
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { 
  width: 12px;                                     /* Width of scrollbar */
}
::-webkit-scrollbar-track { 
  background: var(--color-parchment-edge);         /* Track color (parchment) */
}
::-webkit-scrollbar-thumb { 
  background: var(--color-ink-faded);              /* Scrollbar handle color */
  border-radius: 6px;                              /* Rounded scrollbar */
  border: 2px solid var(--color-parchment-edge);   /* Border around handle */
}
::-webkit-scrollbar-thumb:hover { 
  background: var(--color-ink);                    /* Darker when hovering */
}

/* ============================================================================
   LEGACY STYLES (Old Navigation)
   ============================================================================
   These are old header/dropdown styles from before Bootstrap navbar.
   Kept for backup/fallback, but not currently used on main pages.
   ========================================================================== */
header { background-color: #3c2f2f; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 10px 30px; }
.logo { height: 60px; }
nav ul { list-style: none; display: flex; gap: 20px; }
nav a { color: #f0e6d2; text-decoration: none; font-weight: bold; }
.dropdown { position: relative; }
.dropdown-content { display: none; position: absolute; background-color: #3c2f2f; min-width: 160px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); z-index: 1; border-radius: 5px; margin-top: 5px; }
.dropdown-content a { color: #f0e6d2; padding: 12px 16px; text-decoration: none; display: block; transition: background-color .3s; }
.dropdown-content a:hover { background-color: #5d4037; }
.dropdown:hover .dropdown-content { display: block; }
.dropbtn { cursor: pointer; }

/* ============================================================================
   HOME PAGE SECTIONS
   ========================================================================== */

/* HERO SECTION - Big welcome banner at top of home page */
.hero {
  text-align: center;                              /* Center the text */
  padding: 80px 20px;                              /* Generous padding */
  background: linear-gradient(to right, #5d3a00, #2c1b0f); /* Dark brown gradient */
  color: #f0e6d2;                                  /* Light text color */
}

/* GENERIC SECTION - Base styles for content sections */
.section {
  padding: 40px 20px;                              /* Padding around content */
  text-align: center;                              /* Center text */
  scroll-margin-top: 100px;                        /* Space when jumping to anchor links (so navbar doesn't cover) */
}

/* ABOUT HOGWARTS SECTION - Special styled panel on home page */
#about.section {
  max-width: 1200px;                               /* Limit width for readability */
  margin: 0 auto;                                  /* Center it */
  background: linear-gradient(135deg, rgba(244,236,216,0.95), rgba(255,255,255,0.85)); /* Parchment gradient */
  border: 3px solid var(--color-parchment-edge);   /* Brown border */
  border-radius: 16px;                             /* Rounded corners */
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);         /* Shadow for depth */
  position: relative;                              /* For shine effect */
  overflow: hidden;                                /* Clip shine effect */
}

/* Decorative shine overlay on About section */
#about.section::before {
  content: "";                                     /* Empty content */
  position: absolute;                              /* Position over panel */
  inset: 0;                                        /* Cover entire section */
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.6), transparent 70%); /* Light shine */
  pointer-events: none;                            /* Don't block clicks */
}

/* Heading in About section */
#about.section h2 {
  margin-top: 0;                                   /* Remove extra top margin */
  font-size: 2.4rem;                               /* Large heading size */
  color: var(--color-ink);                         /* Dark brown ink */
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);         /* Subtle shadow */
}

/* Paragraphs in About section */
#about.section p {
  max-width: 900px;                                /* Limit line length for readability */
  margin: 0 auto 25px;                             /* Center with bottom margin */
  font-size: 1.15rem;                              /* Slightly larger text */
  line-height: 1.7;                                /* Comfortable line spacing */
}

/* ============================================================================
   HOUSE TILES - 4 house boxes on home page
   ========================================================================== */
.house-grid { 
  display: grid;                                   /* Use CSS grid layout */
  grid-template-columns: repeat(2, 1fr);           /* 2 columns of equal width */
  gap: 20px;                                       /* Space between tiles */
  margin-top: 20px;                                /* Space above grid */
}

.house { 
  padding: 30px;                                   /* Internal padding */
  border-radius: 10px;                             /* Rounded corners */
  font-weight: bold;                               /* Bold text */
  color: white;                                    /* White text (except Hufflepuff) */
  box-shadow: 0 3px 8px var(--color-shadow);       /* Drop shadow */
  position: relative;                              /* For shine effect */
  overflow: hidden;                                /* Clip shine */
}

/* Shine effect on house tiles */
.house::after { 
  content: "";                                     /* Empty content */
  position: absolute;                              /* Position over tile */
  inset: 0;                                        /* Cover entire tile */
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.2), transparent 70%); /* Light shine */
  pointer-events: none;                            /* Don't block clicks */
}

/* Individual house background colors */
.gryffindor { background-color: var(--gryffindor); }    /* Red background */
.slytherin { background-color: var(--slytherin); }      /* Green background */
.ravenclaw { background-color: var(--ravenclaw); }      /* Blue background */
.hufflepuff { background-color: var(--hufflepuff); color: #000; }  /* Yellow background with black text */

/* ============================================================================
   FORMS - Contact/Application forms
   ========================================================================== */
form {
  display: flex;                                   /* Flexbox layout */
  flex-direction: column;                          /* Stack elements vertically */
  gap: 10px;                                       /* Space between form fields */
  max-width: 400px;                                /* Limit width */
  margin: auto;                                    /* Center form */
}

/* Form inputs and textareas */
input, textarea { 
  padding: 10px;                                   /* Internal padding */
  border: 1px solid #3c2f2f;                       /* Brown border */
  border-radius: 5px;                              /* Rounded corners */
  background: #fffaf2;                             /* Light parchment background */
}

/* Highlight inputs when focused/typing */
input:focus, textarea:focus { 
  outline: 2px solid var(--color-gold);            /* Gold outline */
  border-color: var(--color-gold);                 /* Gold border */
}

/* ============================================================================
   BUTTONS - Submit buttons and actions
   ========================================================================== */
button { 
  background-color: #3c2f2f;                       /* Dark brown background */
  color: white;                                    /* White text */
  padding: 10px;                                   /* Internal padding */
  border: none;                                    /* No border */
  border-radius: 5px;                              /* Rounded corners */
  cursor: pointer;                                 /* Show pointer on hover */
  font-family: var(--font-display);                /* Fancy font */
  letter-spacing: .5px;                            /* Letter spacing */
  transition: background-color .3s, transform .25s; /* Smooth hover effect */
}

button:hover { 
  background-color: #5d4037;                       /* Lighter brown on hover */
  transform: translateY(-2px);                     /* Lift up slightly */
}

button:active { 
  transform: translateY(0);                        /* Push down when clicked */
}

/* ============================================================================
   FOOTER - Bottom of every page
   ========================================================================== */
footer { 
  background-color: #3c2f2f;                       /* Dark brown background */
  color: white;                                    /* White text */
  text-align: center;                              /* Center text */
  padding: 20px;                                   /* Internal padding */
}
/* ============================================================================
   BACK TO HOME LINK - "← Back to Hogwarts Home" button
   ========================================================================== */
.back-link {
  display: inline-flex;                            /* Flex to align icon and text */
  align-items: center;                             /* Vertically center content */
  gap: 8px;                                        /* Space between arrow and text */
  margin-top: 12px;                                /* Space above link */
  padding: 10px 16px;                              /* Internal padding */
  color: var(--color-ink);                         /* Dark brown text */
  background: linear-gradient(180deg, #fffdf6 0%, #fff6e3 100%); /* Parchment gradient */
  border: 2px solid var(--color-gold);             /* Gold border */
  border-radius: 9999px;                           /* Fully rounded (pill shape) */
  font-family: var(--font-display);                /* Fancy font */
  font-weight: 700;                                /* Bold */
  letter-spacing: 0.3px;                           /* Letter spacing */
  box-shadow: 0 3px 10px var(--color-shadow);      /* Drop shadow */
  text-decoration: none;                           /* No underline */
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; /* Smooth hover */
}

/* Hover effect on back link */
.back-link:hover {
  background: var(--color-gold);                   /* Gold background on hover */
  color: #2c1b0f;                                  /* Dark text on hover */
  transform: translateY(-2px);                     /* Lift up slightly */
  text-decoration: none;                           /* Keep no underline */
  box-shadow: 0 6px 14px var(--color-shadow);      /* Larger shadow */
}

/* Keyboard focus styling for accessibility */
.back-link:focus-visible {
  outline: 3px solid var(--color-gold);            /* Gold outline when tabbed to */
  outline-offset: 2px;                             /* Space between outline and button */
}

/* ============================================================================
   PERSON CARDS - Faculty and student profile cards
   ========================================================================== */
/* Standardized image sizing for all person cards across house pages */
.person-card img { 
  width: 100%;                                     /* Full width of card */
  height: 240px;                                   /* Fixed height */
  object-fit: cover;                               /* Crop to fit */
  object-position: 50% 20%;                        /* Focus on top (faces) not center */
  border-radius: 8px 8px 0 0;                      /* Round top corners only */
  filter: saturate(1.05);                          /* Slightly boost color saturation */
}

/* ============================================================================
   ANIMATIONS
   ========================================================================== */
/* Fade-in and slide-up animation for sections when page loads */
.house-section, .admissions-section, .parchment-panel { 
  animation: fadeSlide .6s ease;                   /* Apply animation */
}

/* Animation keyframes - defines how element appears */
@keyframes fadeSlide { 
  from { 
    opacity: 0;                                    /* Start invisible */
    transform: translateY(12px);                   /* Start 12px below */
  } 
  to { 
    opacity: 1;                                    /* End fully visible */
    transform: translateY(0);                      /* End at normal position */
  } 
}

/* ============================================================================
   ACCESSIBILITY - High contrast mode
   ========================================================================== */
/* Optional: Increase contrast for users who need it */
.high-contrast body, body.high-contrast { 
  filter: contrast(1.1);                           /* Boost contrast by 10% */
}

/* ============================================================================
   BOOTSTRAP NAVBAR - Themed navigation bar at top of every page
   ============================================================================
   We override Bootstrap's default navbar styling to match Hogwarts theme.
   This navbar is fixed to the top and includes the logo and navigation links.
   ========================================================================== */

/* Main navbar container - dark brown gradient with gold accent */
.navbar.navbar-dark.bg-dark {
  background: linear-gradient(135deg, #2c1b0f 0%, #3c2f2f 50%, #2c1b0f 100%) !important; /* Brown gradient */
  border-bottom: 3px solid var(--color-gold);      /* Gold bottom border */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);          /* Shadow for depth */
  padding: 0.75rem 1rem;                           /* Padding inside navbar */
}

/* LOGO/BRAND - "Hogwarts School" text and crest on left */
.navbar-brand {
  font-family: var(--font-display);                /* Fancy Cinzel font */
  font-weight: 700;                                /* Bold */
  font-size: 1.3rem;                               /* Larger text */
  letter-spacing: 1px;                             /* Spread out letters */
  color: var(--color-gold) !important;             /* Gold color */
  transition: color .3s ease;                      /* Smooth color change */
}

/* Brand text turns white on hover */
.navbar-brand:hover {
  color: #fff !important;                          /* White on hover */
}

/* Hogwarts crest image in navbar */
.navbar-brand img {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));  /* Shadow behind crest */
  transition: transform .3s ease;                  /* Smooth scale */
}

/* Crest grows slightly when hovering */
.navbar-brand img:hover {
  transform: scale(1.08);                          /* Grow to 108% size */
}

/* Navbar links */
.navbar-nav .nav-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;
  color: #f0e6d2 !important;
  padding: 0.5rem 1rem !important;
  margin: 0 0.25rem;
  border-radius: 6px;
  transition: all .3s ease;
  position: relative;
}

.navbar-nav .nav-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 80%;
  height: 2px;
  background: var(--color-gold);
  transition: transform .3s ease;
}

.navbar-nav .nav-link:hover {
  color: var(--color-gold) !important;
  background: rgba(201,162,39,0.1);
}

.navbar-nav .nav-link:hover::before {
  transform: translateX(-50%) scaleX(1);
}

.navbar-nav .nav-link.active {
  color: var(--color-gold) !important;
  background: rgba(201,162,39,0.15);
  font-weight: 700;
}

/* Dropdown styling */
.navbar-nav .dropdown-toggle::after {
  border-top-color: var(--color-gold);
  margin-left: 0.5rem;
}

.dropdown-menu {
  background: linear-gradient(135deg, #fffaf2 0%, #f4ecd8 100%);
  border: 2px solid var(--color-gold);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}

.dropdown-item {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  padding: 0.6rem 1.25rem;
  transition: all .25s ease;
  position: relative;
}

.dropdown-item::before {
  content: "⚡";
  position: absolute;
  left: 0.5rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: all .25s ease;
}

.dropdown-item:hover {
  background: linear-gradient(90deg, rgba(201,162,39,0.2), transparent);
  color: var(--color-ink);
  padding-left: 2rem;
}

.dropdown-item:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.dropdown-item:active {
  background: rgba(201,162,39,0.3);
  color: var(--color-ink);
}

/* MOBILE MENU BUTTON - Hamburger icon for small screens */
.navbar-toggler {
  border-color: var(--color-gold);                 /* Gold border around hamburger */
  padding: 0.5rem;                                 /* Padding */
}

/* Highlight hamburger button when focused/clicked */
.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(201,162,39,0.4);   /* Gold glow when focused */
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c9a227' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Footer theming */
footer.bg-dark {
  background: linear-gradient(135deg, #2c1b0f 0%, #3c2f2f 100%) !important;
  border-top: 3px solid var(--color-gold);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
  font-family: var(--font-body);
  letter-spacing: 0.5px;
}

footer.bg-dark .container {
  color: #f0e6d2 !important;
}

/* Responsive alignment for navbar items */
@media (min-width: 992px) {
  .navbar-nav {
    align-items: center;
    gap: 0.25rem;
  }
}

@media (max-width: 991px) {
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid rgba(201,162,39,0.2);
  }
  
  .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }
  
  .dropdown-menu {
    background: rgba(255,250,242,0.98);
    border: 1px solid var(--color-gold);
    margin-left: 1rem;
  }
}

/* ============================================================================
   ADMISSIONS SECTIONS (Programs, Facilities, Benefits)
   ============================================================================
   These sections appear on both the Home page (#home-academics) and the
   Admissions page. They show academic programs, facilities, and benefits.
   ========================================================================== */

/* Main section wrapper - white card with shadow */
.admissions-section {
  background: white;                               /* White background */
  padding: 40px;                                   /* Internal padding */
  margin: 30px 0;                                  /* Space above and below */
  border-radius: 12px;                             /* Rounded corners */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);       /* Drop shadow */
}

/* Section headings (e.g., "Academic Programs") */
.admissions-section h2 {
  color: #3c2f2f;                                  /* Dark brown text */
  font-size: 2.2em;                                /* Large heading */
  margin-bottom: 25px;                             /* Space below */
  text-align: center;                              /* Center text */
  border-bottom: 3px solid #8b6f47;                /* Bottom border accent */
  padding-bottom: 15px;                            /* Space before border */
}

/* ============================================================================
   PROGRAMS GRID - Academic programs cards (DADA, Potions, etc.)
   ========================================================================== */
.programs-grid {
  display: grid;                                   /* Grid layout */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Auto columns, min 300px wide */
  gap: 25px;                                       /* Space between cards */
  margin-top: 30px;                                /* Space above grid */
}

/* Individual program card */
.program-card {
  background: #f9f7f4;                             /* Light beige background */
  border: 2px solid #8b6f47;                       /* Brown border */
  border-radius: 10px;                             /* Rounded corners */
  padding: 25px;                                   /* Internal padding */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

/* Lift card up on hover */
.program-card:hover { 
  transform: translateY(-5px);                     /* Move up 5px */
  box-shadow: 0 6px 20px rgba(139, 111, 71, 0.3); /* Larger shadow */
}

/* Program title (e.g., "Defence Against the Dark Arts") */
.program-card h3 { 
  color: #5d4037;                                  /* Brown text */
  margin-bottom: 15px;                             /* Space below */
  font-size: 1.5em;                                /* Large text */
  border-bottom: 2px solid #8b6f47;                /* Bottom border */
  padding-bottom: 10px;                            /* Space before border */
}

/* List of program features */
.program-card ul { 
  list-style: none;                                /* Remove bullets */
  padding: 0;                                      /* Remove padding */
}

/* Individual list items */
.program-card li { 
  padding: 8px 0 8px 25px;                         /* Padding with space for icon */
  position: relative;                              /* For icon positioning */
  color: #3c2f2f;                                  /* Dark brown text */
}

/* Sparkle icon before each list item */
.program-card li:before { 
  content: "✨";                                    /* Sparkle emoji */
  position: absolute;                              /* Position it */
  left: 0;                                         /* Align to left */
}

/* ============================================================================
   FACILITIES GRID - School facilities cards (Library, Quidditch, etc.)
   ========================================================================== */
.facilities-grid {
  display: grid;                                   /* Grid layout */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Auto columns, min 250px */
  gap: 20px;                                       /* Space between cards */
  margin-top: 30px;                                /* Space above grid */
}

/* Individual facility card */
.facility-card { 
  background: linear-gradient(135deg, #f9f7f4, #fff); /* Subtle gradient */
  border: 2px solid #d4c4a8;                       /* Light brown border */
  border-radius: 10px;                             /* Rounded corners */
  padding: 25px;                                   /* Internal padding */
  text-align: center;                              /* Center all content */
  transition: transform 0.3s ease, border-color 0.3s ease; /* Smooth hover */
}

/* Hover effect - lift card and darken border */
.facility-card:hover { 
  transform: translateY(-5px);                     /* Move up */
  border-color: #8b6f47;                           /* Darker border */
}

/* Large emoji icon at top of facility card */
.facility-icon { 
  font-size: 3em;                                  /* Very large icon */
  margin-bottom: 15px;                             /* Space below icon */
}

/* Facility name */
.facility-card h3 { 
  color: #3c2f2f;                                  /* Dark brown */
  margin-bottom: 10px;                             /* Space below */
  font-size: 1.3em;                                /* Medium-large text */
}

/* Facility description */
.facility-card p { 
  color: #5d4037;                                  /* Medium brown */
  line-height: 1.6;                                /* Comfortable spacing */
  font-size: 0.95em;                               /* Slightly smaller */
}

/* ============================================================================
   BENEFITS GRID - Student benefits cards (Career, Network, etc.)
   ========================================================================== */
.benefits-grid {
  display: grid;                                   /* Grid layout */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Auto columns, min 280px */
  gap: 20px;                                       /* Space between cards */
  margin-top: 30px;                                /* Space above grid */
}

/* Individual benefit card - accent border on left */
.benefit-card { 
  background: #fff9f0;                             /* Light cream background */
  border-left: 5px solid #8b6f47;                  /* Thick left border accent */
  border-radius: 8px;                              /* Rounded corners */
  padding: 20px;                                   /* Internal padding */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover */
}

/* Hover effect - slide right and add shadow */
.benefit-card:hover { 
  transform: translateX(5px);                      /* Slide right 5px */
  box-shadow: -5px 5px 15px rgba(139, 111, 71, 0.2); /* Shadow on left */
}

/* Benefit title */
.benefit-card h3 { 
  color: #3c2f2f;                                  /* Dark brown */
  margin-bottom: 10px;                             /* Space below */
  font-size: 1.2em;                                /* Medium text */
}

/* Benefit description */
.benefit-card p { 
  color: #5d4037;                                  /* Medium brown */
  line-height: 1.6;                                /* Comfortable spacing */
  font-size: 0.95em;                               /* Slightly smaller */
}

/* ============================================================================
   RESPONSIVE DESIGN - Mobile/tablet adjustments
   ========================================================================== */
/* On small screens (phones/tablets), stack cards in single column */
@media (max-width: 768px) {
  .programs-grid, .facilities-grid, .benefits-grid { 
    grid-template-columns: 1fr;                    /* Single column layout */
  }
  .admissions-section { 
    padding: 25px 20px;                            /* Less padding on mobile */
  }
}



/* NAVBAR - Hogwarts crest image height (used on all pages) */
.navbar-brand img[src*="Hogwarts_crest"] {
  height: 40px;                                    /* Fixed height for crest logo (reduced from 48px) */
  width: auto;                                     /* Maintain aspect ratio */
  max-width: 40px;                                 /* Prevent excessive width */
}

/* FOOTER - Copyright text size (used on all pages) */
footer .container.text-center {
  font-size: 0.9em;                                /* Slightly smaller text */
}

/* HOME PAGE - About section card titles (Books, Movies, Writer cards) */
#about .card-title {
  font-family: var(--font-display);                /* Use Cinzel font for titles */
}

/* HOME PAGE - About section card text */
#about .card-text {
  font-family: var(--font-body);                   /* Use Garamond font for paragraphs */
}