/* --------------------------------------------------
   SolarDrift — bright solar theme (namespace: sd-)
   FULL CSS — CLEAN FINAL VERSION WITH NEW DIVIDER
-------------------------------------------------- */


/* TOKENS ------------------------------------------ */
:root {
  --sd-primary: #f2c86f;        /* solar gold */
  --sd-surface: #ffffff;        /* bright base */
  --sd-surface-soft: #f9f6ed;   /* warm paper */
  --sd-ink: #222222;            /* text */
  --sd-ink-muted: #666666;

  --sd-edge: rgba(0,0,0,0.08);
  --sd-edge-strong: rgba(0,0,0,0.18);
  --sd-shadow-mist: rgba(0,0,0,0.12);

  --sd-radius: 14px;

  --sd-motion-fast: 150ms;
  --sd-motion-med: 260ms;
  --sd-motion-slow: 420ms;
  --sd-easing: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce){
  * { animation:none !important; transition:none !important; }
}

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

/* BODY -------------------------------------------- */
body.sd-body {
  background: var(--sd-surface);
  color: var(--sd-ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x:hidden;
}

/* LEFT FIXED SIDEBAR ------------------------------- */
.sd-header {
  position:fixed;
  top:0;
  left:0;
  width:260px;
  height:100vh;
  background: linear-gradient(180deg, #fff9e8, #fffef9);
  border-right: 1px solid var(--sd-edge);
  padding:32px 20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:26px;
  box-shadow: 4px 0 20px rgba(0,0,0,0.08);
  z-index:9000;
}

/* LOGO --------------------------------------------- */
.sd-logo-wrap {
  width:100%;
  display:flex;
  justify-content:center;
}

.sd-logo {
  width:145px;
  height:auto;
}

/* NAV ---------------------------------------------- */
.sd-nav {
  width:100%;
}

.sd-nav ul {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sd-nav li {
  padding-bottom:6px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}

.sd-nav li:last-child {
  border-bottom:none;
}

.sd-nav-link {
  display:inline-block;
  padding:6px 2px;
  color:var(--sd-ink);
  font-weight:500;
  text-decoration:none;
  position:relative;
}

/* underline-grow */
.sd-nav-link::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:linear-gradient(90deg, var(--sd-primary), transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--sd-motion-med) var(--sd-easing);
}

.sd-nav-link:hover::after {
  transform:scaleX(1);
}

/* MAIN CONTENT (FULL WIDTH) ------------------------ */
.sd-container {
  position: relative;
  margin-left: 260px;
  width: calc(100% - 260px);
  padding: 40px 40px 80px 40px;
}

.sd-container article {
  width: 100%;
  max-width: none !important;
  margin: 0;
  padding: 0;
}


/* TYPOGRAPHY --------------------------------------- */
h1, h2, h3 {
  font-weight:700;
  margin-bottom:14px;
  letter-spacing:0.3px;
}

.sd-h1 { font-size: 2rem; }

.sd-dek {
  font-size:1.15rem;
  color:var(--sd-ink-muted);
  margin-bottom:24px;
}

p { margin-bottom:22px; }

/* REQUIRED JUSTIFICATION --------------------------- */
article p,
section p,
main p,
p {
  text-align:justify !important;
  text-justify:inter-word !important;
  -webkit-hyphens:auto !important;
  hyphens:auto !important;
}

/* HERO IMAGE --------------------------------------- */
.sd-hero {
  margin:24px 0 34px;
  border-radius:var(--sd-radius);
  overflow:hidden;
  background: radial-gradient(circle at 50% 0%, rgba(242,200,111,0.25), transparent 55%);
  padding:6px;
}

.sd-hero img {
  width:100%;
  display:block;
  border-radius:calc(var(--sd-radius) - 4px);
  box-shadow:0 0 24px rgba(242,200,111,0.30);
}


/* SECTION + NEW SOLAR BEAM + CORE FLARE DIVIDER ---- */
.sd-section {
  position:relative;
  padding-top:60px;
  margin-bottom:70px;
}

/* Make sure we start clean for pseudo-elements */
.sd-section::before,
.sd-section::after {
  content:"";
}

/* Wide glowing solar beam across the section top */
.sd-section::before {
  position:absolute;
  top:-26px;
  left:0;
  width:100%;
  height:6px;
  border-radius:999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(242,200,111,0.18) 10%,
    rgba(242,200,111,0.9) 50%,
    rgba(242,200,111,0.18) 90%,
    transparent 100%
  );
  box-shadow:
    0 0 10px rgba(242,200,111,0.65),
    0 0 22px rgba(242,200,111,0.45);
  opacity:0.95;
  transform-origin:center;
  animation: sd-beam-pulse 4.4s var(--sd-easing) infinite alternate;
}

/* Central solar core flare */
.sd-section::after {
  position:absolute;
  top:-34px;
  left:50%;
  transform:translateX(-50%);
  width:24px;
  height:24px;
  border-radius:50%;
  background: radial-gradient(
    circle,
    #fff9d4 0%,
    #f2c86f 55%,
    rgba(242,200,111,0) 72%
  );
  box-shadow:
    0 0 16px rgba(242,200,111,0.95),
    0 0 30px rgba(242,200,111,0.7);
  opacity:0.95;
  animation: sd-core-glow 5.2s ease-in-out infinite alternate;
}

/* Beam breathing animation */
@keyframes sd-beam-pulse {
  0% {
    opacity:0.6;
    filter:blur(0);
    transform:scaleX(0.96);
  }
  100% {
    opacity:1;
    filter:blur(0.7px);
    transform:scaleX(1.03);
  }
}

/* Core flare glow animation */
@keyframes sd-core-glow {
  0% {
    transform:translateX(-50%) scale(0.9);
    opacity:0.75;
  }
  100% {
    transform:translateX(-50%) scale(1.08);
    opacity:1;
  }
}


/* OPTIONAL CARD ------------------------------------ */
.sd-card {
  border:1px solid var(--sd-edge);
  border-radius:var(--sd-radius);
  background:var(--sd-surface-soft);
  padding:20px;
  transition:transform var(--sd-motion-fast) var(--sd-easing),
             box-shadow var(--sd-motion-fast) var(--sd-easing),
             border-color var(--sd-motion-fast) var(--sd-easing);
}

.sd-card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 24px var(--sd-shadow-mist);
  border-color:var(--sd-edge-strong);
}


