/*
Theme Name: IEEE MetroCon Refresh
Theme URI: https://metrocon.org
Author: MetroCon Web Team
Description: A modern conference theme for IEEE Fort Worth MetroCon. Built for easy page additions via the block editor, with a branded hero, utility event bar, and a set of ready-made MetroCon block patterns (tracks, schedule, speakers, sponsors).
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: metrocon
Tags: blog, event, one-column, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready

Design tokens
-------------
Ink Navy      #0B1D33  primary text / dark surfaces
IEEE Blue     #00629B  primary accent (IEEE's official master-brand blue, editable in Customizer)
Blue Deep     #004A75  hover / pressed states
Saddle Brown  #7A4B27  secondary accent — Fort Worth flag brown (Longhorn silhouette / Stockyards leather)
Brown Light   #A87C4F  brown hover / highlight
Paper         #F7F8FA  light background
Paper Alt     #EEF1F5  card / section background
Slate         #5B6472  secondary text
Line          rgba(11,29,51,.12) hairline rules

Display face : Space Grotesk (geometric, technical)
Body face    : Inter
Utility/mono : IBM Plex Mono (labels, times, track numbers)
*/

/* ---------------------------------------------------------
   1. Tokens
--------------------------------------------------------- */
:root{
  --mc-ink:        #0B1D33;
  --mc-blue:        var(--mc-accent, #00629B);
  --mc-blue-deep:   #004A75;
  --mc-copper:      var(--mc-accent-2, #7A4B27);
  --mc-copper-light:#A87C4F;
  --mc-paper:       #F7F8FA;
  --mc-paper-alt:   #EEF1F5;
  --mc-slate:       #5B6472;
  --mc-line:        rgba(11,29,51,.12);
  --mc-white:       #FFFFFF;

  --mc-font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --mc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mc-font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --mc-container: 1200px;
  --mc-radius: 3px;
  --mc-gap: clamp(1.25rem, 2vw, 2.5rem);

  /* Swappable surface/text tokens — these flip in dark mode.
     --mc-ink / --mc-white above stay FIXED always: they're used for
     the permanently-dark bands (hero, footer, utility bar) which do
     not change with light/dark mode. */
  --mc-surface:       var(--mc-paper);
  --mc-surface-alt:   var(--mc-paper-alt);
  --mc-surface-white: var(--mc-white);
  --mc-text:          var(--mc-ink);
  --mc-text-muted:    var(--mc-slate);
  --mc-border:        var(--mc-line);
  --mc-grid:          rgba(11,29,51,.035);
}

:root[data-theme="dark"]{
  --mc-surface:       #0E1A30;
  --mc-surface-alt:   #172746;
  --mc-surface-white: #0B1526;
  --mc-text:          #EDF1F7;
  --mc-text-muted:    #9FADC2;
  --mc-border:        rgba(237,241,247,.14);
  --mc-grid:          rgba(237,241,247,.035);
}

/* ---------------------------------------------------------
   2. Reset / base
--------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--mc-surface);
  color:var(--mc-text);
  font-family:var(--mc-font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--mc-blue-deep); text-decoration:none; }
a:hover{ color:var(--mc-copper); }
ul{ margin:0; padding:0; }
h1,h2,h3,h4{
  font-family:var(--mc-font-display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  color:var(--mc-text);
}
h1{ font-size:clamp(2.4rem,5vw,4rem); }
h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); }
h3{ font-size:clamp(1.3rem,2.2vw,1.6rem); }
p{ margin:0 0 1.2em; color:var(--mc-text-muted); }
.mc-container{
  max-width:var(--mc-container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
}
:focus-visible{ outline:3px solid var(--mc-copper); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Eyebrow / label utility */
.mc-eyebrow{
  font-family:var(--mc-font-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mc-copper);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:.9em;
}
.mc-eyebrow::before{
  content:"";
  width:.6em; height:.6em;
  background:var(--mc-copper);
  display:inline-block;
}

/* ---------------------------------------------------------
   3. Utility event bar
--------------------------------------------------------- */
.mc-utility-bar{
  background:var(--mc-ink);
  color:var(--mc-paper);
  font-family:var(--mc-font-mono);
  font-size:.8rem;
}
.mc-utility-bar .mc-container{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.5rem;
  align-items:center;
  justify-content:space-between;
  padding-block:.55rem;
}
.mc-utility-bar__info{ display:flex; flex-wrap:wrap; gap:1.25rem; opacity:.9; }
.mc-utility-bar__info span{ white-space:nowrap; }
.mc-utility-bar a.mc-utility-cta{
  color:var(--mc-copper-light);
  font-weight:600;
  letter-spacing:.04em;
}
.mc-utility-bar a.mc-utility-cta:hover{ color:var(--mc-white); }

/* ---------------------------------------------------------
   4. Header / nav
--------------------------------------------------------- */
.mc-header{
  background:var(--mc-surface-white);
  border-bottom:1px solid var(--mc-border);
  position:sticky; top:0; z-index:40;
}
.mc-header .mc-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:.9rem;
  gap:1.5rem;
}
.mc-brand{ display:flex; align-items:center; gap:.75rem; }
.mc-brand .custom-logo-link{ display:block; line-height:0; }
.mc-brand img.custom-logo{
	max-height:48px;
	max-width:48px;
	width:auto;
	height:auto;
	object-fit:contain;
}
.mc-brand__text{ font-family:var(--mc-font-display); font-weight:700; font-size:1.15rem; color:var(--mc-text); text-decoration:none; display:block; }
.mc-brand__text:hover{ color:var(--mc-text); }
.mc-brand__text small{ display:block; font-family:var(--mc-font-mono); font-weight:400; font-size:.65rem; letter-spacing:.1em; color:var(--mc-text-muted); text-transform:uppercase; }

.mc-theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:none; border:1px solid var(--mc-border); cursor:pointer;
  color:var(--mc-text); flex-shrink:0;
}
.mc-theme-toggle:hover{ border-color:var(--mc-copper); color:var(--mc-copper); }
.mc-theme-toggle svg{ width:18px; height:18px; }
.mc-theme-toggle .mc-icon-moon{ display:none; }
[data-theme="dark"] .mc-theme-toggle .mc-icon-sun{ display:none; }
[data-theme="dark"] .mc-theme-toggle .mc-icon-moon{ display:block; }

