/*
Theme Name: ElasticoFC
Theme URI: https://elasticofc.com/
Author: Rakesh
Description: Custom "matchday programme" themed design for ElasticoFC — a football analysis & match-update blog. Built from scratch (no Elementor dependency), lightweight, mobile-first.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: elasticofc
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --pitch:        #0F3D3E;   /* deep teal-green — primary brand surface  */
  --pitch-light:  #155650;   /* hover / secondary surface */
  --chalk:        #F2EFE6;   /* off-white content background */
  --chalk-dim:    #E7E2D4;   /* card / panel background on chalk */
  --ink:          #16201E;   /* near-black text & footer surface */
  --ink-soft:     #41504C;   /* secondary text on chalk */
  --amber:        #E8A23D;   /* referee-card amber — accents, CTAs */
  --amber-dark:   #C9852A;
  --scarlet:      #C1392B;   /* red-card red — sparing use only */

  --font-display: 'Anton', Impact, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --radius: 3px;
  --max-width: 1200px;
  --gutter: 24px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--chalk);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:0.01em;
  line-height:1.05;
  margin:0 0 0.5em;
  text-transform:uppercase;
}
p{ margin:0 0 1em; }

/* visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}

.efc-skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--amber); color:var(--ink); padding:10px 16px; z-index:999;
  font-family:var(--font-mono); font-size:13px;
}
.efc-skip-link:focus{ left:8px; top:8px; }

.wrap{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--gutter);
}

.screen-reader-text{
  position:absolute !important; left:-9999px;
}

/* ============================================================
   TICKER — the signature element. A scoreboard-style strip
   that scrolls the latest headlines, like an LED board
   above the tunnel.
   ============================================================ */
.efc-ticker{
  background:var(--ink);
  color:var(--amber);
  overflow:hidden;
  white-space:nowrap;
  border-bottom:1px solid rgba(232,162,61,0.25);
}
.efc-ticker__label{
  display:inline-block;
  background:var(--scarlet);
  color:var(--chalk);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  padding:6px 12px;
  vertical-align:middle;
}
.efc-ticker__track{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  animation:efc-scroll 32s linear infinite;
  padding-left:16px;
  vertical-align:middle;
}
.efc-ticker__track span{
  font-family:var(--font-mono);
  font-size:13px;
  padding:6px 28px;
  border-right:1px solid rgba(232,162,61,0.25);
}
@keyframes efc-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .efc-ticker__track{ animation:none; }
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.efc-header{
  background:var(--chalk);
  border-bottom:3px solid var(--ink);
  position:relative;
  z-index:50;
}
.efc-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px var(--gutter);
  max-width:var(--max-width);
  margin:0 auto;
}
.efc-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.efc-crest{
  width:42px;height:42px;
  border-radius:50%;
  background:var(--pitch);
  color:var(--chalk);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:13px;
  border:2px solid var(--ink);
  flex-shrink:0;
}
.efc-brand img.custom-logo{
  width:42px;height:42px;border-radius:50%;object-fit:cover;
}
.efc-brand__name{
  font-family:var(--font-display);
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:0.02em;
}

.efc-menu-toggle{
  display:none;
  flex-direction:column;
  gap:4px;
  padding:8px;
}
.efc-menu-toggle span{
  width:24px;height:3px;background:var(--ink);
}

.efc-nav ul{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.efc-nav a{
  display:block;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:8px 12px;
  border-radius:var(--radius);
}
.efc-nav a:hover,.efc-nav .current-menu-item a{
  background:var(--ink);
  color:var(--amber);
}

@media (max-width:860px){
  .efc-menu-toggle{ display:flex; }
  .efc-nav{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--chalk);
    border-bottom:3px solid var(--ink);
    padding:10px var(--gutter) 16px;
  }
  .efc-nav.is-open{ display:block; }
  .efc-nav ul{ flex-direction:column; gap:2px; }
  .efc-nav a{ padding:12px 8px; }
}

/* ============================================================
   HERO — halftone-textured pitch panel
   ============================================================ */
