/*
 * The Last Broadcast - Foundation CSS Override
 * Load this file AFTER foundation.css:
 *
 * <link rel="stylesheet" href="/css/foundation.min.css">
 * <link rel="stylesheet" href="/css/the-last-broadcast.css">
 */

:root {
  --pz-bg: #090a0a;
  --pz-panel: rgba(14, 16, 16, 0.90);
  --pz-panel-soft: rgba(19, 21, 20, 0.82);
  --pz-panel-solid: #151716;
  --pz-border: #4b4b45;
  --pz-border-light: #77766c;
  --pz-steel: #b9b6aa;
  --pz-steel-dark: #5a5a54;
  --pz-text: #e6e1d4;
  --pz-muted: #aaa596;
  --pz-orange: #f07b22;
  --pz-orange-bright: #ff9b3d;
  --pz-orange-dark: #8f3f14;
  --pz-red: #9e3024;
  --pz-red-bright: #c54431;
  --pz-purple: #8f5cff;
  --pz-green: #6f8b52;
  --pz-shadow: rgba(0, 0, 0, 0.78);
  --pz-radius: 8px;
  --pz-radius-lg: 14px;
  --pz-font-display: "Arial Narrow", "Roboto Condensed", "Oswald", Impact, sans-serif;
  --pz-font-body: Inter, "Segoe UI", Arial, sans-serif;
}

/* ---------- Global ---------- */

html {
  background: var(--pz-bg);
  color-scheme: dark;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--pz-text);
  font-family: var(--pz-font-body);
  background:
    linear-gradient(rgba(4, 5, 5, 0.30), rgba(4, 5, 5, 0.64)),
    var(--pz-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 12%, rgba(240, 123, 34, 0.10), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.18));
}

a {
  color: var(--pz-orange-bright);
  text-decoration-color: rgba(255, 155, 61, 0.45);
  text-underline-offset: 0.18em;
  transition: color 160ms ease, text-shadow 160ms ease;
}

a:hover,
a:focus {
  color: #ffd0a6;
  text-shadow: 0 0 10px rgba(240, 123, 34, 0.36);
}

h1,
h2,
h3,
h4,
h5,
h6,
.menu-text,
.card-divider,
.callout-title {
  color: #f0ece2;
  font-family: var(--pz-font-display);
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #000, 0 0 14px rgba(240, 123, 34, 0.14);
}

hr {
  border-color: rgba(185, 182, 170, 0.24);
}

::selection {
  color: #fff;
  background: rgba(240, 123, 34, 0.78);
}

/* ---------- Main content shells ---------- */

.grid-container,
.grid-container.fluid,
.reveal,
.card,
.callout,
.dropdown-pane,
.off-canvas,
.tabs-content,
.accordion-content {
  color: var(--pz-text);
}

.pz-shell,
.login-panel,
.auth-panel,
.grid-container > .callout {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-lg);
  background:
    linear-gradient(180deg, rgba(38, 39, 36, 0.88), rgba(10, 12, 12, 0.94)),
    var(--pz-panel);
  box-shadow:
    0 18px 55px var(--pz-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 30px rgba(240, 123, 34, 0.035);
  backdrop-filter: blur(6px);
}

.pz-shell::before,
.login-panel::before,
.auth-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 3px,
      rgba(255, 255, 255, 0.018) 4px
    );
}

/* ---------- Top bar / navigation ---------- */

.top-bar,
.top-bar ul,
.title-bar {
  color: var(--pz-text);
  border-bottom: 1px solid var(--pz-border);
  background:
    linear-gradient(180deg, rgba(34, 35, 33, 0.98), rgba(12, 13, 13, 0.98));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.top-bar a,
.menu a {
  color: var(--pz-text);
  font-family: var(--pz-font-display);
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.top-bar a:hover,
.menu a:hover,
.menu .is-active > a {
  color: #fff;
  background: linear-gradient(180deg, rgba(240, 123, 34, 0.20), rgba(240, 123, 34, 0.07));
  box-shadow: inset 0 -2px 0 var(--pz-orange);
}

.menu-icon::after {
  background: var(--pz-steel);
  box-shadow: 0 7px 0 var(--pz-steel), 0 14px 0 var(--pz-steel);
}

/* ---------- Buttons ---------- */

.button,
button,
input[type="submit"],
input[type="button"] {
  position: relative;
  overflow: hidden;
  min-height: 2.75rem;
  margin-bottom: 0.85rem;
  border: 1px solid #26658b;
  border-radius: 4px;
  color: #f5f7f8;
  font-family: var(--pz-font-display);
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  background:
    linear-gradient(180deg, rgba(35, 135, 194, 0.96), rgba(15, 88, 132, 0.96));
  box-shadow:
    0 5px 0 #0a3b5a,
    0 10px 22px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition:
    transform 130ms ease,
    filter 130ms ease,
    box-shadow 130ms ease;
}

.button::after,
button::after,
input[type="submit"]::after,
input[type="button"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,0.08) 42%, transparent 68%);
  transform: translateX(-120%);
  transition: transform 300ms ease;
}

