:root{
  --cream:#FFFCF5;
  --green:#2E7B4B;
  --chartreuse:#E4F30C;
  --red:#E23D1B;
  --charcoal:#2C2C2C;

  --font:"Averia Serif Libre", serif;

  --container: 800px;
  --pad: 20px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--charcoal);
  background:var(--cream);
}

a{ color:inherit; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad);
  position:relative; /* needed for grid overlay */
}

/* =========================
   SUBTLE CENTRE GRID GUIDE
   ========================= */

.container::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.0; /* lower to .03 if too visible */
  background-image:
    repeating-linear-gradient(
      to right,
      var(--charcoal) 0px,
      var(--charcoal) 1px,
      transparent 1px,
      transparent 120px
    );
}

/* ensure content sits above the guide */
.container > *{
  position:relative;
}

/* =========================
   HEADER (centered, clean)
   ========================= */

.site-header{
  background:var(--cream);
}

/* Logo row */
.header-top{
  padding:20px 0 20px;
}

.header-top--center{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.site-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.custom-logo-link{ display:inline-flex; }

/* Logo size */
.custom-logo{
  height:200px;
  width:auto;
  display:block;
}

/* Nav row (no grey line under it) */
.header-bar{
  background:var(--cream);
  border:0;
}

.header-bar-inner{
  padding:6px 0 12px;
}

.header-bar-inner--center{
  display:flex;
  justify-content:center;
  align-items:flex-end;
}

/* Menu */
.nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  justify-content:center;
}

.nav a{
  text-decoration:none;
  font-weight:700;
  padding:6px 4px;
}

.nav a:hover{
  text-decoration:none;
  color:var(--green);
}

/* =========================
   GLOBAL: remove boxes
   ========================= */

.card{
  background:transparent;
  border:0;
  padding:0;
}

/* Badge */
.badge{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background:var(--chartreuse);
  color:var(--charcoal);
  font-weight:700;
}

/* =========================
   HOMEPAGE
   ========================= */

/* Hide the default page title “Home” if it appears */
.home .page-content > h1:first-child{
  display:none;
}

/* Hero */
.home-hero{
  padding:0 0 28px;
  border-bottom:0;
  text-align:center;
}

.home-title{
  margin:10px 0 16px;
  font-size:48px;
  line-height:1.05;
}

.home-intro{
  margin:0 auto;
  max-width:65ch;
  font-size:18px;
}

/* Blocks: centered pair, not glued to left edge */
.home-blocks{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  padding-top:10px;
  padding-bottom:44px; /* breathing room above footer line */
  align-items:start;

  max-width:800px; /* narrows the two-up layout for balance */
  margin:0 auto;   /* centers blocks within the page */
}

@media (min-width:900px){
  .home-blocks{ grid-template-columns:1fr 1fr; }
}

/* Each block */
.home-block{
  padding:8px 0 8px 22px; /* consistent padding so stripes don’t feel flush left */
}

.home-block h2{
  margin:0 0 14px;
  font-size:34px;
  line-height:1.1;
}

.home-block p{
  margin-top:0;
}

.home-meta{
  margin:0 0 12px;
  opacity:.9;
}

/* Left stripes aligned */
.home-block--fixture{ border-left:8px solid var(--green); }
.home-block--result{ border-left:8px solid var(--red); }

.home-strong{
  margin:0 0 8px;
  font-weight:700;
  font-size:20px;
}

.home-score{
  margin:0 0 10px;
  font-size:20px;
}

.pill-link{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  background:var(--chartreuse);
  text-decoration:none;
  font-weight:700;
}

.pill-link:hover{
  text-decoration:underline;
}

.home-content{
  margin-top:28px;
  padding-top:22px;
  border-top:0;
}

/* =========================
   FIXTURES & RESULTS
   ========================= */

.matches{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:18px;
}

.match-card{
  padding:8px 0 8px 22px;
  border-left:8px solid var(--green);
}

.match-card.is-result{
  border-left-color:var(--red);
}

.match-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.match-meta{
  margin-left:10px;
  opacity:.85;
}

.match-title{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.1;
}

.match-venue{
  margin:0 0 10px;
  opacity:.9;
}

.match-score{
  margin:0;
  font-size:1.15rem;
}

.match-link{
  text-decoration:none;
  padding:10px 12px;
  border-radius:999px;
  background:var(--chartreuse);
  font-weight:700;
}

.match-link:hover{
  text-decoration:underline;
}

/* =========================
   FOOTER (white + chartreuse top line)
   ========================= */

.site-footer{
  background:#fff;
  border-top:6px solid var(--chartreuse);
}

.site-footer .container{
  padding:10px 0;
  text-align:center;
}

/* Footer menu */
.site-footer ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

.site-footer a{
  text-decoration:none;
  font-weight:700;
  padding:6px 4px;
}

.site-footer a:hover{
  text-decoration:none;
  color:var(--green);
}

.site-footer p{
  margin:12px 0 0;
  opacity:.9;
}

/* Center normal page titles */
.page-content > h1{
  text-align:center;
  margin-top:0;
}

.footer-social{ margin:16px 0 0; }
.footer-social a{
  font-size:28px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.footer-social a:hover{ color:var(--green); transform:translateY(-1px); }

.footer-copy{ margin:12px 0 0; opacity:.9; }

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}