body{margin:0;font-family:Arial;background:#fff;color:#000}

header{
position:sticky;top:0;z-index:1000;background:#fff;
display:flex;justify-content:space-between;align-items:center;
padding:1rem;border-bottom:1px solid #ddd;
box-shadow:0 2px 10px rgba(0,0,0,0.05)
}

.logo{display:flex;align-items:center;gap:10px}
header img{height:50px}

.title{display:flex;flex-direction:column}
.title h1{margin:0;font-size:1.4rem}
.title p{margin:0;font-size:0.8rem;color:#f4c430;font-weight:600}

nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
nav a{text-decoration:none;color:#000;font-weight:bold}
nav a:hover{color:#f4c430}

.menu-toggle{display:none;font-size:1.5rem;cursor:pointer}

@media(max-width:768px){
nav ul{display:none;flex-direction:column;position:absolute;top:70px;left:0;width:100%;background:#fff;padding:1rem}
nav ul.active{display:flex}
.menu-toggle{display:block}
.title p{font-size:0.7rem}
}

.hero{position:relative;height:45vh;overflow:hidden}

.slide{
position:absolute;width:100%;height:100%;
background-size:cover;background-position:center;
display:flex;flex-direction:column;justify-content:center;
opacity:0;transition:0.5s;color:#fff
}
.slide.active{opacity:1}

.hero-content{margin-left:40px;max-width:600px}
.hero-content h2{margin-bottom:10px}

.btn{background:#f4c430;color:#000;padding:10px 20px;text-decoration:none;border-radius:6px}

.arrows{
position:absolute;
top: calc(50% + 70px);
width:100%;
z-index:10;
pointer-events:none;
}

.arrows span{
position:absolute;
display:flex;align-items:center;justify-content:center;
width:50px;height:50px;
background:rgba(0,0,0,0.6);
border-radius:50%;
cursor:pointer;pointer-events:all;
}

.arrows span:first-child{left:40px;}
.arrows span:last-child{right:40px;}

.arrows svg{width:20px;height:20px;fill:#fff}

.section{padding:2rem}
.section + .section {padding-top:0.5rem;}

.mission{max-width:900px;line-height:1.6}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

.grid-item{
background:#fff;
border-radius:10px;
overflow:hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
display:flex;
flex-direction:column;
}

.grid-item img{
width:100%;
height:auto;
border-radius:10px;
}

.grid-item h3{margin:0.8rem 0.8rem 0.3rem;}
.grid-item p{margin:0 0.8rem 0.8rem;font-size:0.9rem;color:#555;}

.grid-item .btn{
margin:0 0.8rem 1rem;
align-self:flex-start;
}

.grid-item:hover{
transform:translateY(-4px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* Merch and WKF hero banners with backgrounds */
.merch {
  background: url('images/merch.jpg') center/cover no-repeat;
  height:180px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-left:40px;
  position:relative;
  margin:2rem 0;
  overflow:hidden;
  color:#fff;
}
.wkf {
  background: url('images/wkf.jpg') center/cover no-repeat;
  height:180px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-left:40px;
  position:relative;
  margin:2rem 0;
  overflow:hidden;
  color:#fff;
}

/* Overlay */
.merch::before {
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.5);
pointer-events:none;
}

.wkf::before {
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.1);
pointer-events:none;
}

.wkf-content, .merch-content {
position:relative;
max-width:900px;
z-index:1;
}

.competitions{padding:2rem;}

.comp-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem;
}

.comp-item{
background:#fff;
border-radius:10px;
overflow:hidden;
text-align:center;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
transition:0.3s ease;
}

.comp-item img{
width:100%;
height:440px;
object-fit:cover;
}

.comp-item h3{margin:1rem 0 0.5rem;}

.comp-item .btn{
margin-bottom:1rem;
display:inline-block;
}

.comp-item:hover{
transform:translateY(-5px);
box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

.associates {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  padding: 2rem 0;
  flex-wrap: wrap;
}

.associates img {
  height: 140px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: 0.3s ease;
}

.associates img:hover {
  opacity: 1;
  transform: scale(1.05);
}

@media(max-width:800px){
.grid{grid-template-columns:1fr}
.comp-grid{grid-template-columns:1fr}
.hero-content{margin-left:15px;}
.arrows span:first-child{left:15px;}
.arrows span:last-child{right:15px;}
.arrows{ top: calc(50% + 50px); }
.merch, .wkf {padding-left:20px;height:160px;}
.comp-item img{height:250px;}
}

@media(max-width:600px){
.associates img{height:80px;}
.associates{gap:2rem;}
}

/* =========================
   FOOTER SECTION (SAFE ADD)
   ========================= */

.footer-info {
  background: #111;
  color: #fff;
  padding: 3rem 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer-col h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 0.5rem;
}

.footer-col a {
  color: #ccc;
  text-decoration: none;
}

.footer-col a:hover {
  color: #f4c430;
}

.footer-col p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #ccc;
}

/* Social icons */
.socials {
  display: flex;
  gap: 1rem;
}

.socials img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  opacity: 0.8;
  transition: 0.3s ease;
}

.socials img:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Bottom footer */
footer {
  text-align: center;
  padding: 1rem;
  background: #000;
  color: #fff;
  border-top: 1px solid #333;
}

footer p {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

/* Mobile */
@media(max-width:800px){
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .socials {
    justify-content: center;
  }
}

/* Dropdown container */
.dropdown {
  position: relative;
}

/* Hidden menu */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  min-width: 200px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border-radius: 6px;
  z-index: 1000;
}

/* Items */
.dropdown-menu li {
  padding: 0;
}

.dropdown-menu a {
  display: block;
  padding: 0.6rem 1rem;
  color: #000;
  text-decoration: none;
  font-weight: normal;
}

.dropdown-menu a:hover {
  background: #f4f4f4;
  color: #f4c430;
}

/* Show on hover */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* Stack dropdown inside mobile menu */
@media(max-width:768px){

  .dropdown-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
  }

  .dropdown:hover .dropdown-menu {
    display: none; /* disable hover */
  }

  .dropdown.active .dropdown-menu {
    display: block;
  }

}

/* Membership page lists */
.benefits {
  padding-left: 1.2rem;
  margin-bottom: 2rem;
}

.benefits li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.requirements {
  padding-left: 1.2rem;
  margin-bottom: 2rem;
}

.requirements li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.about-text h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* ===== ATHLETE SECTION ===== */

.athlete {
  background: #2b2b2b;
  color: #fff;
  padding: 3rem 2rem;
}

.athlete h2 {
  color: #f4c430;
  margin-bottom: 2rem;
}

/* GRID */
.athlete-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: center;
}

/* NAME */
.athlete-name {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* TEXT */
.athlete-info p,
.athlete-stats p {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
/* STRIKE STATS */
.strike-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  text-align: center;
}

.strike-stats div {
  flex: 1;
  position: relative;
}

/* vertical divider */
.strike-stats div:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: #666; /* light grey line */
}

/* numbers */
.strike-stats span {
  display: inline-block;
  font-size: 2rem;
  font-weight: bold;
  padding-bottom: 0.4rem;
  margin-bottom: 0.3rem;
  border-bottom: 2px solid red; /* separate underline per number */
  width: 70%; /* 👈 makes all red lines same length */
}

/* labels */
.strike-stats p {
  margin: 0;
  font-size: 0.85rem;
  color: #ccc;
}

/* IMAGE */
.athlete-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: top; /*  THIS is the fix */
  border-radius: 10px;
}

/* RIGHT COLUMN */
.athlete-stats h3 {
  color: #f4c430;
  margin-bottom: 1rem;
}

/* MOBILE */
@media(max-width:800px){
  .athlete-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .strike-stats {
    flex-direction: column;
    gap: 1rem;
  }
}

.wkf-link {
  text-decoration: none !important; /*  force remove underline */
}

.wkf-link:hover {
  text-decoration: none !important;
}

/* News layout */
.news-item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: center;
  margin-top: 1.5rem;
}

/* Image */
.news-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 10px;
}

/* Text */
.news-content h3 {
  margin-bottom: 0.5rem;
}

.news-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

@media(max-width:800px){
  .news-item {
    grid-template-columns: 1fr;
  }

  .news-image img {
    height: 180px;
  }
}

.news-item {
  margin-bottom: 3rem; /*  increase space between items */
}

/* Search box */
.search-box {
  width: 100%;
  max-width: 400px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 1rem;
}
/* County headings */
.county {
  margin-bottom: 2rem;
}

.county h3 {
  font-size: 1.7rem;
  font-weight: 800;
  color: #000;

  margin: 2rem 0 1rem;

  display: inline-block;
  background: #f4c430;
  padding: 10px 20px;
  border-radius: 8px;

  letter-spacing: 0.5px;
}

/* Club item */
.club-item {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.club-item p {
  margin: 0.2rem 0;
}

.club-item {
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.club-item:last-child {
  border-bottom: none;
}

.club-item p {
  margin: 0.2rem 0;
}

/* ===== CLUB CARDS ===== */

.county {
  margin-bottom: 2.5rem;
}

.county h3 {
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

/* Grid layout per county */
.county {
  display: block;
}

.county .club-item {
  background: #fff;
  border-radius: 10px;
  padding: 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s ease;
}

/* Hover effect */
.county .club-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Club name */
.club-item strong {
  font-size: 1.1rem;
}

/* Address */
.club-item p:nth-child(2) {
  color: #555;
  font-size: 0.95rem;
}

/* Contact link */
.club-item a {
  display: inline-block;
  margin-top: 0.4rem;
  font-weight: bold;
  color: #f4c430;
  text-decoration: none;
}

.club-item a:hover {
  text-decoration: underline;
}

/* OPTIONAL: 2 column layout on desktop */
@media(min-width:900px){
  .county {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem;
  }

  .county h3 {
    grid-column: 1 / -1;
  }
}

/* OPTIONAL: 3 columns on very large screens */
@media(min-width:1200px){
  .county {
    grid-template-columns: repeat(3, 1fr);
  }
}
.county h3 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 1.2rem;

  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
}



.wkf-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 0.8rem;
  flex-wrap: wrap;
}

.hero-content {
  position: relative;
  z-index: 5;
}

/* ===== REFEREE IMAGES ===== */

.ref-images {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.ref-images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.ref-card {
  text-align: center;
}

.ref-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
}

.ref-card p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}


/* ===== TABLE ===== */

.ref-table {
  overflow-x: auto;
  margin-bottom: 2rem;
}

.ref-table table {
  width: 100%;
  border-collapse: collapse;
}

.ref-table th,
.ref-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.ref-table th {
  background: #f4c430;
}


/* ===== SUMMARY ===== */

.ref-summary {
  margin-bottom: 2rem;
}

.ref-summary h3 {
  margin-bottom: 0.5rem;
}


/* ===== LINKS ===== */

.ref-links ul {
  list-style: none;
  padding: 0;
}

.ref-links li {
  margin-bottom: 0.5rem;
}

.ref-links a {
  color: #f4c430;
  text-decoration: none;
  font-weight: bold;
}

.ref-links a:hover {
  text-decoration: underline;
}


/* ===== MOBILE ===== */

@media(max-width:900px){
  .ref-images {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:500px){
  .ref-images {
    grid-template-columns: 1fr;
  }
}

/* ===== ANTI DOPING ===== */

.anti-text {
  max-width: 800px;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.anti-officer {
  margin-bottom: 2rem;
}

.anti-officer h3 {
  margin-bottom: 0.5rem;
}

/* Links section */
.anti-links ul {
  list-style: none;
  padding: 0;
}

.anti-links li {
  margin-bottom: 0.6rem;
}

/* Link style */
.anti-links a {
  color: #f4c430;
  text-decoration: none;
  font-weight: bold;
}

.anti-links a:hover {
  text-decoration: underline;
}


/* ===== GARDA VETTING ===== */

.vetting-text {
  max-width: 800px;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.vetting-links ul {
  list-style: none;
  padding: 0;
}

.vetting-links li {
  margin-bottom: 0.6rem;
}

/* Link styling */
.vetting-links a {
  color: #f4c430;
  text-decoration: none;
  font-weight: bold;
}

.vetting-links a:hover {
  text-decoration: underline;
}

/* GRID tighter */
.event-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem; /*  tighter spacing */
  margin-bottom: 2.5rem;
}

/* CARD */
.event-card {
  display: block;
  text-decoration: none;
  color: #000;
  background: #fff;
  border-radius: 10px;

  padding: 8px; /*  smaller internal padding */
  
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  transition: 0.25s ease;
}

/* IMAGE */
.event-card img {
  width: 100%;
  aspect-ratio: 1 / 1;

  object-fit: cover;
  border-radius: 6px; /* slightly tighter */

  max-width: 120px;  /*  THIS shrinks the square */
  margin: 0 auto;    /* center inside card */
  display: block;
}

/* TEXT */
.event-card p {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* HOVER (subtle) */
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}
/* GRID tighter */
.event-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem; /* tighter spacing */
  margin-bottom: 2.5rem;
}

/* CARD */
.event-card {
  display: block;
  text-decoration: none;
  color: #000;
  background: #d7d7d7;
  border-radius: 10px;

  padding: 8px; /*  smaller internal padding */
  
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  transition: 0.25s ease;
}

/* IMAGE */
.event-card img {
  width: 100%;
  aspect-ratio: 1 / 1;

  object-fit: cover;
  border-radius: 6px; /* slightly tighter */

  max-width: 260px;  /* THIS shrinks the square */
  margin: 0 auto;    /* center inside card */
  display: block;
}

/* TEXT */
.event-card p {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* HOVER (subtle) */
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}


/* ===== MEDAL TABLE ===== */

.medal-table {
  overflow-x: auto;
  margin-top: 1.5rem;
}

.medal-table table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

/* Header */
.medal-table th {
  background: #f4c430;
  color: #000;
  text-align: left;
  padding: 12px;
}

/* Rows */
.medal-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

/* Hover */
.medal-table tr:hover {
  background: #f9f9f9;
}

/* ===== MEDAL COLORS ===== */

.medal {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
}

/* Gold */
.medal.gold {
  background: #ffd700;
  color: #000;
}

/* Silver */
.medal.silver {
  background: #c0c0c0;
  color: #000;
}

/* Bronze */
.medal.bronze {
  background: #cd7f32;
  color: #fff;
}
.medal-table tr:nth-child(even) {
  background: #fafafa;
}