.efc-hero{
  background:var(--pitch);
  background-image:radial-gradient(circle, rgba(242,239,230,0.09) 1px, transparent 1.4px);
  background-size:15px 15px;
  color:var(--chalk);
  padding:72px var(--gutter) 84px;
  text-align:center;
}
.efc-hero__inner{ max-width:760px; margin:0 auto; }
.efc-hero__eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.18em;
  color:var(--amber);
  text-transform:uppercase;
  margin-bottom:16px;
}
.efc-hero h1{
  font-size:clamp(34px,6vw,64px);
  margin-bottom:18px;
}
.efc-hero p{
  font-size:18px;
  color:var(--chalk-dim);
  max-width:560px;
  margin:0 auto 30px;
}

/* ticket-stub CTA button — only sits correctly on --pitch backgrounds */
.efc-btn--ticket{
  position:relative;
  display:inline-block;
  background:var(--amber);
  color:var(--ink);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:14px 34px;
  border-radius:var(--radius);
}
.efc-btn--ticket::before,.efc-btn--ticket::after{
  content:"";
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:16px;height:16px;
  background:var(--pitch);
  border-radius:50%;
}
.efc-btn--ticket::before{ left:-8px; }
.efc-btn--ticket::after{ right:-8px; }
.efc-btn--ticket:hover{ background:var(--amber-dark); }

.efc-btn{
  display:inline-block;
  background:var(--ink);
  color:var(--chalk);
  font-family:var(--font-mono);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:12px 24px;
  border-radius:var(--radius);
}
.efc-btn:hover{ background:var(--pitch); }
.efc-btn--outline{
  background:transparent;
  border:2px solid var(--ink);
  color:var(--ink);
}
.efc-btn--outline:hover{ background:var(--ink); color:var(--chalk); }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.efc-section{ padding:64px var(--gutter); max-width:var(--max-width); margin:0 auto; }
.efc-section--tight{ padding-top:0; }
.efc-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--scarlet);
  margin-bottom:8px;
  display:block;
}
.efc-section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:32px;
  flex-wrap:wrap;
}
.efc-section__head h2{ margin:0; font-size:clamp(26px,4vw,38px); }

/* ============================================================
   CARD GRID
   ============================================================ */
.efc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
@media (max-width:980px){ .efc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .efc-grid{ grid-template-columns:1fr; } }

.efc-card{
  background:#fff;
  border:1px solid var(--chalk-dim);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.efc-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(22,32,30,0.12);
}
.efc-card__media{
  position:relative;
  aspect-ratio:16/10;
  background:var(--chalk-dim);
  overflow:hidden;
}
.efc-card__media img{ width:100%;height:100%;object-fit:cover; }
.efc-card__ribbon{
  position:absolute;
  top:14px; left:-6px;
  background:var(--amber);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:4px 14px;
  transform:rotate(-6deg);
  box-shadow:0 3px 6px rgba(0,0,0,0.2);
}
.efc-card__body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.efc-card__title{ font-size:19px; margin:0; }
.efc-card__title a:hover{ color:var(--pitch); }
.efc-card__excerpt{ color:var(--ink-soft); font-size:14px; margin:0; flex:1; }
.efc-card__meta{
  display:flex; gap:14px; align-items:center;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.03em;
  border-top:1px dashed var(--chalk-dim);
  padding-top:10px;
}

/* ============================================================
   FIXTURES STRIP — scoreboard-style CTA banner
   ============================================================ */