/* PROGRESS BAR ------------------------------------- */
.sd-progress {
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg, var(--sd-primary), transparent);
  z-index:9998;
}


/* SOLAR ORB BACK TO TOP BUTTON --------------------- */
.sd-to-top {
  position:fixed;
  right:22px;
  bottom:22px;
  width:58px;
  height:58px;
  border-radius:50%;
  background: radial-gradient(circle at 50% 35%, #fff4c8, #f2c86f 70%);
  border:1px solid rgba(242,200,111,0.65);
  color:#815f00;
  font:700 24px/58px system-ui, sans-serif;
  text-align:center;
  cursor:pointer;
  opacity:0 !important;
  transform:translateY(10px) !important;
  pointer-events:none !important;
  transition:
    opacity .28s ease,
    transform .28s ease,
    background .28s ease,
    box-shadow .28s ease;
  z-index:9999 !important;
  overflow:hidden;
  box-shadow:
    0 0 8px rgba(242,200,111,0.65),
    0 0 22px rgba(242,200,111,0.42);
}

.sd-to-top:hover {
  background: radial-gradient(circle at 50% 35%, #fff9dc, #f2c86f 72%);
  box-shadow:
    0 0 12px rgba(242,200,111,0.75),
    0 0 32px rgba(242,200,111,0.6),
    0 6px 12px rgba(0,0,0,0.14);
}

.sd-to-top.sd-show {
  opacity:1 !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
}

.sd-to-top .ripple {
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  opacity:.35;
  transform:translate(-50%,-50%) scale(0);
  background:#fff;
  animation:sd-ripple .6s ease-out forwards;
}

@keyframes sd-ripple {
  to {
    transform:translate(-50%,-50%) scale(8);
    opacity:0;
  }
}


/* SOLAR CAPSULE FOOTER ----------------------------- */
.sd-footer {
  margin-left:260px;
  width: calc(100% - 260px);
  padding:40px 0 60px;
  color:var(--sd-ink-muted);
  font-size:0.95rem;
  border-top:1px solid var(--sd-edge);
  text-align:center;
}

.sd-footer-inner {
  display: inline-block;
  padding: 14px 34px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 30%, #fff8d9, #f4d98f 75%);
  border: 1px solid rgba(242,200,111,0.55);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.06),
    0 0 18px rgba(242,200,111,0.55),
    inset 0 0 8px rgba(255,255,255,0.8);
  font-size: 0.95rem;
  color: var(--sd-ink-muted);
  letter-spacing: 0.35px;
}


/* RESPONSIVE: collapse sidebar --------------------- */
@media (max-width: 800px){

  .sd-header {
    position:relative;
    width:100%;
    height:auto;
    padding:16px 14px;
    border-right:none;
    border-bottom:1px solid var(--sd-edge);
    box-shadow:none;
  }

  .sd-nav ul {
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
  }

  .sd-nav li {
    border-bottom:none;
    padding-bottom:0;
  }

  .sd-container {
    width:100%;
    margin-left:0;
    padding:24px 18px 60px 18px;
  }

  .sd-footer {
    margin-left:0;
    width:100%;
  }
}