/* ===================================================================
   kahoona.se — theme extras  (additive; loads AFTER styles.css)
   • Light & dark mode (auto from system, manual override via toggle)
   • Back-to-top button
   • Contact section min-height so nav-spy can reach it
   =================================================================== */

/* ---------- Theme variables (default = light) --------------------- */
:root {
  --kh-bg:                       #ffffff;
  --kh-text:                     #212529;
  --kh-muted:                    #6c757d;
  --kh-section-bg:               #ffffff;
  --kh-footer-bg:                #f8f9fa;
  --kh-footer-text:              #6c757d;
  --kh-navbar-scrolled-bg:       #ffffff;
  --kh-navbar-scrolled-text:     #212529;
  --kh-navbar-scrolled-hover:    #f4623a;
  --kh-navbar-scrolled-shadow:   0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --kh-portfolio-overlay:        rgba(0, 0, 0, 0.5);
  --kh-toggle-border-top:        rgba(255, 255, 255, 0.45);
  --kh-toggle-color-top:         rgba(255, 255, 255, 0.9);
  --kh-toggle-border-scrolled:   rgba(0, 0, 0, 0.2);
  --kh-toggle-color-scrolled:    #212529;
  color-scheme: light;
}

/* ---------- Dark theme (explicit override) ------------------------ */
:root[data-theme="dark"] {
  --kh-bg:                       #121417;
  --kh-text:                     #e7e9ec;
  --kh-muted:                    #9aa3ab;
  --kh-section-bg:               #16191d;
  --kh-footer-bg:                #0d0f12;
  --kh-footer-text:              #9aa3ab;
  --kh-navbar-scrolled-bg:       #16191d;
  --kh-navbar-scrolled-text:     #e7e9ec;
  --kh-navbar-scrolled-hover:    #ff7a52;
  --kh-navbar-scrolled-shadow:   0 0.5rem 1rem rgba(0, 0, 0, 0.55);
  --kh-portfolio-overlay:        rgba(0, 0, 0, 0.65);
  --kh-toggle-border-scrolled:   rgba(255, 255, 255, 0.2);
  --kh-toggle-color-scrolled:    #e7e9ec;
  color-scheme: dark;
}

/* ---------- Auto: follow system unless user picked light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kh-bg:                     #121417;
    --kh-text:                   #e7e9ec;
    --kh-muted:                  #9aa3ab;
    --kh-section-bg:             #16191d;
    --kh-footer-bg:              #0d0f12;
    --kh-footer-text:            #9aa3ab;
    --kh-navbar-scrolled-bg:     #16191d;
    --kh-navbar-scrolled-text:   #e7e9ec;
    --kh-navbar-scrolled-hover:  #ff7a52;
    --kh-navbar-scrolled-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.55);
    --kh-portfolio-overlay:      rgba(0, 0, 0, 0.65);
    --kh-toggle-border-scrolled: rgba(255, 255, 255, 0.2);
    --kh-toggle-color-scrolled:  #e7e9ec;
    color-scheme: dark;
  }
}

/* ---------- Apply variables to existing markup ------------------- */
body {
  background-color: var(--kh-bg);
  color: var(--kh-text);
}

/* page-section background — bg-primary keeps its original teal (#073642
   from styles.css, set with !important, so we don't need to do anything). */
.page-section               { background-color: var(--kh-section-bg); }

/* Text muted should follow theme */
.text-muted                  { color: var(--kh-muted) !important; }

/* Footer */
footer.bg-light              { background-color: var(--kh-footer-bg) !important; }
footer.bg-light .text-muted  { color: var(--kh-footer-text) !important; }

/* Navbar in scrolled state */
#mainNav.navbar-scrolled {
  background-color: var(--kh-navbar-scrolled-bg) !important;
  box-shadow: var(--kh-navbar-scrolled-shadow) !important;
}
#mainNav.navbar-scrolled .navbar-brand,
#mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link {
  color: var(--kh-navbar-scrolled-text);
}
#mainNav.navbar-scrolled .navbar-brand:hover,
#mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link:hover,
#mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link.active {
  color: var(--kh-navbar-scrolled-hover);
}