.mc-nav-toggle{
  display:none;
  background:none; border:1px solid var(--mc-border); border-radius:var(--mc-radius);
  width:44px; height:44px; cursor:pointer; position:relative;
}
.mc-nav-toggle span, .mc-nav-toggle::before, .mc-nav-toggle::after{
  content:""; position:absolute; left:11px; right:11px; height:2px; background:var(--mc-text);
}
.mc-nav-toggle::before{ top:15px; }
.mc-nav-toggle span{ top:21px; }
.mc-nav-toggle::after{ top:27px; }

.mc-primary-menu{ display:flex; gap:2rem; list-style:none; align-items:center; }
.mc-primary-menu a{
  font-family:var(--mc-font-display);
  font-weight:600; font-size:.95rem;
  color:var(--mc-text);
  padding:.4rem 0;
  border-bottom:2px solid transparent;
}
.mc-primary-menu a:hover, .mc-primary-menu .current-menu-item > a{
  color:var(--mc-blue); border-color:var(--mc-copper);
}
.mc-primary-menu .sub-menu{ display:none; }

@media (max-width:860px){
  .mc-nav-toggle{ display:block; }
  .mc-primary-menu{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--mc-surface-white); border-bottom:1px solid var(--mc-border);
    flex-direction:column; align-items:flex-start; gap:0; padding:.5rem clamp(1.25rem,4vw,2.5rem) 1rem;
  }
  .mc-primary-menu.is-open{ display:flex; }
  .mc-primary-menu li{ width:100%; }
  .mc-primary-menu a{ display:block; padding:.7rem 0; border-bottom:1px solid var(--mc-border); }
}

/* ---------------------------------------------------------
   5. Hero (front page + interior pages)
--------------------------------------------------------- */
.mc-hero{
  position:relative;
  color:var(--mc-white);
  background:linear-gradient(180deg, rgba(11,29,51,.78), rgba(11,29,51,.92)), var(--mc-ink);
  background-size:cover; background-position:center;
  overflow:hidden;
}
.mc-hero--front{ padding-block:clamp(4rem,10vw,7.5rem) 0; }
.mc-hero--standard{ padding-block:clamp(3rem,7vw,4.5rem) 0; }
.mc-hero__inner{ position:relative; z-index:2; max-width:820px; }
.mc-hero .mc-eyebrow{ color:var(--mc-copper-light); }
.mc-hero .mc-eyebrow::before{ background:var(--mc-copper-light); }
.mc-hero h1{ color:var(--mc-white); }
.mc-hero__subtitle{ color:rgba(247,248,250,.85); font-size:1.15rem; max-width:640px; }
.mc-hero__meta{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  font-family:var(--mc-font-mono); font-size:.85rem;
  margin:1.5rem 0 2rem; color:var(--mc-paper);
}
.mc-hero__meta strong{ color:var(--mc-copper-light); font-weight:600; }
.mc-hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; padding-bottom:2.5rem; }

