/* ==========================================================================
   DozeHost — Layout: container, grid, header, footer, sections
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-pad-y); }
.section--sm { padding-block: var(--section-pad-y-sm); }
.section--lg { padding-block: var(--section-pad-y-lg); }
.section--flush-top { padding-top: 0; }
.section--divider { border-top: 1px solid var(--c-border-strong); }
.section--cta { padding-top: 40px; padding-bottom: 80px; }
@media (max-width: 900px) {
  .section--cta { padding-top: 32px; padding-bottom: 56px; }
}

.section__head { max-width: 720px; margin: 0 auto var(--sp-8); text-align: center; }
.section__head .title--4xl + p { margin-top: var(--sp-3); }
.section__head--left { margin-inline: 0; text-align: left; }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--gap-l { gap: var(--sp-6); }

@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: sticky; top: 0; z-index: 80;
  height: var(--header-h);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-ink);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Once scrolled, lift it off the page with a shadow — same light surface. */
.header.is-stuck {
  border-bottom-color: var(--c-border-strong);
  box-shadow: var(--shadow-s);
}

.header__inner {
  display: flex; align-items: center; gap: var(--sp-6);
  height: 100%;
}

/* Logo is a single image — swap assets/img/logo.svg to rebrand. */
.logo { display: inline-flex; align-items: center; }
.logo img { height: 28px; width: auto; }
.logo--lg img { height: 40px; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--sp-5); }
.nav__link {
  font-family: var(--font-heading); font-weight: var(--fw-medium);
  font-size: var(--text-2xs-size); line-height: var(--text-2xs-lh);
  padding-block: var(--sp-2);
  display: inline-flex; align-items: center; gap: 6px;
  opacity: 0.9; transition: opacity var(--dur) var(--ease);
}
.nav__link:hover { opacity: 1; }
.nav__link[aria-current="page"] { font-weight: var(--fw-semibold); opacity: 1; }

.nav__item { position: relative; }
.nav__caret { width: 10px; transition: transform var(--dur) var(--ease); }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

/* Dropdown panel. Always single column, left edge flush with its nav item,
   dropped clear of the header — see --nav-panel-drop. */
.nav__panel {
  /* Nudged left of the trigger so the wide panel sits more under the nav row
     than hanging off the item's right. --right panels override this. */
  position: absolute; top: calc(100% + var(--nav-panel-drop)); left: -60px;
  transform: translateY(6px);
  width: min(340px, calc(100vw - 48px));
  padding: var(--sp-3);
  background: var(--c-white);
  color: var(--c-ink);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
/* Right-anchored, and pushed out past the nav so the panel's right edge lines up
   with the header buttons rather than the nav item. The shift is measured from
   the nav's right edge, which tracks the container at every width, so this stays
   inside the viewport without a breakpoint. */
.nav__panel--right { left: auto; right: calc(-1 * var(--nav-panel-shift)); }

/* Hover bridge. Must match the drop exactly, or the pointer crosses dead space
   on its way to the panel and the menu closes under it. */
.nav__item::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0;
  height: var(--nav-panel-drop);
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }

/* Every panel is a single column. */
.nav__panel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.nav__panel-group + .nav__panel-group { margin-top: var(--sp-2); }
.nav__panel-label {
  display: block; padding: var(--sp-2) var(--sp-3) 6px;
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-gray);
}
.nav__panel-intro {
  margin-bottom: var(--sp-4); max-width: 60ch;
  font-size: var(--text-2xs-size); line-height: var(--text-2xs-lh);
  color: var(--c-gray);
}

.nav__panel-link {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: 10px var(--sp-3);
  border-radius: var(--radius-m);
  transition: background var(--dur) var(--ease);
}
.nav__panel-link:hover { background: var(--c-surface-subtle); }

/* Icon tile. Each link sets --icon / --icon-bg via a colour modifier below;
   the monochrome accent is the fallback so an unmodified tile still works. */
.nav__panel-icon {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--icon-bg, var(--c-accent-soft));
  color: var(--icon, var(--c-accent));
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--icon, var(--c-accent)) 16%, transparent);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav__panel-link:hover .nav__panel-icon {
  transform: translateY(-1px) scale(1.04);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--icon, var(--c-accent)) 34%, transparent);
}

/* Icon colour set — kept off the monochrome brand palette on purpose: the menu
   is the one place where colour aids scanning between many similar links. */