/* Mobile collapsed menu background */
@media (max-width: 991.98px) {
  #mainNav .navbar-collapse {
    background-color: var(--kh-navbar-scrolled-bg);
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
  }
  #mainNav .navbar-nav .nav-link {
    color: var(--kh-navbar-scrolled-text) !important;
  }
  #mainNav .navbar-nav .nav-link:hover,
  #mainNav .navbar-nav .nav-link.active {
    color: var(--kh-navbar-scrolled-hover) !important;
  }
}

/* Portfolio overlay slightly darker in dark mode */
#portfolio .container-fluid .portfolio-box .portfolio-box-caption,
#portfolio .container-sm    .portfolio-box .portfolio-box-caption,
#portfolio .container-md    .portfolio-box .portfolio-box-caption,
#portfolio .container-lg    .portfolio-box .portfolio-box-caption,
#portfolio .container-xl    .portfolio-box .portfolio-box-caption {
  background: var(--kh-portfolio-overlay);
}

/* ---------- Theme toggle button (lives in the navbar) ----------- */
.kh-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: 0.75rem;
  padding: 0;
  border: 1px solid var(--kh-toggle-border-top);
  border-radius: 50%;
  background: transparent;
  color: var(--kh-toggle-color-top);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}
.kh-theme-toggle:hover {
  transform: scale(1.05);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.8);
}
.kh-theme-toggle:focus {
  outline: 2px solid #f4623a;
  outline-offset: 2px;
}
#mainNav.navbar-scrolled .kh-theme-toggle {
  color: var(--kh-toggle-color-scrolled);
  border-color: var(--kh-toggle-border-scrolled);
}
#mainNav.navbar-scrolled .kh-theme-toggle:hover {
  color: var(--kh-navbar-scrolled-hover);
  border-color: var(--kh-navbar-scrolled-hover);
}
.kh-theme-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* show moon by default; show sun when dark mode is active */
.kh-theme-toggle .kh-icon-sun  { display: none; }
.kh-theme-toggle .kh-icon-moon { display: inline-block; }
:root[data-theme="dark"] .kh-theme-toggle .kh-icon-sun  { display: inline-block; }
:root[data-theme="dark"] .kh-theme-toggle .kh-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kh-theme-toggle .kh-icon-sun  { display: inline-block; }
  :root:not([data-theme="light"]) .kh-theme-toggle .kh-icon-moon { display: none; }
}

/* Mobile: toggle sits inside the collapsed menu — use the same colours
   as the surrounding nav links instead of the over-masthead defaults. */
@media (max-width: 991.98px) {
  .kh-theme-toggle {
    color: var(--kh-toggle-color-scrolled);
    border-color: var(--kh-toggle-border-scrolled);
    margin-left: 0;
    margin-top: 0.25rem;
  }
}

/* ---------- Back-to-top floating button ------------------------- */
.kh-back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background-color: #f4623a;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease,
    background-color 0.2s ease;
  z-index: 1040;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25);
}
.kh-back-to-top.kh-show {
  opacity: 0.92;
  visibility: visible;
  transform: translateY(0);
}
.kh-back-to-top:hover {
  opacity: 1;
  background-color: #d8542f;
}
.kh-back-to-top:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  opacity: 1;
}
.kh-back-to-top svg {
  width: 1.1rem;
  height: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
  .kh-back-to-top              { transition: opacity 0.15s ease; transform: none; }
  .kh-back-to-top.kh-show      { transform: none; }
  .kh-theme-toggle             { transition: none; }
  .kh-theme-toggle:hover       { transform: none; }
}

/* ---------- "Prose" rhythm for the body paragraphs --------------- */
/* Looser line-height and breathing space between paragraphs.
   Used in the About section and the Services cards. */
.kh-prose p {
  line-height: 1.8;
  margin-bottom: 1.15rem;
}
.kh-prose p:last-child {
  margin-bottom: 0;
}

/* ---------- Contact section: enough room to scroll to ----------- */
/* The scroll-spy threshold is 75px below the top of the viewport.
   For the Contact link to ever go "active" — and for clicking it to
   actually park the section under the navbar — the bottom of the page
   has to extend at least viewport-height below the Contact top. The
   simplest, most robust way to guarantee that on any monitor size is
   to make Contact itself viewport-tall. */
#contact {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 575.98px) {
  /* Mobile: page is already tall enough, don't add empty real-estate. */
  #contact {
    min-height: auto;
    display: block;
  }
}