/* css/layout.css — header, footer, dashboard shell structural layout. Mobile-first. */

/* ===== Header ===== */
.cs-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.cs-header--scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--color-border);
}

.cs-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.cs-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.cs-header__logo-ink { color: var(--color-ink); }
.cs-header__logo-brand { color: var(--color-primary); }

.cs-header__nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.cs-header__nav a {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.cs-header__nav a:hover { color: var(--color-primary); }

.cs-header__actions {
  display: none;
  align-items: center;
  gap: var(--space-3);
}

.cs-header__mobile-toggle > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.cs-header__mobile-toggle > summary:hover { background: var(--color-bg); }

.cs-header__mobile-toggle[open] > .cs-header__mobile-nav {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
}

.cs-header__mobile-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.cs-header__mobile-nav a {
  padding: var(--space-3) var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.cs-header__mobile-nav a:hover { background: var(--color-bg); }
.cs-header__mobile-nav a.cs-btn--primary { color: var(--color-surface); }
.cs-header__mobile-nav a.cs-btn--primary:hover { background: var(--color-primary-hover); }

.cs-header__mobile-nav .cs-btn { margin-top: var(--space-2); text-align: center; }

@media (min-width: 768px) {
  .cs-header__nav { display: flex; }
  .cs-header__actions { display: flex; }
  .cs-header__mobile-toggle { display: none; }
}

/* Every page loads the real Google Fonts (Inter / Plus Jakarta Sans) rather
   than falling back to a system font, which makes the header's nav + actions
   row a few pixels too wide to fit between 768px (where the mobile hamburger
   switches to the full nav) and 1024px (where the header gets more breathing
   room from the wider container). Trim gaps and header-button padding
   slightly in that band. Shared here (not a single page's CSS) because any
   page rendering the public header — not just the landing page — needs it. */
@media (min-width: 768px) and (max-width: 1023px) {
  .cs-header__bar { gap: var(--space-2); }
  .cs-header__nav { gap: var(--space-2); }
  .cs-header__actions { gap: var(--space-2); }
  .cs-header__actions .cs-btn { padding-left: var(--space-3); padding-right: var(--space-3); }
}

/* ===== Footer ===== */
.cs-footer {
  background: var(--color-ink);
  color: var(--color-border);
  padding: var(--space-16) 0 var(--space-6);
}

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

.cs-footer__brand p {
  color: var(--color-text-muted-on-dark);
  font-size: var(--font-size-sm);
  max-width: 32ch;
}

.cs-footer .cs-header__logo { color: var(--color-surface); }
.cs-footer .cs-header__logo-ink { color: var(--color-surface); }
.cs-footer .cs-header__logo-brand { color: var(--color-primary-on-dark); }

.cs-footer h3 {
  color: var(--color-surface);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}

.cs-footer a {
  display: block;
  color: var(--color-text-muted-on-dark);
  text-decoration: none;
  font-size: var(--font-size-sm);
  padding: var(--space-1) 0;
}

.cs-footer a:hover { color: var(--color-surface); }

.cs-footer__bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(226, 232, 240, 0.15);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted-on-dark);
}

/* Slim variant for the dashboard pages — a marketing footer's
   Features/Pricing/Reviews links don't belong in an authenticated app
   area, just copyright + legal. */
.cs-footer--basic {
  background: transparent;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-12);
  padding: var(--space-6) 0;
}
.cs-footer__basic {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.cs-footer__basic nav { display: flex; gap: var(--space-4); }
.cs-footer--basic a { color: var(--color-text-muted); }
.cs-footer--basic a:hover { color: var(--color-ink); }
.cs-footer__basic a { display: inline; padding: 0; }

@media (min-width: 640px) {
  .cs-footer__basic { flex-direction: row; justify-content: space-between; text-align: left; }
}

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

@media (min-width: 1024px) {
  .cs-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ===== Dashboard shell ===== */
/* No sidebar: with only two nav items (Reports, Pricing) plus sign-out,
   a full-height sidebar column left far more blank space than content.
   The dashboard topbar mirrors the public .cs-header pattern instead —
   logo, inline nav (desktop) / <details> hamburger dropdown (mobile),
   and account actions — so there's one nav pattern for the whole site. */
.cs-shell {
  display: block;
  min-height: 100vh;
  background-color: var(--color-bg);
  /* Soft brand glow fading from the top, over a faint dot grid. */
  background-image:
    radial-gradient(ellipse 80% 420px at 50% 0, var(--color-pattern-glow), transparent),
    radial-gradient(var(--color-pattern-dot) 1.2px, transparent 1.2px);
  background-size: 100% 100%, var(--pattern-dot-gap) var(--pattern-dot-gap);
  background-repeat: no-repeat, repeat;
}

.cs-shell__topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* Same split as .cs-header / .cs-header__bar.cs-container: the sticky
   background+border stay full-bleed, while this inner bar (combined
   with .cs-container in the markup) caps and centers the actual nav
   content so it doesn't stretch edge-to-edge on very wide screens. */
.cs-shell__topbar-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.cs-shell__nav { display: none; align-items: center; gap: var(--space-6); margin-left: var(--space-6); }
.cs-shell__nav-link,
.cs-shell__signout { display: inline-flex; align-items: center; gap: var(--space-2); }
.cs-shell__nav-link svg,
.cs-shell__signout svg { flex-shrink: 0; }
.cs-shell__nav-link { color: var(--color-text); text-decoration: none; font-size: var(--font-size-sm); font-weight: 500; }
.cs-shell__nav-link:hover { color: var(--color-primary); }
.cs-shell__nav-link--active { color: var(--color-primary); font-weight: 700; }

.cs-shell__topbar-actions { min-width: 0; display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }

.cs-shell__signout { color: var(--color-danger); text-decoration: none; font-size: var(--font-size-sm); font-weight: 500; }
.cs-shell__signout:hover { text-decoration: underline; }

/* Account badge — shows the signed-in user's email, truncated with an
   ellipsis when the bar is tight (full address is in the title tooltip). */
.cs-shell__avatar {
  height: 32px;
  max-width: 14ch;
  min-width: 0;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-surface);
  border: none;
  font-size: var(--font-size-xs);
  font-weight: 600;
  display: inline-block;
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .cs-shell__avatar {display: none;}
}

.cs-shell__mobile-toggle > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.cs-shell__mobile-toggle > summary:hover { background: var(--color-bg); }

.cs-shell__mobile-toggle[open] > .cs-shell__mobile-nav {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
}

.cs-shell__mobile-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.cs-shell__mobile-nav a {
  padding: var(--space-3) var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.cs-shell__mobile-nav a:hover { background: var(--color-bg); }
.cs-shell__mobile-nav .cs-shell__nav-link--active { background: var(--color-primary-light); }
.cs-shell__mobile-nav .cs-shell__signout { color: var(--color-danger); }

.cs-shell__title { font-size: var(--font-size-xl); margin: 0; }

/* Same cap, centering and side padding as .cs-container (which the topbar
   and footer use), so the nav, page content and footer share left/right
   edges at every viewport width. */
#cs-shell-content {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .cs-shell__nav { display: flex; }
  .cs-shell__mobile-toggle { display: none; }
}

@media (min-width: 1024px) {
  #cs-shell-content { padding-top: var(--space-6); padding-bottom: var(--space-6); }
}