/*
Theme Name: Metal Benders FTC 14739
Theme URI: https://metalbenders.example
Author: Metal Benders
Author URI: https://metalbenders.example
Description: WordPress theme for FTC robotics team 14739 Metal Benders. Navy & steel palette, Black Ops One display titles, Roboto Slab body, animated gears, hazard-stripe marquee, and page templates for Team, Robot, Season, Sponsors, and Contact.
Version: 1.0.0
Requires at least: 5.5
Tested up to: 6.5
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: metal-benders
Tags: robotics, team, education, one-column, custom-menu, featured-images, translation-ready
*/

:root{
  --navy:#003263;
  --navy-deep:#002142;
  --navy-light:#0a4a8a;
  --steel:#f9d347;
  --steel-bright:#ffe067;
  --steel-dim:#d9b32e;
  --ice:#e8f1fa;
  --maxw:72rem;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Roboto Slab",serif;
  background:var(--navy-deep);
  color:var(--ice);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none}

.font-display{font-family:"Black Ops One",system-ui;letter-spacing:.02em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}

/* ---------- icons ---------- */
.mb-icon{width:1em;height:1em;display:inline-block;vertical-align:middle;flex:none}
.mb-icon svg{width:100%;height:100%;display:block}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(0,33,66,.9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--navy-light);
}
.site-header__inner{
  max-width:var(--maxw);margin:0 auto;padding:0 1.25rem;
  height:4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.75rem}
.brand__badge{
  display:grid;place-items:center;width:2.5rem;height:2.5rem;
  background:var(--steel);border-radius:.25rem;color:var(--navy-deep);
}
.brand__badge .mb-icon{width:1.5rem;height:1.5rem}
.brand__badge .mb-icon svg{animation:gear 24s linear infinite}
.brand__name{display:block;font-family:"Black Ops One",system-ui;color:var(--steel);font-size:1.125rem;letter-spacing:.04em;line-height:1}
.brand__sub{display:block;font-size:11px;letter-spacing:.3em;color:rgba(232,241,250,.7);font-weight:600;margin-top:2px}

.nav-desktop{display:none;align-items:center;gap:1.75rem}
.nav-desktop a{font-size:.875rem;font-weight:600;letter-spacing:.02em;color:rgba(232,241,250,.8);transition:color .2s}
.nav-desktop a:hover,.nav-desktop a.is-active{color:var(--steel)}
.nav-cta{
  background:var(--steel);color:var(--navy-deep);font-family:"Black Ops One",system-ui;
  font-size:.875rem;padding:.5rem 1rem;border-radius:.25rem;transition:background .2s,transform .1s;
}
.nav-cta:hover{background:var(--steel-bright)}
.nav-cta:active{transform:scale(.98)}

.nav-toggle{display:inline-flex;align-items:center;justify-content:center;color:var(--steel);padding:.5rem}
.nav-toggle .mb-icon{width:1.5rem;height:1.5rem}
.nav-toggle .mb-icon[data-icon="x"]{display:none}
.nav-open .nav-toggle .mb-icon[data-icon="menu"]{display:none}
.nav-open .nav-toggle .mb-icon[data-icon="x"]{display:block}

.nav-mobile{display:none;background:var(--navy-deep);border-top:1px solid var(--navy-light);padding:0 1.25rem}
.nav-open .nav-mobile{display:block}
.nav-mobile a{
  display:block;padding:.85rem 0;font-size:1rem;font-weight:600;
  border-bottom:1px solid rgba(10,74,138,.5);color:rgba(232,241,250,.9);
}
.nav-mobile a:last-child{border-bottom:0}
.nav-mobile a.is-active,.nav-mobile a:hover{color:var(--steel)}

@media(min-width:48rem){
  .nav-desktop{display:flex}
  .nav-toggle{display:none}
}

.site-main{padding-top:4rem}

/* ---------- shared ---------- */
.section{padding:5rem 0}
.section--navy{background:var(--navy)}
.section--deep{background:var(--navy-deep)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.3em;color:var(--steel)}
.h2{font-family:"Black Ops One",system-ui;font-size:2rem;color:var(--ice);line-height:1}
@media(min-width:48rem){.h2{font-size:2.5rem}}
.text-steel{color:var(--steel)}
.text-outline{-webkit-text-stroke:1.5px rgba(249,211,71,.35);color:transparent}