.button:hover,
.button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="button"]:hover {
  color: #fff;
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow:
    0 6px 0 #0a3b5a,
    0 14px 28px rgba(0, 0, 0, 0.46),
    0 0 18px rgba(39, 142, 201, 0.18);
}

.button:hover::after,
button:hover::after {
  transform: translateX(120%);
}

.button:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #0a3b5a, 0 5px 12px rgba(0, 0, 0, 0.35);
}

.button.alert,
.alert.button,
.button.register,
.button.secondary.alert {
  border-color: #7c251d;
  background: linear-gradient(180deg, var(--pz-red-bright), var(--pz-red));
  box-shadow:
    0 5px 0 #591813,
    0 10px 22px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.button.warning {
  color: #15100a;
  border-color: var(--pz-orange-dark);
  background: linear-gradient(180deg, var(--pz-orange-bright), var(--pz-orange));
  box-shadow: 0 5px 0 #7b310e, 0 10px 22px rgba(0, 0, 0, 0.38);
}

.button.success {
  border-color: #415933;
  background: linear-gradient(180deg, #7f9f5e, #536f3f);
  box-shadow: 0 5px 0 #304326, 0 10px 22px rgba(0, 0, 0, 0.38);
}

.button.hollow {
  color: var(--pz-orange-bright);
  border: 1px solid var(--pz-orange);
  background: rgba(14, 16, 16, 0.52);
  box-shadow: inset 0 0 16px rgba(240, 123, 34, 0.05);
}

.button.hollow:hover {
  color: #fff;
  background: rgba(240, 123, 34, 0.18);
}

/* ---------- Forms ---------- */

label,
legend {
  margin-bottom: 0.42rem;
  color: #ddd7c9;
  font-family: var(--pz-font-display);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

input,
textarea,
select,
.input-group-field {
  min-height: 2.7rem;
  color: #f3efe5 !important;
  border: 1px solid #3e4444 !important;
  border-radius: 3px !important;
  background:
    linear-gradient(180deg, rgba(15, 18, 18, 0.90), rgba(24, 27, 26, 0.90)) !important;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.58),
    0 1px 0 rgba(255, 255, 255, 0.035) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

input::placeholder,
textarea::placeholder {
  color: #77766e;
}

input:focus,
textarea:focus,
select:focus,
.input-group-field:focus {
  border-color: var(--pz-orange) !important;
  background: rgba(18, 20, 19, 0.97) !important;
  box-shadow:
    0 0 0 2px rgba(240, 123, 34, 0.16),
    0 0 18px rgba(240, 123, 34, 0.10),
    inset 0 2px 7px rgba(0, 0, 0, 0.55) !important;
}

select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pz-orange) 50%),
    linear-gradient(135deg, var(--pz-orange) 50%, transparent 50%) !important;
}

.input-group-label {
  color: var(--pz-orange-bright);
  border-color: var(--pz-border);
  background: #202220;
}

.form-error {
  color: #ff796c;
}

.is-invalid-input:not(:focus) {
  border-color: var(--pz-red-bright) !important;
  background-color: rgba(82, 24, 20, 0.42) !important;
}

/* ---------- Cards / callouts ---------- */

.card,
.callout {
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius);
  color: var(--pz-text);
  background:
    linear-gradient(180deg, rgba(33, 35, 33, 0.92), rgba(17, 19, 18, 0.94));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.card-divider {
  color: #f1eadc;
  border-bottom: 1px solid var(--pz-border);
  background:
    linear-gradient(180deg, rgba(79, 53, 33, 0.84), rgba(37, 29, 23, 0.90));
}

.callout.primary {
  border-color: #355b73;
  background: rgba(18, 43, 58, 0.86);
}

.callout.warning {
  border-color: var(--pz-orange-dark);
  background: rgba(91, 44, 14, 0.80);
}

.callout.alert {
  border-color: #6f241d;
  background: rgba(73, 24, 20, 0.82);
}

.callout.success {
  border-color: #465c38;
  background: rgba(35, 55, 29, 0.84);
}

/* ---------- Tables ---------- */

table,
table tbody,
table thead,
table tfoot {
  color: var(--pz-text);
  border-color: var(--pz-border);
  background: rgba(15, 17, 16, 0.90);
}