.efc-fixtures{
  background:var(--ink);
  color:var(--chalk);
  border-radius:var(--radius);
  padding:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.efc-fixtures__text h3{ color:var(--amber); margin-bottom:6px; font-size:24px; }
.efc-fixtures__text p{ color:#C8CFCC; margin:0; font-size:14px; }
.efc-fixtures__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.efc-footer{ background:var(--ink); color:#C8CFCC; }
.efc-footer__top{
  max-width:var(--max-width); margin:0 auto;
  padding:56px var(--gutter) 40px;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:32px;
}
@media (max-width:860px){ .efc-footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .efc-footer__top{ grid-template-columns:1fr; } }

.efc-footer h4{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.12em;
  color:var(--amber);
  text-transform:uppercase;
  margin-bottom:16px;
}
.efc-footer p{ color:#9AA39F; font-size:13px; }
.efc-footer-menu li{ margin-bottom:8px; }
.efc-footer-menu a{ font-size:14px; color:#C8CFCC; }
.efc-footer-menu a:hover{ color:var(--amber); }

.efc-footer__brand .efc-brand__name{ color:var(--chalk); }
.efc-footer__brand p{ margin-top:14px; max-width:280px; }

.efc-social{ display:flex; gap:10px; margin-top:6px; }
.efc-social a{
  width:34px;height:34px;
  border:1px solid #364642;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--chalk);
}
.efc-social a:hover{ background:var(--amber); color:var(--ink); border-color:var(--amber); }

.efc-newsletter-form{ display:flex; gap:0; margin-top:8px; }
.efc-newsletter-form input[type="email"]{
  flex:1;
  background:#1F2B27;
  border:1px solid #364642;
  border-right:none;
  color:var(--chalk);
  font-family:var(--font-mono);
  font-size:13px;
  padding:11px 12px;
  border-radius:var(--radius) 0 0 var(--radius);
}
.efc-newsletter-form button{
  background:var(--amber);
  color:var(--ink);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  padding:11px 16px;
  border-radius:0 var(--radius) var(--radius) 0;
}
.efc-newsletter-form button:hover{ background:var(--amber-dark); }
.efc-newsletter-note{ font-size:11px; color:#6E7B76; margin-top:8px; }
.efc-newsletter-success{ font-size:13px; color:var(--amber); margin-top:8px; display:none; }

.efc-footer__bottom{
  border-top:1px solid #243330;
  padding:18px var(--gutter);
  text-align:center;
  font-family:var(--font-mono);
  font-size:12px;
  color:#6E7B76;
}

/* ============================================================
   SINGLE POST / PAGE
   ============================================================ */
.efc-post-banner{
  position:relative;
  background:var(--pitch);
  color:var(--chalk);
}
.efc-post-banner img{
  width:100%; max-height:420px; object-fit:cover;
  opacity:0.35;
  position:absolute; inset:0; z-index:0;
}
.efc-post-banner__inner{
  position:relative; z-index:1;
  max-width:780px; margin:0 auto;
  padding:64px var(--gutter) 48px;
  text-align:center;
}
.efc-post-banner h1{ font-size:clamp(28px,5vw,46px); }
.efc-post-meta{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12px;
  text-transform:uppercase; letter-spacing:0.04em;
  color:var(--amber);
  margin-top:14px;
}

.efc-content-wrap{ max-width:740px; margin:0 auto; padding:48px var(--gutter) 80px; }
.efc-content{ font-size:17px; line-height:1.75; }
.efc-content p{ margin-bottom:1.4em; }
.efc-content h2{ font-size:28px; margin-top:1.6em; text-transform:none; }
.efc-content h3{ font-size:21px; margin-top:1.4em; text-transform:none; }
.efc-content img{ border-radius:var(--radius); margin:1.4em 0; }
.efc-content a{ color:var(--pitch); text-decoration:underline; text-decoration-color:var(--amber); text-decoration-thickness:2px; }
.efc-content blockquote{
  border-left:4px solid var(--amber);
  margin:1.6em 0; padding:4px 0 4px 20px;
  font-style:italic; color:var(--ink-soft);
}
.efc-back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:13px; text-transform:uppercase;
  margin-bottom:24px; color:var(--ink-soft);
}
.efc-back-link:hover{ color:var(--pitch); }

/* ============================================================
   ARCHIVE
   ============================================================ */
.efc-archive-head{ background:var(--chalk-dim); padding:48px var(--gutter); text-align:center; }
.efc-archive-head h1{ font-size:clamp(28px,5vw,42px); margin:0; }

/* ============================================================
   404
   ============================================================ */
.efc-404{ text-align:center; padding:100px var(--gutter); max-width:560px; margin:0 auto; }
.efc-404__code{
  font-family:var(--font-mono); color:var(--scarlet);
  font-size:14px; letter-spacing:0.1em; margin-bottom:8px;
}
.efc-404 h1{ font-size:clamp(30px,6vw,52px); margin-bottom:14px; }

/* ============================================================
   EMPTY STATES
   ============================================================ */
.efc-empty{
  text-align:center; padding:48px 20px; color:var(--ink-soft);
  font-family:var(--font-mono); font-size:13px;
  border:1px dashed var(--chalk-dim); border-radius:var(--radius);
}