.blueprint-grid{
  background-image:
    linear-gradient(rgba(249,211,71,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(249,211,71,.06) 1px,transparent 1px);
  background-size:44px 44px;
}
.hazard-stripes{
  background-image:repeating-linear-gradient(-45deg,var(--steel) 0,var(--steel) 18px,var(--navy-deep) 18px,var(--navy-deep) 36px);
}
.hazard-bar{height:.75rem;width:100%}
.hazard-bar--lg{height:1rem}

/* ---------- page header ---------- */
.page-header{position:relative;background:var(--navy-deep);border-bottom:1px solid var(--navy-light);overflow:hidden}
.page-header__inner{max-width:var(--maxw);margin:0 auto;padding:5rem 1.25rem}
@media(min-width:64rem){.page-header__inner{padding:7rem 1.25rem}}
.breadcrumb{font-size:12px;font-weight:600;letter-spacing:.25em;color:rgba(232,241,250,.5);margin-bottom:1.5rem}
.breadcrumb a:hover{color:var(--steel)}
.breadcrumb .sep{margin:0 .5rem;color:rgba(249,211,71,.6)}
.breadcrumb .current{color:var(--steel)}
.page-header h1{font-family:"Black Ops One",system-ui;font-size:2.5rem;color:var(--ice);line-height:.95;margin-top:.75rem}
@media(min-width:48rem){.page-header h1{font-size:3rem}}
@media(min-width:64rem){.page-header h1{font-size:3.75rem}}
.page-header .lead{margin-top:1.25rem;font-size:1.125rem;color:rgba(232,241,250,.75);max-width:42rem;line-height:1.7}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;font-family:"Black Ops One",system-ui;
  padding:.875rem 1.5rem;border-radius:.25rem;transition:background .2s,transform .1s;
  min-height:44px;font-size:1rem;
}
.btn--steel{background:var(--steel);color:var(--navy-deep)}
.btn--steel:hover{background:var(--steel-bright)}
.btn--outline{border:2px solid rgba(249,211,71,.6);color:var(--steel)}
.btn--outline:hover{background:rgba(249,211,71,.1)}
.btn--navy{background:var(--navy-deep);color:var(--steel)}
.btn--navy:hover{background:var(--navy)}
.btn:active{transform:scale(.98)}
.btn .mb-icon{width:1.25rem;height:1.25rem}