.nav__panel-icon--blue   { --icon: #4964f1; --icon-bg: rgba(73, 100, 241, 0.11); }
.nav__panel-icon--green  { --icon: #15a34a; --icon-bg: rgba(21, 163, 74, 0.12); }
.nav__panel-icon--violet { --icon: #7c3aed; --icon-bg: rgba(124, 58, 237, 0.11); }
.nav__panel-icon--amber  { --icon: #d97706; --icon-bg: rgba(217, 119, 6, 0.13); }
.nav__panel-icon--rose   { --icon: #e11d48; --icon-bg: rgba(225, 29, 72, 0.10); }
.nav__panel-icon--cyan   { --icon: #0891b2; --icon-bg: rgba(8, 145, 178, 0.12); }
.nav__panel-icon--teal   { --icon: #0d9488; --icon-bg: rgba(13, 148, 136, 0.12); }
.nav__panel-icon--indigo { --icon: #4f46e5; --icon-bg: rgba(79, 70, 229, 0.11); }
.nav__panel-link strong {
  display: block; color: var(--c-ink);
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-2xs-size); line-height: var(--text-2xs-lh);
}
/* Description line only. Must not be a bare `span` selector: that also matched
   the icon tile (specificity 0,1,1 beat .nav__panel-icon's 0,1,0) and repainted
   every glyph grey, cancelling the icon colours. */
.nav__panel-link strong + span {
  display: block; margin-top: 2px;
  font-size: var(--text-3xs-size); line-height: var(--text-3xs-lh);
  font-weight: var(--fw-regular); color: var(--c-gray);
}
/* Stacked: a 340px column is too narrow to sit the note and button side by side. */
.nav__panel-foot {
  margin-top: var(--sp-3); padding-top: var(--sp-4);
  padding-inline: var(--sp-3);
  border-top: 1px solid var(--c-border);
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3);
  font-size: var(--text-3xs-size); color: var(--c-gray);
}
.nav__panel-foot .btn--dark { background: var(--c-accent); color: var(--c-on-accent); }
.nav__panel-foot .btn--dark:hover { background: var(--c-accent-hover); }

.header__actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Login dropdown */
.login-wrap { position: relative; }
.login-panel {
  position: absolute; top: calc(100% + 12px); left: 50%;
  width: 300px; padding: var(--sp-5);
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  z-index: 90;
}
.login-panel.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.login-panel__title {
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-m-size); line-height: var(--text-m-lh);
  margin-bottom: var(--sp-4);
}
.login-panel__label {
  display: block; margin-bottom: 4px;
  font-family: var(--font-heading); font-weight: var(--fw-medium);
  font-size: var(--text-3xs-size); line-height: var(--text-3xs-lh);
  color: var(--c-gray);
}
.login-panel__input {
  display: block; width: 100%; height: 40px;
  padding-inline: var(--sp-3);
  font-family: var(--font-body); font-size: var(--text-2xs-size);
  color: var(--c-ink); background: var(--c-white);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-m);
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.login-panel__input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.login-panel__input + .login-panel__label { margin-top: var(--sp-3); }
.login-panel__submit { margin-top: var(--sp-4); }
.login-panel__links {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  display: flex; justify-content: space-between;
  font-size: var(--text-3xs-size); line-height: var(--text-3xs-lh);
}
.login-panel__links a {
  color: var(--c-gray);
  transition: color var(--dur) var(--ease);
}
.login-panel__links a:hover { color: var(--c-ink); }

.nav-toggle {
  display: none; width: 40px; height: 40px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--c-surface-subtle); color: inherit;
  align-items: center; justify-content: center;
}

@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    margin: 0; padding: var(--sp-5) var(--container-pad) var(--sp-8);
    background: var(--c-white); color: var(--c-ink);
    border-bottom: 1px solid var(--c-border-strong);
    box-shadow: var(--shadow-m);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .nav__item::after { content: none; }
  .nav__panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 0 var(--sp-3); width: auto;
    display: none;
  }
  .nav__panel-grid { grid-template-columns: minmax(0, 1fr); }
  .nav__panel-foot { display: none; }
  .nav__item.is-open .nav__panel { display: block; }
  .header__actions .login-wrap { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { background: var(--c-surface); color: var(--c-ink); padding-block: var(--sp-11) var(--sp-6); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--sp-6); }
.footer__title {
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-2xs-size); line-height: var(--text-2xs-lh);
  margin-bottom: var(--sp-4);
}
.footer__links li + li { margin-top: var(--sp-3); }
.footer__links a {
  font-size: var(--text-2xs-size); line-height: var(--text-2xs-lh);
  color: var(--c-gray);
  transition: color var(--dur) var(--ease);
}
.footer__links a:hover { color: var(--c-ink); }

.footer__intro p {
  margin-top: var(--sp-4); max-width: 320px;
  color: var(--c-gray);
  font-size: var(--text-2xs-size); line-height: 22px;
}

.footer__social { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.footer__social a {
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: var(--c-white);
  border: 1px solid var(--c-border-strong);
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease);
}
.footer__social a:hover { background: var(--c-border); }

.footer__separator {
  margin-block: var(--sp-8);
  border: 0; border-top: 1px solid var(--c-border-strong);
}

.footer__extra {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.footer__extra-col {}
.footer__subtitle {
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-3xs-size); margin-bottom: var(--sp-2); color: var(--c-ink);
}
.footer__extra-col p {
  font-size: var(--text-3xs-size); line-height: var(--text-3xs-lh); color: var(--c-gray);
}

.footer__bottom {
  margin-top: var(--sp-6); padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border-strong);
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  color: var(--c-gray);
  font-size: var(--text-3xs-size); line-height: var(--text-3xs-lh);
}

@media (max-width: 1000px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__extra { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__extra { grid-template-columns: 1fr; }
}