/*
Theme Name: Malfunctionz 9668
Theme URI: https://www.malfunctionz.org/
Author: West Robotics / FIRST Team 9668
Description: A student-friendly block theme for the Malfunctionz team handbook, season archive, build logs, and public team story.
Version: 1.2.1
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: malfunctionz-9668
*/

:root {
  --mf-red: #c8102e;
  --mf-red-bright: #ef3340;
  --mf-navy: #00205b;
  --mf-navy-deep: #06182b;
  --mf-ink: #050b14;
  --mf-blue-panel: #0b2b4c;
  --mf-ice: #f4f7fa;
  --mf-muted: #c9d5e1;
  --mf-line: rgba(255, 255, 255, 0.16);
  --mf-grid: rgba(34, 116, 181, 0.16);
  --mf-circuit: rgba(239, 51, 64, 0.9);
  --mf-shadow: 0 22px 60px rgba(1, 8, 20, 0.18);
}

html { scroll-behavior: smooth; }
body {
  overflow-x: hidden;
  background: var(--mf-ice);
}
a { text-underline-offset: 0.18em; }
a:focus-visible,
button:focus-visible {
  outline: 3px solid #ff6875;
  outline-offset: 4px;
}

.mf-logo-band,
.mf-hero,
.mf-page-hero,
.mf-site-footer {
  background-color: #04152a !important;
  background-image:
    linear-gradient(rgba(26, 105, 170, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 105, 170, 0.13) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(13, 58, 103, 0.64), transparent 34%),
    linear-gradient(145deg, #020b18 0%, #031832 54%, #061e3a 100%) !important;
  background-size: 42px 42px, 42px 42px, auto, auto !important;
}

.mf-site-header {
  position: relative;
  z-index: 20;
  background:
    linear-gradient(90deg, var(--mf-red) 0 10%, transparent 10% 100%),
    linear-gradient(110deg, #050b14 0%, #06182b 70%, #071e38 100%) !important;
  border-bottom: 1px solid rgba(85, 158, 218, 0.3);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.28);
}
.mf-site-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  width: min(32vw, 430px);
  height: 3px;
  background: var(--mf-red);
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}
.mf-header-inner {
  position: relative;
}
.mf-header-inner::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  margin-right: -0.4rem;
  background: var(--mf-red-bright);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(239, 51, 64, 0.18), 0 0 18px rgba(239, 51, 64, 0.7);
}
.mf-site-header .wp-block-navigation-item__content {
  position: relative;
  padding: 0.55rem 0.15rem;
  text-decoration: none;
}
.mf-site-header .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 0;
  left: 50%;
  height: 2px;
  background: var(--mf-red-bright);
  transition: right 160ms ease, left 160ms ease;
}
.mf-site-header .wp-block-navigation-item__content:hover::after,
.mf-site-header .current-menu-item .wp-block-navigation-item__content::after {
  right: 0;
  left: 0;
}
.mf-site-header .wp-block-navigation__responsive-container.is-menu-open {
  background:
    linear-gradient(rgba(26, 105, 170, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 105, 170, 0.13) 1px, transparent 1px),
    #030e1e !important;
  background-size: 36px 36px !important;
  color: #fff !important;
  padding: 2rem;
}
.mf-site-title a {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 20px rgba(85, 158, 218, 0.22);
}

.mf-logo-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 0;
  padding-top: clamp(3rem, 7vw, 7rem) !important;
  padding-bottom: clamp(2.5rem, 6vw, 5.5rem) !important;
}
.mf-logo-band::before,
.mf-logo-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(180px, 28vw, 440px);
  height: clamp(90px, 13vw, 210px);
  background: var(--mf-red);
  opacity: 0.98;
}
.mf-logo-band::before {
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 64% 54%, 30% 54%, 22% 68%, 0 68%);
}
.mf-logo-band::after {
  right: 0;
  bottom: 0;
  clip-path: polygon(72% 36%, 100% 36%, 100% 100%, 0 100%, 34% 52%, 60% 52%);
}
.mf-logo-image img {
  position: relative;
  z-index: 2;
  width: min(1100px, 90vw) !important;
  height: auto !important;
  filter: invert(1) contrast(1.15) drop-shadow(0 10px 34px rgba(0, 0, 0, 0.5));
  mix-blend-mode: screen;
}

.mf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid rgba(85, 158, 218, 0.32);
}
.mf-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: min(72vw, 900px);
  height: 5px;
  transform: translateX(-50%);
  background: var(--mf-red);
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
}
.mf-hero::after {
  content: "9668";
  position: absolute;
  z-index: -1;
  right: -0.05em;
  bottom: -0.18em;
  color: rgba(77, 144, 199, 0.07);
  font-family: var(--wp--preset--font-family--mono);
  font-size: clamp(10rem, 27vw, 28rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.1em;
  pointer-events: none;
}
.mf-eyebrow {
  display: inline-block;
  width: fit-content;
  color: #fff;
  background: var(--mf-red);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  padding: 0.55rem 1.35rem;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  text-transform: uppercase;
}
.mf-hero-title {
  max-width: 900px;
  font-size: clamp(3rem, 7vw, 6.7rem);
  letter-spacing: -0.06em;
  line-height: 0.96;
  text-shadow: 0 9px 35px rgba(0, 0, 0, 0.42);
}
.mf-lede {
  max-width: 760px;
  color: #d6e0ea;
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.65;
}
.mf-season-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(3, 13, 28, 0.92), rgba(8, 42, 74, 0.84));
  border: 1px solid rgba(84, 156, 214, 0.35);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}
