:root { --bg:#0b0f14; --card:#111826; --text:#e6edf3; --muted:#9fb0c0; --line:#223044; --link:#7cc4ff; }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); }
.wrap { max-width:980px; margin:0 auto; padding:28px 18px 56px; }
.top { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.name { font-size:22px; font-weight:700; letter-spacing:.2px; }
.tag { color:var(--muted); font-size:14px; margin-top:6px; }
nav a { color:var(--text); text-decoration:none; margin-left:14px; padding:8px 10px; border:1px solid transparent; border-radius:10px; }
nav a:hover { border-color:var(--line); background:rgba(255,255,255,.03); }
nav a.active { border-color:var(--line); }
.page { margin-top:22px; }
h1 { margin:0 0 12px; font-size:28px; }
.card { border:1px solid var(--line); border-radius:16px; background:var(--card); padding:16px; margin-top:14px; }
.muted { color:var(--muted); }
.btn { display:inline-block; color:var(--text); text-decoration:none; border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.btn:hover { background:rgba(255,255,255,.05); }
a { color:var(--link); }
.foot { margin-top:26px; color:var(--muted); font-size:13px; border-top:1px solid var(--line); padding-top:14px; }
/* Reflections intro block */
.reflections-intro {
  max-width: 720px;
  margin: 0 auto 3rem;
  padding: 0 1rem;
}

.reflections-intro h2 {
  margin-bottom: 1.25rem;
  font-size: 1.4rem;
  font-weight: 600;
}

.reflections-intro p {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
}

.reflections-divider {
  margin: 2rem 0 1.25rem;
  border: 0;
  height: 1px;
  background: rgba(255,255,255,0.15);
}

.reflections-note {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}
.top-nav {
  margin-bottom: 3rem;
}

/* Collapsible intro */
.intro-details {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  padding: 14px 16px;
}

.intro-details summary {
  cursor: pointer;
  list-style: none;
}

.intro-details summary::-webkit-details-marker {
  display: none;
}

.intro-details summary::after {
  content: " (expand)";
  color: var(--muted);
  font-size: 0.95rem;
}

.intro-details[open] summary::after {
  content: " (collapse)";
}

.intro-body {
  margin-top: 12px;
}

/* Intro hover-expand */
.intro-body { transition: all 160ms ease; }
/* Desktop hover expands the intro; click still works everywhere.
   Touch devices ignore hover, so users can tap to expand. */
@media (hover: hover) and (pointer: fine) {
  .intro-details:not([open]):hover {
    box-shadow: 0 0 0 1px var(--line);
  }
  .intro-details:hover > summary {
    opacity: 0.95;
  }
  .intro-details:hover {
    /* Force it open visually on hover by showing the body */
  }
  .intro-details:not([open]):hover .intro-body {
    display: block;
  }
  .intro-details:not([open]) .intro-body {
    display: none;
  }
}


/* Mobile tuning */
@media (max-width: 700px) {
  .rol-header-logo {
    height: 28px;
    margin-left: 8px;
  }
}


/* Make the header a single horizontal bar */
header.top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

/* Left side: title + logo + name */
header.top > div:first-child {
  display: flex !important;
  flex-direction: column !important;
}

/* Title row */
.name-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Logo sizing */
.rol-header-logo {
  height: 80px !important;
  width: auto !important;
  margin: 0 !important;
  opacity: 0.95 !important;
}

/* Subtitle */
.tag {
  margin-top: 6px !important;
  font-size: 14px !important;
  opacity: 0.85 !important;
}

/* Navigation stays right-aligned */
header.top nav {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Mobile: stack neatly */
@media (max-width: 700px) {
  header.top {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  header.top nav {
    align-self: flex-start !important;
    margin-top: 10px !important;
  }
}



/* Mobile: stack cleanly */
@media (max-width: 700px) {
  header.top {
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
  }
  header.top > div:first-child { grid-column: 1 !important; }
  header.top 
  header.top nav { grid-column: 1 !important; justify-self: start !important; }
  
}


/* Left text block (first div in header) */
header.top > div:first-child {
  flex: 0 1 auto !important;
  min-width: 260px !important;
}

/* Center logo block (sits between left and nav) */
header.top 

/* Logo size (adjust height as you like) */
header.top 

/* Nav on the right */
header.top nav {
  flex: 0 0 auto !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}

/* Mobile: stack cleanly */
@media (max-width: 800px) {
  header.top {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  header.top 

  header.top nav {
    order: 3 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    margin-top: 10px !important;
  }

  header.top 
}

/* === Why box BC logo (small, right-aligned) === */




/* Keep it balanced on mobile too */
@media (max-width: 700px){
  
}


/* Mobile: keep it clean */
@media (max-width: 700px){
  
  
  
}


/* Mobile */
@media (max-width: 700px){
  
  
}

/* === Why I Write These Reflections: details box styling === */
.why-details { width: 100%; }
.why-summary {
  list-style: none;
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
}
.why-summary::-webkit-details-marker { display: none; }
.why-summary::after {
  content: " (expand)";
  font-weight: 400;
  font-size: 14px;
  opacity: 0.8;
  margin-left: 10px;
}
.why-details[open] .why-summary::after { content: " (collapse)"; }
.why-body { margin-top: 14px; }

}

.veteran-text {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9aa0a6;
}

.veteran-line {
  margin-top: 4px;
  margin-bottom: 14px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9aa0a6;
}

.veteran-line {
  margin-top: 6px;
  margin-bottom: 14px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9aa0a6;
}