table thead,
table tfoot {
  color: #f4eee1;
  font-family: var(--pz-font-display);
  text-transform: uppercase;
  background: #262824;
}

table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}

table tbody tr:hover {
  background: rgba(240, 123, 34, 0.08);
}

/* ---------- Tabs / accordion ---------- */

.tabs,
.accordion {
  border-color: var(--pz-border);
  background: transparent;
}

.tabs-title > a,
.accordion-title {
  color: var(--pz-muted);
  border-color: var(--pz-border);
  font-family: var(--pz-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #1c1e1d;
}

.tabs-title > a:hover,
.tabs-title > a:focus,
.tabs-title.is-active > a,
.accordion-title:hover,
.accordion-title:focus {
  color: #fff;
  background: rgba(240, 123, 34, 0.14);
}

.tabs-title.is-active > a {
  box-shadow: inset 0 -2px 0 var(--pz-orange);
}

/* ---------- Pagination ---------- */

.pagination a,
.pagination button,
.pagination .current {
  border-radius: 3px;
  color: var(--pz-text);
}

.pagination a:hover,
.pagination button:hover {
  background: rgba(240, 123, 34, 0.14);
}

.pagination .current {
  color: #16100a;
  background: var(--pz-orange);
}

/* ---------- Badges / labels ---------- */

.badge,
.label {
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: #fff;
  font-family: var(--pz-font-display);
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  background: var(--pz-steel-dark);
}

.badge.warning,
.label.warning {
  color: #1b1109;
  background: var(--pz-orange);
}

.badge.alert,
.label.alert {
  background: var(--pz-red);
}

.badge.success,
.label.success {
  background: var(--pz-green);
}

/* ---------- Progress ---------- */

.progress {
  height: 0.8rem;
  border: 1px solid #353936;
  border-radius: 999px;
  background: #0c0e0d;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65);
}

.progress-meter {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pz-orange-dark), var(--pz-orange-bright));
  box-shadow: 0 0 12px rgba(240, 123, 34, 0.34);
}

/* ---------- Reveal / dropdown ---------- */

.reveal,
.dropdown-pane {
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius);
  background:
    linear-gradient(180deg, rgba(31, 33, 31, 0.98), rgba(12, 14, 13, 0.98));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.70);
}

.close-button {
  color: var(--pz-muted);
}

.close-button:hover,
.close-button:focus {
  color: var(--pz-orange-bright);
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs a {
  color: var(--pz-orange-bright);
}

.breadcrumbs li:not(:last-child)::after {
  color: #64645d;
}

/* ---------- Site-specific helpers ---------- */

.pz-login-wrap {
  width: min(100%, 980px);
  margin-inline: auto;
}

.pz-login-panel {
  padding: clamp(1rem, 2.2vw, 2rem);
  border: 1px solid rgba(120, 119, 109, 0.54);
  border-radius: var(--pz-radius-lg);
  background: rgba(10, 12, 12, 0.84);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.58),
    inset 0 0 34px rgba(240, 123, 34, 0.035);
  backdrop-filter: blur(7px);
}

.pz-logo {
  display: block;
  width: min(100%, 500px);
  margin: 0 auto 0.8rem;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.55));
}

.pz-discord-cta {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  transition: transform 160ms ease, filter 160ms ease;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.48));
}

.pz-discord-cta:hover,
.pz-discord-cta:focus {
  transform: translateY(-3px) scale(1.01);
  filter:
    drop-shadow(0 16px 24px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 12px rgba(143, 92, 255, 0.24));
}

.pz-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pz-section-title::before,
.pz-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pz-orange), transparent);
}

.pz-muted {
  color: var(--pz-muted);
}

.pz-orange {
  color: var(--pz-orange-bright);
}

.pz-steel-frame {
  border: 1px solid var(--pz-border-light);
  border-radius: var(--pz-radius);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.62),
    inset 0 0 0 3px rgba(255, 255, 255, 0.04),
    0 12px 30px rgba(0, 0, 0, 0.45);
}

/* ---------- Scrollbar ---------- */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--pz-orange-dark) #111312;
}

*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

*::-webkit-scrollbar-track {
  background: #111312;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid #111312;
  border-radius: 999px;
  background: linear-gradient(var(--pz-orange), var(--pz-orange-dark));
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 39.99875em) {
  .top-bar,
  .top-bar ul {
    background: rgba(12, 14, 13, 0.98);
  }

  .button,
  button,
  input[type="submit"],
  input[type="button"] {
    width: 100%;
  }

  .pz-login-panel {
    padding: 1rem;
    border-radius: 8px;
  }

  h1 {
    font-size: 2rem;
  }
}

/* ---------- Accessibility ---------- */

:focus-visible {
  outline: 2px solid var(--pz-orange-bright);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}