/* ---------- hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;flex-direction:column;background:var(--navy-deep);overflow:hidden}
.hero__gear{position:absolute;pointer-events:none;color:rgba(10,74,138,.3)}
.hero__gear--tr{top:-6rem;right:-6rem;width:24rem;height:24rem;animation:gear 24s linear infinite}
.hero__gear--bl{bottom:2.5rem;left:-7rem;width:20rem;height:20rem;color:rgba(10,74,138,.2);animation:gear 18s linear infinite reverse}
.hero__inner{flex:1;display:flex;align-items:center;max-width:var(--maxw);margin:0 auto;width:100%;padding:3rem 1.25rem 4rem}
.hero__grid{display:grid;gap:3rem;align-items:center;width:100%}
@media(min-width:64rem){.hero__grid{grid-template-columns:1fr 1fr}}
.hero__badge{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid rgba(249,211,71,.4);background:rgba(0,50,99,.6);
  padding:.375rem .75rem;border-radius:.25rem;margin-bottom:1.5rem;
}
.hero__badge .mb-icon{width:1rem;height:1rem;color:var(--steel)}
.hero__badge span{font-size:12px;font-weight:700;letter-spacing:.25em;color:var(--steel)}
.hero h1{font-family:"Black Ops One",system-ui;font-size:3rem;line-height:.95;color:var(--ice)}
@media(min-width:48rem){.hero h1{font-size:3.75rem}}
@media(min-width:64rem){.hero h1{font-size:4.5rem}}
.hero__lead{margin-top:1.5rem;font-size:1.125rem;color:rgba(232,241,250,.75);max-width:28rem;line-height:1.7}
.hero__actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem}
.hero__media{position:relative}
.hero__media-frame{position:absolute;inset:-.75rem;border:2px solid rgba(249,211,71,.3);border-radius:.25rem;pointer-events:none}
.hero__media img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:.25rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}
.hero__media-label{
  position:absolute;bottom:-1.25rem;left:1.25rem;background:var(--steel);color:var(--navy-deep);
  padding:.5rem 1rem;border-radius:.25rem;font-family:"Black Ops One",system-ui;
  font-size:.875rem;letter-spacing:.04em;box-shadow:0 10px 15px rgba(0,0,0,.2);
}

/* ---------- marquee ---------- */
.marquee{background:var(--steel);padding:.75rem 0;overflow:hidden;border-top:4px solid var(--navy-deep);border-bottom:4px solid var(--navy-deep)}
.marquee__track{display:flex;white-space:nowrap;width:max-content;animation:marquee 28s linear infinite}
.marquee__item{display:flex;align-items:center}
.marquee__word{font-family:"Black Ops One",system-ui;color:var(--navy-deep);font-size:1.25rem;letter-spacing:.05em;padding:0 1.5rem}
.marquee__cog{width:1.25rem;height:1.25rem;color:rgba(0,33,66,.7)}
.marquee__cog svg{animation:gear 12s linear infinite}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
@media(min-width:64rem){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{border-left:4px solid var(--steel);padding-left:1.25rem}
.stat__value{font-family:"Black Ops One",system-ui;font-size:2.25rem;color:var(--steel)}
@media(min-width:64rem){.stat__value{font-size:3rem}}
.stat__label{margin-top:.25rem;font-size:.875rem;font-weight:600;letter-spacing:.02em;color:rgba(232,241,250,.7);text-transform:uppercase}

/* ---------- cards ---------- */
.cards-grid{display:grid;gap:1.25rem;margin-top:2.5rem}
@media(min-width:48rem){.cards-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.cards-grid--3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:48rem){.cards-grid--2{grid-template-columns:repeat(2,1fr)}}

.card{display:block;background:var(--navy);border:1px solid var(--navy-light);border-radius:.25rem;padding:1.5rem;transition:border-color .2s;height:100%}
.card:hover{border-color:rgba(249,211,71,.6)}
.card__head{display:flex;align-items:center;justify-content:space-between}
.card__title{font-family:"Black Ops One",system-ui;font-size:1.125rem;color:var(--ice);letter-spacing:.04em}
.card__arrow{width:1.25rem;height:1.25rem;color:var(--steel);transition:transform .2s}
.card:hover .card__arrow{transform:translateX(.25rem)}
.card__desc{margin-top:.5rem;font-size:.875rem;color:rgba(232,241,250,.65);line-height:1.7}

.feature-card{background:var(--navy);border:1px solid var(--navy-light);border-radius:.25rem;padding:1.5rem;transition:border-color .2s;height:100%}
.feature-card:hover{border-color:rgba(249,211,71,.6)}
.feature-card .mb-icon{width:1.75rem;height:1.75rem;color:var(--steel)}
.feature-card h3{font-family:"Black Ops One",system-ui;font-size:1.125rem;color:var(--ice);margin-top:.75rem;letter-spacing:.04em}
.feature-card p{margin-top:.5rem;font-size:.875rem;color:rgba(232,241,250,.65);line-height:1.7}

.feature-card--top{
  border-top:4px solid var(--steel);background:var(--navy-deep);
  border-left:1px solid var(--navy-light);border-right:1px solid var(--navy-light);border-bottom:1px solid var(--navy-light);
}
.feature-card--top h3{margin-top:0}

/* ---------- split / media ---------- */
.split{display:grid;gap:3.5rem;align-items:center}
@media(min-width:64rem){.split{grid-template-columns:1fr 1fr}}
.media-frame{position:relative}
.media-frame img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:.25rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}
.media-frame__hazard{position:absolute;top:-1rem;right:-1rem;width:6rem;height:6rem;border-radius:.25rem;opacity:.9}
.lead-text{color:rgba(232,241,250,.75);line-height:1.8}
.lead-text + .lead-text{margin-top:1rem}

/* ---------- robot gallery ---------- */
.robot-gallery{display:grid;gap:1.5rem}
@media(min-width:64rem){.robot-gallery{grid-template-columns:3fr 2fr}}
.robot-shot{position:relative;height:100%}
.robot-shot img{width:100%;height:100%;min-height:280px;object-fit:cover;border-radius:.25rem;box-shadow:0 20px 25px -5px rgba(0,0,0,.4)}
.robot-shot__tag{
  position:absolute;bottom:1rem;left:1rem;background:rgba(0,33,66,.85);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:.5rem 1rem;border-radius:.25rem;border:1px solid rgba(249,211,71,.3);
  font-family:"Black Ops One",system-ui;color:var(--steel);font-size:.875rem;letter-spacing:.04em;
}

