/* ============================================================
 * public-layout.css — Bank ABC Portal API Sandbox
 * Shared styles: public header + footer + page scaffold
 * Used by: tutorial.html, dashboard-preview.html, katalog-sektor.html
 * Load order: tokens.css -> base.css -> components.css
 *             -> public-layout.css -> [page].css
 * ============================================================ */

:root {
  --pub-hdr-bg:      #1b3a5c;
  --p3-bg:           #f3e5f5;
  --p3-border:       #ab47bc;
  --p3-text:         #6a1b9a;
  --p3-subtle:       rgba(171, 71, 188, 0.12);
  --p1-border-soft:  rgba(100, 181, 246, 0.32);
  --p2-border-soft:  rgba(255, 152,   0, 0.28);
  --p3-border-soft:  rgba(171,  71, 188, 0.28);
}

*, *::before, *::after { box-sizing: border-box; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.public-body {
  min-height: 100vh; background-color: var(--surface-subtle);
  font-family: var(--font-sans); color: var(--text-primary);
  display: flex; flex-direction: column;
}

/* PUBLIC HEADER */
.pub-header {
  position: sticky; top: 0; z-index: 50;
  background-color: var(--pub-hdr-bg);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center;
  height: 60px; padding: 0 var(--space-8); gap: var(--space-4);
}
.pub-header__brand {
  display: flex; align-items: center;
  gap: var(--space-2); text-decoration: none; flex-shrink: 0;
}
.pub-header__logo {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  background-color: white; color: var(--pub-hdr-bg);
  font-size: var(--text-sm); font-weight: var(--font-bold);
  display: flex; align-items: center; justify-content: center;
}
.pub-header__brand-name {
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: white;
}
.pub-header__back {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); color: rgba(255,255,255,0.55);
  text-decoration: none; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.pub-header__back:hover { color: white; background: rgba(255,255,255,0.1); }
.pub-header__sep { font-size: var(--text-xs); color: rgba(255,255,255,0.25); }
.pub-header__page-title {
  font-size: var(--text-sm); color: rgba(255,255,255,0.75);
  font-weight: var(--font-medium);
}
.pub-header__right {
  margin-left: auto; display: flex; align-items: center; gap: var(--space-3);
}
.pub-header__login {
  font-size: var(--text-sm); font-weight: var(--font-medium);
  color: rgba(255,255,255,0.82); text-decoration: none;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-md);
  transition: color var(--transition-fast);
}
.pub-header__login:hover { color: white; }
.pub-header__register {
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  color: var(--pub-hdr-bg); background-color: white;
  border: none; border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4); cursor: pointer;
  text-decoration: none; transition: opacity var(--transition-fast);
  white-space: nowrap;
}
.pub-header__register:hover { opacity: 0.92; }

/* PUBLIC FOOTER */
.pub-footer {
  background-color: var(--surface-card);
  border-top: 1px solid var(--surface-muted);
  padding: var(--space-6); margin-top: auto;
}
.pub-footer__inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.pub-footer__brand {
  display: flex; align-items: center;
  gap: var(--space-2); font-size: var(--text-xs); color: var(--text-tertiary);
}
.pub-footer__links { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pub-footer__link {
  font-size: var(--text-xs); color: var(--text-secondary);
  text-decoration: none; transition: color var(--transition-fast);
}
.pub-footer__link:hover { color: var(--text-primary); }

/* MAIN SCAFFOLD */
.pub-main {
  flex: 1; max-width: 1100px; width: 100%;
  margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-12);
}

/* SHARED UTILITIES */
.pub-section-label {
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.08em; display: block; margin-bottom: var(--space-2);
}
.pub-section-title {
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--font-bold);
  color: var(--text-primary); margin: 0 0 var(--space-3); letter-spacing: -0.02em;
}
.pub-section-desc {
  font-size: var(--text-sm); color: var(--text-secondary);
  max-width: 600px; line-height: var(--leading-relaxed); margin: 0 0 var(--space-8);
}

@media (max-width: 767px) {
  .pub-header { padding: 0 var(--space-4); }
  .pub-header__page-title { display: none; }
  .pub-header__sep { display: none; }
  .pub-main { padding: var(--space-6) var(--space-4) var(--space-10); }
}