.mf-season-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 44%;
  background: var(--mf-red);
}
.mf-season-number {
  font-size: clamp(3.5rem, 8vw, 6.6rem);
  letter-spacing: -0.08em;
  line-height: 1;
}
.mf-red-strip {
  position: relative;
  background: linear-gradient(110deg, #a80924 0%, var(--mf-red) 56%, #e02a3a 100%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18), inset 0 -1px rgba(0, 0, 0, 0.18);
}
.mf-red-strip::before,
.mf-red-strip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 72px;
  height: 12px;
  transform: translateY(-50%) skewX(-32deg);
  background: repeating-linear-gradient(90deg, #fff 0 8px, transparent 8px 14px);
  opacity: 0.55;
}
.mf-red-strip::before { left: max(18px, calc((100vw - 1280px) / 2)); }
.mf-red-strip::after { right: max(18px, calc((100vw - 1280px) / 2)); }
.mf-red-strip .wp-block-column + .wp-block-column {
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  padding-left: 2rem;
}
.mf-resource-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 190px;
  padding-left: clamp(7.5rem, 34%, 10rem) !important;
  background: linear-gradient(105deg, #06182b 0 29%, var(--mf-red) 29% 31%, #fff 31% 100%) !important;
  border: 1px solid #d7dee6;
  border-radius: 2px;
  box-shadow: var(--mf-shadow);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.mf-resource-card::before {
  content: "01";
  position: absolute;
  top: 50%;
  left: 7%;
  transform: translateY(-50%);
  color: #fff;
  font-family: var(--wp--preset--font-family--mono);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.08em;
  text-shadow: 0 0 20px rgba(85, 158, 218, 0.35);
}
.wp-block-column:nth-child(2) > .mf-resource-card::before { content: "02"; }
.wp-block-column:nth-child(3) > .mf-resource-card::before { content: "03"; }
.mf-resource-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 58px rgba(1, 8, 20, 0.22);
}
.mf-resource-card .mf-card-label {
  color: var(--mf-red);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.mf-quote-panel {
  position: relative;
  background:
    linear-gradient(rgba(26, 105, 170, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 105, 170, 0.1) 1px, transparent 1px),
    linear-gradient(140deg, #0c3158, #061527) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
  border-left: 6px solid var(--mf-red);
  box-shadow: var(--mf-shadow);
}
.mf-page-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 5px solid var(--mf-red);
}
.mf-page-hero::after {
  content: "9668";
  position: absolute;
  right: 4vw;
  bottom: -0.3em;
  color: rgba(93, 161, 218, 0.09);
  font-family: var(--wp--preset--font-family--mono);
  font-size: clamp(7rem, 18vw, 16rem);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.mf-page-shell > .wp-block-post-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto;
}
.mf-page-shell > .wp-block-post-content { margin-block-start: 0; }
.mf-post-card {
  position: relative;
  overflow: hidden;
  border-top: 0;
  border-left: 7px solid var(--mf-red);
  background: #fff;
  box-shadow: var(--mf-shadow);
}
.mf-post-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 74px;
  height: 7px;
  background: var(--mf-navy);
}
.mf-callout {
  border-left: 5px solid var(--mf-red);
  background: #eef3f7;
}

.mf-home-shell > .wp-block-post-content {
  margin-block-start: 0;
}
.wp-site-blocks > .wp-block-template-part + main,
.wp-site-blocks > main + .wp-block-template-part,
.mf-home-shell > .wp-block-post-content > * {
  margin-block-start: 0;
}
.mf-home-shell .wp-block-buttons .wp-block-button__link {
  position: relative;
  min-width: 9.5rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.mf-home-shell .wp-block-button__link:hover {
  background: var(--mf-red-bright);
  transform: translateY(-2px);
}

.mf-site-footer {
  position: relative;
  overflow: hidden;
  border-top: 6px solid var(--mf-red);
}
.mf-site-footer::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -140px;
  width: 330px;
  height: 330px;
  border: 2px solid rgba(78, 146, 203, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(78, 146, 203, 0.04), 0 0 0 74px rgba(78, 146, 203, 0.03);
}

@media (max-width: 781px) {
  .mf-site-header .wp-block-site-title { font-size: 1rem !important; }
  .mf-site-header { background: linear-gradient(110deg, #050b14, #071e38) !important; }
  .mf-header-inner::before { display: none; }
  .mf-logo-band::before,
  .mf-logo-band::after { opacity: 0.78; }
  .mf-hero::after { bottom: -0.08em; }
  .mf-red-strip::before,
  .mf-red-strip::after { display: none; }
  .mf-red-strip .wp-block-column + .wp-block-column {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding-left: 0;
    padding-top: 1.4rem;
  }
  .mf-resource-card {
    min-height: 170px;
    padding-left: 7.25rem !important;
    background: linear-gradient(105deg, #06182b 0 26%, var(--mf-red) 26% 28%, #fff 28% 100%) !important;
  }
  .mf-resource-card::before { left: 6%; }
}

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