/* ---------- season cards ---------- */
.season-grid{display:grid;gap:1.25rem}
@media(min-width:48rem){.season-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.season-grid{grid-template-columns:repeat(4,1fr)}}
.season-card{position:relative;background:var(--navy-deep);border:1px solid var(--navy-light);border-radius:.25rem;padding:1.5rem;height:100%;transition:border-color .2s}
.season-card:hover{border-color:rgba(249,211,71,.6)}
.season-card__when{
  position:absolute;top:-1rem;left:1.25rem;background:var(--steel);color:var(--navy-deep);
  font-family:"Black Ops One",system-ui;font-size:12px;padding:.375rem .75rem;border-radius:.25rem;letter-spacing:.04em;
}
.season-card .mb-icon{width:2rem;height:2rem;color:var(--steel);margin-top:.75rem}
.season-card h3{font-family:"Black Ops One",system-ui;font-size:1.25rem;color:var(--ice);margin-top:1rem;letter-spacing:.04em}
.season-card p{margin-top:.75rem;font-size:.875rem;color:rgba(232,241,250,.65);line-height:1.7}

/* ---------- sponsors ---------- */
.sponsors-section{background:var(--steel);padding:5rem 0;position:relative;overflow:hidden}
.sponsors-section__gear{position:absolute;bottom:-5rem;right:-5rem;width:18rem;height:18rem;color:rgba(0,33,66,.1);animation:gear 24s linear infinite}
.sponsors-section h2{font-family:"Black Ops One",system-ui;font-size:2rem;color:var(--navy-deep)}
@media(min-width:48rem){.sponsors-section h2{font-size:2.5rem}}
.sponsors-section .lead{margin-top:1rem;color:rgba(0,33,66,.8);font-weight:500;line-height:1.8}
.perks-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.perk{background:var(--navy-deep);color:var(--ice);border-radius:.25rem;padding:1.25rem;display:flex;align-items:flex-start;gap:.75rem}
.perk .mb-icon{width:1.25rem;height:1.25rem;color:var(--steel);flex:none;margin-top:2px}
.perk span{font-weight:600;font-size:.875rem;line-height:1.4}

/* ---------- contact ---------- */
.contact-section{text-align:center}
.contact-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.contact-pill{display:inline-flex;align-items:center;gap:.5rem;border:2px solid rgba(249,211,71,.5);color:var(--steel);padding:.875rem 1.5rem;border-radius:.25rem;font-weight:600;font-size:.875rem}
.contact-pill .mb-icon{width:1.25rem;height:1.25rem}
.contact-note{margin-top:2.5rem;color:rgba(232,241,250,.6);line-height:1.8}
.contact-note a{color:var(--steel)}
.contact-note a:hover{text-decoration:underline}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep);border-top:1px solid var(--navy-light)}
.site-footer__inner{
  max-width:var(--maxw);margin:0 auto;padding:2.5rem 1.25rem;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1.5rem;
}
@media(min-width:48rem){.site-footer__inner{flex-direction:row}}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem}
.footer-nav a{font-size:.875rem;color:rgba(232,241,250,.6);font-weight:600;transition:color .2s}
.footer-nav a:hover{color:var(--steel)}
.footer-copy{font-size:12px;color:rgba(232,241,250,.5);text-align:center}
@media(min-width:48rem){.footer-copy{text-align:right}}
.footer-copy em{font-style:italic}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- animations ---------- */
@keyframes gear{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee__track,.hero__gear,.brand__badge .mb-icon svg,.marquee__cog svg,.sponsors-section__gear{animation:none}
}

/* ---------- WP core alignment ---------- */
.alignleft{float:left;margin:0 1.5rem 1rem 0}
.alignright{float:right;margin:0 0 1rem 1.5rem}
.aligncenter{display:block;margin:1.5rem auto}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:.8rem;color:rgba(232,241,250,.6);text-align:center;margin-top:.5rem}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);}