/* ----------------------------------------------------------
   BEYOND HTML BASICS PROJECT
   Designer: CHLOE PARK
   Date: 2025-11-23
----------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body#css-zen-garden {
  background: #fdfdfd;
  font-family: "Inter", system-ui, sans-serif;
  color: #111;
  line-height: 1.65;
  padding-top: 20px; /* space for fixed nav */
}

/* ------------------------------
   1. ROOT VARIABLES
-------------------------------*/
:root {
  --ink: #111;
  --mint: #d8ffe8;
  --lavender: #e8ddff;
  --peach: #ffd5bb;
  --rose: #ffb3d9;
  --blue: #B4E1FF;
  --yellow: #F5FFC6;

  --text-dark: #111;
  --font-serif: "Instrument Serif", serif;

  --section-pad: 2rem;
  --max-width: 1440px;

  --nav-border: #E8E8E8;
}

/* ------------------------------
   2. PAGE WRAPPER
-------------------------------*/
.page-wrapper {
  width: 100%;
  margin: 0 auto;
  max-width: var(--max-width);
}

/* ------------------------------
   3. FIXED LIGHT NAV BAR
-------------------------------*/
aside.sidebar {
  position: fixed;
  top: 0;
  width: 100%;
  background: #ffffffe6; /* light / translucent */
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--nav-border);
  z-index: 9999;
  padding: 0.6rem 2rem;

  display: flex;
  justify-content: center;
}

.sidebar .wrapper {
  display: flex;
  gap: 2.5rem;
}

.design-selection,
.design-archives,
.zen-resources {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* nav headings */
.design-selection h3.select,
.design-archives h3,
.zen-resources h3 {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  opacity: 0.6;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

/* dropdown menus */
.design-selection ul,
.design-archives ul,
.zen-resources ul {
  position: absolute;
  top: 120%;
  left: 0;

  background: #fff;
  padding: 1rem 1rem;
  min-width: 220px;
  border-radius: 10px;
  border: 1px solid var(--nav-border);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.25s ease;
}

.design-selection:hover ul,
.design-archives:hover ul,
.zen-resources:hover ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.design-selection a:hover,
.design-archives a:hover,
.zen-resources a:hover {
  text-decoration: underline;
  
}

/* Unified hover effect */
.design-selection li:hover .design-name,
.design-selection li:hover .designer-name {
  text-decoration: underline;
  color: #ff8ed0;
  opacity: 0.85;
  transition: 0.2s var(--ease);
}

.sidebar a {
  text-decoration: none;
  font-size: 0.85rem;
  color: var(--ink);
  margin: 0.25rem 0;
}

/* ------------------------------
   4. HERO SECTION
-------------------------------*/
.intro {
  padding: 2rem;
  text-align: center;
  background: #fdfdfd;
}

header[role="banner"] h1 {
  font-family: var(--font-serif);
  font-size: 4rem;
  margin-bottom: 1rem;
}

header[role="banner"] h2 {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  max-width: 60ch;
  margin: 0 auto;
  opacity: 0.85;
}

.summary {
  margin: 1.8rem auto;
  max-width: 570px;
  font-size: 1.2rem;
  opacity: 0.9;
}

.summary h3 { display: none; }

/* ------------------------------
   5. COLOR TILE GRID
-------------------------------*/
.main.supporting {
  display: grid;
  gap: 1.2rem;
  padding: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  max-width: 1440px;
  margin: 0 auto;
}

/* universal tile styling */
.preamble,
.explanation,
.participation,
.benefits,
.requirements {
  padding: var(--section-pad);
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* tile colors */
.preamble      { background: var(--blue); }
.explanation   { background: var(--yellow); }
.participation { background: var(--lavender); }
.benefits      { background: var(--peach); }
.requirements  { background: var(--rose); }


.preamble h3,
.preamble p {
    margin: auto;
    padding: auto;
}


.preamble {
  min-height: 400px;
  
}

.requirements {
  grid-column: 1 / -1;
  margin: auto;
  padding: auto;
}

/* section titles */
.preamble h3,
.explanation h3,
.participation h3,
.benefits h3,
.requirements h3 {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  margin-bottom: 1rem;
}

/* body text */
.preamble p,
.explanation p,
.participation p,
.benefits p,
.requirements p {
  font-size: 1.15rem;
  max-width: 60ch;
  line-height: 1.65;
}

/* ------------------------------
   6. FOOTER
-------------------------------*/
footer {
  text-align: center;
  margin: auto;
    padding: auto;
  font-size: 0.9rem;
  color: #C2C2C2;
}

footer a { color: #C2C2C2; }

/* ------------------------------
   7. RESPONSIVE
-------------------------------*/
@media (max-width: 768px) {
  header[role="banner"] h1 { font-size: 3rem; }
  .summary { font-size: 1rem; }
  .preamble { min-height: auto; }
}