/* ==========================================================================
 * WattWisely — site header and footer
 * ========================================================================== */

@layer components {

  /* The header is sticky, so anything that positions against it — sticky
     sidebars, in-page anchor targets — needs its height. Declared here rather
     than in tokens.css because tokens.css is generated from config.json and
     this is a layout fact, not a design token. */
  :root { --ww-header-h: 4.5rem; }

  /* -- Header ------------------------------------------------------------- */

  /* The header is a white bar on every page, matching the dashboard's own
     top bar. It carries the dark-on-light logo, and the nav system below —
     dropdowns, mobile panel, toggle — uses the light defaults. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--ww-white) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ww-border);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--ww-space-5);
    min-height: var(--ww-header-h);
  }

  .site-header__logo {
    flex: none;
    display: block;
    line-height: 0;
  }

  /* At 375px the full-width lockup plus the Log in button and the hamburger
     overflowed the viewport by 4px. The lockup gives way first — it is the only
     one of the three that can shrink without costing a tap target. */
  .site-header__logo img,
  .site-header__logo .ww-placeholder { width: 150px; }

  @media (min-width: 480px) {
    .site-header__logo img,
    .site-header__logo .ww-placeholder { width: 190px; }
  }

  .site-header__actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--ww-space-3);
  }

  /* Below 480 there is not room for the lockup, Log in, and the hamburger at
     once. Log in moves into the mobile panel rather than shrinking a tap
     target or truncating the wordmark. */
  .site-header__actions .btn { display: none; }

  @media (min-width: 480px) {
    .site-header__actions .btn { display: inline-flex; }
  }

  /* Log in is the door to the platform, not a marketing action, so it is
     the quiet one: a text-weight link with an outward arrow. Book a demo
     keeps the only filled button in the header. */
  .btn--login {
    padding-inline: var(--ww-space-3) var(--ww-space-2);
    background: transparent;
    color: var(--ww-ink);
  }

  /* Lucide arrow-up-right, drawn through a mask so it takes currentColor. */
  .btn--login::after {
    content: "";
    width: 0.8em;
    height: 0.8em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--ww-motion-base) var(--ww-motion-ease);
  }

  .btn--login:hover { color: var(--ww-primary); }
  .btn--login:hover::after { transform: translate(2px, -1px); }

  /* -- Primary nav (desktop) ---------------------------------------------- */

  .nav { display: none; }

  @media (min-width: 1024px) {
    /* Two auto margins split the slack evenly, centring the nav in the span
       between the lockup and Log in. The actions' own auto margin has to be
       released here or it competes for the same slack and the nav stays
       pinned to the logo. */
    .nav {
      display: block;
      margin-inline: auto;
    }

    .site-header__actions { margin-inline-start: 0; }
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--ww-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .nav__list li + li { margin-top: 0; }

  .nav__link,
  .nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--ww-space-1);
    padding: var(--ww-space-2) var(--ww-space-3);
    border: 0;
    background: none;
    border-radius: var(--ww-radius-sm);
    color: var(--ww-ink);
    font-size: var(--ww-step-0);
    font-weight: var(--ww-weight-semibold);
    text-decoration: none;
    cursor: pointer;
  }

  .nav__link:hover,
  .nav__trigger:hover { color: var(--ww-primary); }

  .nav__link[aria-current="page"] { color: var(--ww-primary); }

  .nav__trigger::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--ww-motion-base) var(--ww-motion-ease);
  }

  .nav__trigger[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

  /* -- Dropdown ----------------------------------------------------------- */

  .nav__item { position: relative; }

  .nav__menu {
    position: absolute;
    top: calc(100% + var(--ww-space-3));
    inset-inline-start: 0;
    min-width: 16rem;
    padding: var(--ww-space-3);
    margin: 0;
    list-style: none;
    background: var(--ww-white);
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-lg);
    box-shadow: var(--ww-shadow-lg);
    display: none;
  }

  /* The menu hangs space-3 below the trigger, and that gap belongs to neither
     element — crossing it fired mouseleave and closed the menu before the
     pointer arrived. This bridges the gap so the journey stays inside
     .nav__item the whole way. */
  .nav__menu::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: calc(var(--ww-space-3) * -1);
    height: var(--ww-space-3);
  }

  .nav__menu[data-open] { display: block; }

  .nav__menu li + li { margin-top: var(--ww-space-1); }

  .nav__menu a {
    display: block;
    padding: var(--ww-space-3);
    border-radius: var(--ww-radius-md);
    color: var(--ww-ink);
    text-decoration: none;
    font-weight: var(--ww-weight-medium);
  }

  .nav__menu a:hover {
    background: var(--ww-surface);
    color: var(--ww-ink);
  }

  .nav__menu a[aria-current="page"] { color: var(--ww-primary); }

  .nav__desc {
    display: block;
    font-size: var(--ww-step--1);
    font-weight: var(--ww-weight-normal);
    color: var(--ww-muted);
  }

  /* -- Mobile toggle ------------------------------------------------------ */

  .nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 1px solid var(--ww-border-input);
    border-radius: var(--ww-radius-md);
    color: var(--ww-ink);
    cursor: pointer;
  }

  @media (min-width: 1024px) {
    .nav-toggle { display: none; }
  }

  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: "";
    display: block;
    width: 1.1rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--ww-motion-base) var(--ww-motion-ease),
                opacity var(--ww-motion-fast) var(--ww-motion-ease);
  }

  .nav-toggle__bars::before { transform: translateY(-6px); }
  .nav-toggle__bars::after  { transform: translateY(4px); }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-2px) rotate(-45deg); }

  /* -- Mobile panel ------------------------------------------------------- */

  .mobile-nav {
    position: fixed;
    inset: 4.5rem 0 0;
    z-index: 99;
    padding: var(--ww-space-6) var(--ww-gutter) var(--ww-space-10);
    background: var(--ww-white);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-nav[hidden] { display: none; }

  @media (min-width: 1024px) {
    .mobile-nav { display: none !important; }
  }

  .mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: none;
  }

  .mobile-nav > ul > li + li {
    margin-top: var(--ww-space-2);
    border-top: 1px solid var(--ww-border);
    padding-top: var(--ww-space-2);
  }

  .mobile-nav__group-label {
    display: block;
    padding: var(--ww-space-3) 0;
    font-size: var(--ww-step--1);
    font-weight: var(--ww-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ww-muted);
  }

  .mobile-nav a {
    display: block;
    padding: var(--ww-space-3) 0;
    color: var(--ww-ink);
    font-size: var(--ww-step-1);
    font-weight: var(--ww-weight-medium);
    text-decoration: none;
  }

  .mobile-nav a[aria-current="page"] { color: var(--ww-primary); }

  .mobile-nav__cta {
    margin-top: var(--ww-space-7);
    display: flex;
    flex-direction: column;
    gap: var(--ww-space-3);
  }

  .mobile-nav__cta .btn { width: 100%; justify-content: center; }

  /* Prevents background scroll while the panel is open. */
  body.is-nav-open { overflow: hidden; }

  /* -- Footer ------------------------------------------------------------- */

  .site-footer {
    background: var(--ww-ink);
    color: color-mix(in srgb, var(--ww-white) 72%, transparent);
    padding-block: var(--ww-space-8) var(--ww-space-6);
    border-top: 1px solid color-mix(in srgb, var(--ww-white) 10%, transparent);
  }

  .site-footer__grid {
    display: grid;
    gap: var(--ww-space-8);
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 1024px) {
    .site-footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--ww-space-7); }
  }

  .site-footer__brand { max-width: 20rem; }

  .site-footer__logo img,
  .site-footer__logo .ww-placeholder { width: 170px; }

  .site-footer__tagline {
    margin-top: var(--ww-space-4);
    font-size: var(--ww-step--1);
    line-height: var(--ww-leading-normal);
  }

  .site-footer__contact {
    margin-top: var(--ww-space-4);
    font-size: var(--ww-step--1);
    line-height: var(--ww-leading-normal);
  }

  .site-footer__contact a { font-size: inherit; }

  .site-footer h2 {
    font-size: var(--ww-step--1);
    font-weight: var(--ww-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ww-white) 55%, transparent);
    margin-bottom: var(--ww-space-4);
  }

  .site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: none;
  }

  .site-footer li + li { margin-top: var(--ww-space-3); }

  .site-footer a {
    color: color-mix(in srgb, var(--ww-white) 80%, transparent);
    text-decoration: none;
    font-size: var(--ww-step-0);
  }

  .site-footer a:hover { color: var(--ww-white); }

  .site-footer__social {
    display: flex;
    gap: var(--ww-space-3);
    margin-top: var(--ww-space-5);
  }

  .site-footer__social a {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ww-radius-full);
    border: 1px solid color-mix(in srgb, var(--ww-white) 20%, transparent);
  }

  .site-footer__social a:hover {
    border-color: var(--ww-teal-300);
    color: var(--ww-teal-300);
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ww-space-4);
    justify-content: space-between;
    align-items: center;
    margin-top: var(--ww-space-8);
    padding-top: var(--ww-space-5);
    border-top: 1px solid color-mix(in srgb, var(--ww-white) 14%, transparent);
    font-size: var(--ww-step--1);
  }

  .site-footer__bottom p { margin: 0; }

  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ww-space-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-footer__legal li + li { margin-top: 0; }

  .site-footer__legal a { font-size: var(--ww-step--1); }
}

/* -- Language switcher ----------------------------------------------------- */

@layer components {
  .lang {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .lang__link {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 var(--ww-space-2);
    border-radius: var(--ww-radius-sm);
    font-size: var(--ww-step--1);
    font-weight: var(--ww-weight-semibold);
    letter-spacing: 0.04em;
    color: var(--ww-muted);
    text-decoration: none;
  }

  .lang__link:hover { color: var(--ww-primary); }

  .lang__link[aria-current] {
    color: var(--ww-primary);
    background: var(--ww-teal-50);
  }

  /* In the header it sits with the other actions; on a phone the bar is
     narrow, so it moves into the mobile menu instead. */
  .lang--header { display: none; }

  @media (min-width: 1024px) {
    .lang--header { display: flex; margin-inline-end: var(--ww-space-2); }
  }

  .lang--mobile { margin-inline-start: auto; }
}