.mc-btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mc-font-display); font-weight:600; font-size:.95rem;
  padding:.85rem 1.6rem; border-radius:var(--mc-radius);
  border:1px solid transparent; cursor:pointer;
}
.mc-btn--primary{ background:var(--mc-copper); color:var(--mc-white); }
.mc-btn--primary:hover{ background:var(--mc-copper-light); color:var(--mc-white); }
.mc-btn--outline{ border-color:rgba(247,248,250,.5); color:var(--mc-white); }
.mc-btn--outline:hover{ border-color:var(--mc-white); color:var(--mc-copper-light); }
.mc-btn--dark{ background:var(--mc-ink); color:var(--mc-white); }
.mc-btn--dark:hover{ background:var(--mc-blue-deep); color:var(--mc-white); }

/* circuit skyline motif */
.mc-skyline{ position:relative; z-index:2; display:block; width:100%; height:40px; margin-top:1.25rem; overflow:hidden; }
.mc-skyline .mc-trace{ fill:none; stroke:var(--mc-copper-light); stroke-width:1.5; }
.mc-skyline .mc-node{ fill:var(--mc-copper-light); }
.mc-skyline .mc-building{ fill:rgba(247,248,250,.08); }
.mc-hero--standard{ padding-block:clamp(1.75rem,3.5vw,2.5rem) 0; }
.mc-hero--standard h1{ font-size:clamp(1.9rem,4vw,2.6rem); }
.mc-hero--standard .mc-skyline{ opacity:.6; height:32px; margin-top:1rem; }
footer .mc-skyline{ height:36px; margin-top:0; }
footer .mc-skyline .mc-building{ fill:rgba(11,29,51,.9); }
footer .mc-skyline .mc-trace{ stroke:var(--mc-copper); }
footer .mc-skyline .mc-node{ fill:var(--mc-copper); }

/* blueprint grid backdrop, used behind hero */
.mc-hero::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}

/* ---------------------------------------------------------
   6. Content area
--------------------------------------------------------- */
.mc-content{
  padding-block:clamp(3rem,6vw,5rem);
  position:relative;
  background-image:
    linear-gradient(var(--mc-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--mc-grid) 1px, transparent 1px);
  background-size:40px 40px;
}
.mc-content .mc-container > *:first-child{ margin-top:0; }
.mc-content .entry-content > * + *{ margin-top:1.2em; }
.mc-content .entry-content h2{ margin-top:1.8em; }
.mc-content .entry-content h2:first-child{ margin-top:0; }
.mc-content .entry-content blockquote{
  border-left:3px solid var(--mc-copper); margin:1.5em 0; padding:.2em 0 .2em 1.4em;
  font-style:italic; color:var(--mc-text);
}
.mc-content .entry-content figure{ margin:1.8em 0; }
.mc-content .entry-content figcaption{ font-family:var(--mc-font-mono); font-size:.8rem; color:var(--mc-text-muted); margin-top:.5em; }

/* Small accent marker before body headings — breaks up plain
   black-on-white and echoes the eyebrow/hero visual language. */
.entry-content > h2::before, .entry-content > h3::before{
  content:""; display:inline-block; width:.55em; height:.55em;
  background:var(--mc-copper); margin-right:.5em; vertical-align:middle;
}

/* Headings typed directly into a page's body copy — smaller than the
   hero scale, so a normal page doesn't look like an oversized banner.
   Uses ">" so headings nested inside inserted MetroCon patterns
   (e.g. .mc-card h3) are unaffected and keep their own sizing. */
.entry-content > h2{ font-size:clamp(1.6rem, 2.4vw, 2rem); }
.entry-content > h3{ font-size:clamp(1.2rem, 1.6vw, 1.4rem); }
.entry-content > h4{ font-size:1.1rem; }

/* ---------------------------------------------------------
   Block alignment: makes the editor's "Wide width" / "Full width"
   toolbar buttons actually do something. Without this, align-wide
   theme support is declared but has no visible effect.
--------------------------------------------------------- */
.entry-content > .alignwide{
  max-width:1200px;
  width:100%;
  margin-left:50%;
  transform:translateX(-50%);
}
.entry-content > .alignfull{
  max-width:none;
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
}
/* Keep full-bleed sections' own inner text readable rather than
   stretching edge-to-edge (a Group block with a background color
   can bleed full-width while its text stays in a comfortable column). */
.entry-content > .alignfull > .wp-block-group__inner-container,
.entry-content > .alignfull.wp-block-group > *{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  padding-left:24px;
  padding-right:24px;
}
.entry-content > .alignleft{ float:left; margin-right:1.5em; max-width:50%; }
.entry-content > .alignright{ float:right; margin-left:1.5em; max-width:50%; }

