/* ==========================================================================
   CUSTOMIZE.CSS
   EDIT THIS FILE FOR: COLORS + FONTS + A FEW VISUAL SETTINGS
   --------------------------------------------------------------------------
   This file loads AFTER styles.css, so values here override the main theme.
   You should rarely need to edit styles.css.
   ========================================================================== */

:root {
  /* ===== HOUSE / ACCENT COLORS ===== */
  --gryffindor: #740001;
  --gryffindor-deep: #3d0000;
  --gold: #d3a625;
  --slytherin: #1a472a;
  --ravenclaw: #0e1a40;
  --hufflepuff: #ecb939;

  /* Detailed house-color aliases used by some decorative elements */
  --gryffindor-red: #740001;
  --gryffindor-gold: #d3a625;
  --slytherin-green: #1a472a;
  --slytherin-silver: #a7a8aa;
  --ravenclaw-blue: #0e1a40;
  --ravenclaw-bronze: #946b2d;
  --hufflepuff-yellow: #ecb939;
  --hufflepuff-black: #151515;

  /* ===== NEUTRALS ===== */
  --ink: #17130f;
  --parchment: #f4ead5;
  --parchment-light: #fffaf0;
  --mist: #d8d2c4;
  --white: #ffffff;

  /* ===== FONTS =====
     You can use any installed/system font here.
     For a different Google Font, replace the @import at the very top of
     THIS file, then change the font-family values below.
     Example:
       --display-font: Georgia, serif;
       --body-font: Arial, sans-serif;
  */
  --display-font: 'Cinzel', Georgia, serif;
  --body-font: 'EB Garamond', Georgia, serif;

  /* ===== LAYOUT ===== */
  --content-width: 1160px;
  --radius: 18px;
}

/* ===== HOMEPAGE BACKGROUND =====
   Change these colors if you want the homepage lighter/darker.
*/
.hero {
  background:
    radial-gradient(circle at 50% 32%, rgba(211,166,37,.17), transparent 29%),
    radial-gradient(circle at 18% 70%, rgba(26,71,42,.14), transparent 35%),
    radial-gradient(circle at 82% 68%, rgba(14,26,64,.17), transparent 37%),
    linear-gradient(145deg, #5b0001 0%, #430508 48%, #25060a 100%);
}

/* ===== HEADER ===== */
.site-header {
  background: rgba(29, 8, 8, .95);
}

/* Add any personal CSS overrides BELOW this line. */

/* =========================================================
   REGISTRY — CENTER TWO REMAINING CARDS
   ========================================================= */

.page-registry .section .container.grid-3 {
  grid-template-columns: repeat(2, minmax(0, 360px));
  justify-content: center;
  gap: 1.5rem;
}

/* Keep registry cards responsive on smaller screens */
@media (max-width: 760px) {
  .page-registry .section .container.grid-3 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE NAVIGATION — KEEP MENU ABOVE PAGE CONTENT
   ========================================================= */

.site-header {
  position: relative;
  z-index: 9999;
}

.nav-wrap {
  position: relative;
  z-index: 10000;
}

.nav-toggle {
  position: relative;
  z-index: 10002;
}

.nav-links {
  z-index: 10001;
}

/* Mobile dropdown */
@media (max-width: 800px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10001;
  }

  .page-hero,
  .hero,
  main {
    position: relative;
    z-index: 1;
  }
}