/* ==========================================================================
   CSS ZEN GARDEN - DEEP SEA OCEAN THEME
   ========================================================================== */

/* 1. IMPORTS & BASE STYLES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #e0f7fa;
  line-height: 1.6;
  font-size: 0.95rem;
  padding: 2rem 1rem;
  
  /* Oceanic background setup with fixed sea image */
  background-color: #021219;
  background-image: 
    linear-gradient(to bottom, rgba(2, 18, 25, 0.4), rgba(2, 18, 25, 0.9)),
    url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?q=80&w=2000&auto=format&fit=crop');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}

.page-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

/* 2. TYPOGRAPHY & HEADINGS
   ========================================================================== */
header {
  text-align: center;
  margin-bottom: 2.5rem;
}

h1 {
  font-size: 2.8rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
}

h2 {
  font-size: 1.1rem;
  font-weight: 300;
  color: #80deea;
  letter-spacing: 0.1em;
  margin-top: 0.2rem;
}

h3 {
  background-color: rgba(1, 23, 31, 0.95);
  color: #00e5ff;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.6rem 1.2rem;
  margin: -1.5rem -1.5rem 1.2rem -1.5rem;
  border-bottom: 1px solid #14596d;
}

p {
  margin-bottom: 1rem;
  color: #e0f7fa;
  font-size: 0.92rem;
}

/* 3. CONTENT PANELS
   ========================================================================== */
.intro, 
.main, 
.sidebar {
  background-color: rgba(4, 38, 48, 0.85);
  border: 1px solid #14596d;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 4px;
}

.summary, 
.preamble, 
.explanation, 
.participation, 
.benefits, 
.requirements {
  margin-bottom: 1.5rem;
}

/* 4. ALL LINKS & INLINE TEXT LINKS
   ========================================================================== */
a, 
a:visited,
p a, 
p a:visited,
footer a,
footer a:visited {
  color: #00e5ff;
  text-decoration: none;
  border-bottom: 1px dotted #00e5ff;
  transition: all 0.2s ease-in-out;
}

a:hover, 
p a:hover,
footer a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px #00e5ff;
  border-bottom-style: solid;
}

/* 5. SIDEBAR LINKS & LIST FORMATTING
   ========================================================================== */
.sidebar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}

.sidebar .wrapper {
  width: 100%;
}

.sidebar .design-selection,
.sidebar .design-archives,
.sidebar .zen-resources {
  flex: 1;
  min-width: 250px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-bottom: 0.8rem;
  font-size: 0.88rem;
  border-bottom: 1px dashed rgba(0, 229, 255, 0.2);
  padding-bottom: 0.4rem;
}

/* Design Title Links */
.sidebar a.design-name,
.sidebar a.design-name:visited {
  color: #00e5ff;
  font-weight: 600;
  display: inline-block;
  border-bottom: none;
}

/* Designer Subtext */
.sidebar a.designer-name,
.sidebar a.designer-name:visited {
  color: #80deea;
  font-size: 0.8rem;
  font-weight: 300;
  border-bottom: none;
}

/* Icons & Indicators */
.design-selection h3::before {
  content: "🎨 ";
}

.design-archives h3::before,
.zen-resources h3::before {
  content: "📂 ";
}

.design-selection li::before {
  content: "👉 ";
  font-size: 0.8rem;
}

/* 6. FOOTER & CLEANUP
   ========================================================================== */
footer {
  text-align: center;
  font-size: 0.8rem;
  color: #80deea;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(20, 89, 109, 0.4);
}

footer a {
  margin: 0 0.4rem;
}

/* Hide unused extra structural divs */
div[class^="extra"] {
  display: none;
}