/* ---------------------------------------------------------
   7. MetroCon block-pattern components
--------------------------------------------------------- */
/* Track / session cards */
.mc-card{
  background:var(--mc-surface);
  border:1px solid var(--mc-border);
  border-top:3px solid var(--mc-copper);
  border-radius:var(--mc-radius);
  padding:1.75rem;
  height:100%;
}
.mc-card__index{ font-family:var(--mc-font-mono); font-size:.8rem; color:var(--mc-copper); letter-spacing:.08em; }
.mc-card h3{ margin-top:.4em; }
.mc-card p{ margin-bottom:0; }

/* Section band (alt background) */
.mc-band{ background:var(--mc-surface-alt); }
.mc-band--ink{ background:var(--mc-ink); color:var(--mc-white); }
.mc-band--ink h2, .mc-band--ink h3{ color:var(--mc-white); }
.mc-band--ink p{ color:rgba(247,248,250,.8); }

/* CTA banner */
.mc-cta-banner{
  background:var(--mc-blue);
  color:var(--mc-white);
  border-radius:var(--mc-radius);
  padding:clamp(2rem,5vw,3.5rem);
  text-align:center;
}
.mc-cta-banner h2{ color:var(--mc-white); }
.mc-cta-banner p{ color:rgba(247,248,250,.85); }

/* Schedule timeline */
.mc-timeline{ list-style:none; border-left:2px solid var(--mc-border); margin-left:.4rem; }
.mc-timeline-item{ position:relative; padding:0 0 2rem 2rem; }
.mc-timeline-item::before{
  content:""; position:absolute; left:-7px; top:.35rem;
  width:12px; height:12px; background:var(--mc-copper); border-radius:50%;
  border:2px solid var(--mc-surface);
}
.mc-timeline-time{ font-family:var(--mc-font-mono); font-size:.8rem; color:var(--mc-copper); letter-spacing:.06em; }

/* Speaker / people grid */
.mc-person{ text-align:left; }
.mc-person img{ border-radius:var(--mc-radius); aspect-ratio:1/1; object-fit:cover; margin-bottom:1rem; }
.mc-person__name{ font-family:var(--mc-font-display); font-weight:700; margin-bottom:.1em; }
.mc-person__role{ font-family:var(--mc-font-mono); font-size:.78rem; color:var(--mc-text-muted); text-transform:uppercase; letter-spacing:.06em; }

/* Sponsor logos */
.mc-sponsor-grid{ align-items:center; }
.mc-sponsor-grid img{ filter:grayscale(1) opacity(.65); transition:filter .2s ease; margin-inline:auto; }
.mc-sponsor-grid img:hover{ filter:grayscale(0) opacity(1); }

/* Stat row */
.mc-stat{ text-align:center; padding-inline:1rem; }
.mc-stat__num{ font-family:var(--mc-font-mono); font-size:clamp(2rem,4vw,3rem); color:var(--mc-copper); font-weight:600; display:block; }
.mc-stat__label{ font-size:.85rem; color:var(--mc-text-muted); text-transform:uppercase; letter-spacing:.06em; }

/* ---------------------------------------------------------
   8. Cards/columns block spacing helpers
--------------------------------------------------------- */
.wp-block-columns.mc-cards-row{ gap:var(--mc-gap); }
.wp-block-column{ align-self:stretch; }

/* ---------------------------------------------------------
   9. Footer
--------------------------------------------------------- */
.mc-footer{ background:var(--mc-ink); color:rgba(247,248,250,.85); padding-top:2rem; }
.mc-footer .mc-container{ padding-top:2.5rem; }
.mc-footer-columns{
  display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:2.5rem;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(247,248,250,.12);
}
.mc-footer-columns h4{ color:var(--mc-white); font-size:1rem; margin-bottom:1rem; }
.mc-footer .widget ul{ list-style:none; }
.mc-footer .widget li{ margin-bottom:.5rem; }
.mc-footer .widget a{ color:rgba(247,248,250,.75); }
.mc-footer .widget a:hover{ color:var(--mc-copper-light); }
.mc-footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-block:1.5rem 2rem; font-size:.8rem; font-family:var(--mc-font-mono); color:rgba(247,248,250,.6);
}
.mc-footer-bottom a{ color:rgba(247,248,250,.6); }
@media (max-width:760px){ .mc-footer-columns{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .mc-footer-columns{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   10. Misc / archive / 404
--------------------------------------------------------- */
.mc-post-card{ border-bottom:1px solid var(--mc-border); padding-block:2rem; }
.mc-post-card__meta{ font-family:var(--mc-font-mono); font-size:.78rem; color:var(--mc-copper); text-transform:uppercase; }
.mc-404{ text-align:center; padding-block:6rem; }
.mc-404 .mc-eyebrow{ justify-content:center; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }