/* School Players Table Styling */
table.players-table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  background: #fff;
  color: #222;
  font-size: 1rem;
  table-layout: auto;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
table.players-table th, table.players-table td {
  border: 1px solid #e0e0e0;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
table.players-table th {
  background: #1e3a8a;
  color: #fff;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.players-table tr:nth-child(even) td {
  background: #f7f9fc;
}
table.players-table tr:hover td {
  background: #e6f1e9;
}
@media (max-width: 900px) {
  table.players-table, table.players-table th, table.players-table td {
    font-size: 0.95rem;
    padding: 6px 6px;
  }
}
@media (max-width: 640px) {
  table.players-table, table.players-table th, table.players-table td {
    font-size: 0.9rem;
    padding: 4px 2px;
  }
  table.players-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --bg:#f7f3ee;
  --card:#ffffff;
  --ink:#141418;
  --accent:#1e5631;
  --accent-2:#d4af37;
  --accent-3:#0b5cff;
  --muted:#6b7280;
  --shadow:0 10px 30px rgba(16,24,40,0.08);
}

*{box-sizing:border-box}

body{
  font-family:'Work Sans', 'Segoe UI', Arial, sans-serif;
  line-height:1.5;
  margin:0;
  background:
    linear-gradient(rgba(247,243,238,0.88), rgba(247,243,238,0.88)),
    url('../reptonground2.jpg') center center / cover no-repeat fixed,
    url('../reptonground2.jpeg') center center / cover no-repeat fixed,
    radial-gradient(900px 500px at 10% -10%, #f1e9dd 0%, transparent 60%),
    radial-gradient(700px 400px at 90% 0%, #e6f1e9 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
}

.wrap{max-width:1120px;margin:0 auto;padding:24px}

body.layout-wide .wrap{max-width:1440px}

.site-header{
  background:linear-gradient(90deg, #1e3a8a 0%, #d4af37 100%);
  border-bottom:2px solid #d4af37;
  position:sticky;
  top:0;
  z-index:10;
  position:sticky;
}

.site-header::before{
  content:'';
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  background:url('../images/rpcc/crest-no-b-g.png') center/contain no-repeat;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.35);
  z-index:11;
}

.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-left:62px;
}

.brand{
  margin:0;
  display:inline-block;
  font-family:'Fraunces', Georgia, serif;
  font-size:1rem;
  letter-spacing:0.4px;
  color:#fff;
}

.nav{display:flex;gap:14px;align-items:center;justify-content:flex-end}
.nav a{color:#f8fbff;text-decoration:none;font-weight:700;text-shadow:0 1px 1px rgba(0,0,0,0.35)}
.nav a:hover{color:#ffffff}
.nav a.home-link{
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.45);
  border-radius:8px;
  padding:5px 10px;
  text-shadow:none;
}
.nav a.home-link:hover{background:rgba(255,255,255,0.24)}

.button{
  display:inline-block;
  padding:0.5em 1.2em;
  margin:0.2em;
  background:#eee;
  border:1px solid #bbb;
  border-radius:4px;
  text-decoration:none;
  color:#222;
  font-weight:700;
  font-size:1em;
  transition:background 0.2s;
}

.button:hover{background:#ddd}

.home-button{
  background:#cce5ff;
  border-color:#99c2ff;
}

.hero{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:28px;
  align-items:center;
  padding:28px;
  background:linear-gradient(135deg,#1e3a8a 0%, #d4af37 100%);
  border:1px solid #1b2a52;
  border-radius:14px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  animation:fadeUp 0.6s ease-out both;
}

.hero-section{
  background:linear-gradient(135deg,#1e3a8a 0%, #d4af37 100%) !important;
  color:#fff !important;
  border-bottom-color:#d4af37 !important;
}

.hero-section h1,
.hero-section h2,
.hero-section p,
.hero-section .lead{
  color:#fff !important;
}

.hero::after{
  content:'';
  position:absolute;
  right:-120px;
  top:-120px;
  width:320px;
  height:320px;
  background:radial-gradient(circle at 30% 30%, #d4af37 0%, rgba(212,175,55,0.15) 50%, transparent 70%);
  opacity:0.7;
}

.hero h1{
  font-family:'Fraunces', Georgia, serif;
  font-size:clamp(1.95rem, 2.5vw, 2.5rem);
  line-height:1.12;
  letter-spacing:0.01em;
  margin:0 0 8px;
  color:#fff;
}

.hero p{
  margin:0 0 14px;
  color:#e6edf7;
  font-size:clamp(1rem, 1.1vw, 1.08rem);
  line-height:1.45;
  max-width:62ch;
}

.hero .badge{
  display:inline-block;
  background:#d4af37;
  color:#1e3a8a;
  padding:6px 10px;
  border-radius:999px;
  font-size:0.8rem;
  letter-spacing:0.5px;
}

.hero-card{
  background:rgba(11,31,74,0.92);
  color:#f3f7ff;
  padding:18px;
  border-radius:12px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,0.08);
}

.hero-card h3{margin:0 0 8px;font-size:1.05rem}
.hero-card ul{margin:0;padding-left:18px;color:#e7dfd3}
.hero-card p{margin:0 0 9px;font-size:0.98rem;line-height:1.35}
.hero-card p:last-child{margin-bottom:0}

.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-top:18px;
}

.card{
  background:var(--card);
  border:1px solid #eee3d6;
  border-radius:12px;
  padding:14px;
  box-shadow:var(--shadow);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,24,40,0.12)}

.card h3{margin:0 0 6px;font-family:'Fraunces', Georgia, serif}
.card p{margin:0 0 8px;color:var(--muted)}
.card a{color:var(--accent-3);text-decoration:none;font-weight:600}

.search-panel{
  background:var(--card);
  padding:18px;
  border-radius:10px;
  box-shadow:var(--shadow);
  margin:18px 0;
  border:1px solid #efe6d7;
}

#search{
  width:100%;
  padding:12px 14px;
  font-size:1rem;
  border:1px solid #e3e0d7;
  border-radius:8px;
  outline:none;
}

#search:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(212,175,55,0.2)}

.results{list-style:none;padding:8px 0;margin:8px 0 0;border-top:1px solid #f0e8dc}
.results li{padding:8px 6px;border-radius:6px}
.results li a{color:var(--accent-3);text-decoration:none}

.section-title{display:flex;align-items:center;gap:10px;margin:18px 0 8px}
.section-title span{display:inline-block;width:10px;height:10px;background:var(--accent-2);border-radius:50%}

.pages-list{list-style:none;padding:0;margin:12px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pages-list li{background:var(--card);border:1px solid #eee3d6;border-radius:10px;box-shadow:var(--shadow);padding:10px 12px}
.pages-list li a{color:var(--accent);text-decoration:none;font-weight:600;display:block}
.pages-list li a:hover{color:#163f24}

.site-footer{padding:12px 0;text-align:center;color:var(--muted);font-size:0.9rem}

table thead tr:first-child > th,
table thead tr:first-child > td{
  background:#1e3a8a;
  color:#fff;
  font-weight:700;
}

table thead tr:first-child a{color:#fff}

/* Keep the first data row (row under header) in normal body styling. */
table tbody tr:first-child > td,
table tbody tr:first-child > th{
  background:transparent;
  color:inherit;
}

.stagger > *{animation:fadeUp 0.6s ease-out both}
.stagger > *:nth-child(2){animation-delay:0.06s}
.stagger > *:nth-child(3){animation-delay:0.12s}
.stagger > *:nth-child(4){animation-delay:0.18s}
.stagger > *:nth-child(5){animation-delay:0.24s}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero h1{font-size:clamp(1.75rem, 5.4vw, 2.15rem)}
  .grid{grid-template-columns:1fr 1fr}
  .pages-list{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  .site-header::before{left:10px;width:30px;height:30px}
  .site-header .wrap{padding-left:48px}
  .nav{display:block;margin-top:8px;justify-content:flex-start}
  .brand{display:block}
  .hero{padding:20px}
  .hero h1{font-size:clamp(1.55rem, 7.2vw, 1.9rem)}
  .hero p{font-size:0.98rem;line-height:1.4}
  .hero .badge{font-size:0.75rem}
  .grid{grid-template-columns:1fr}
  .pages-list{grid-template-columns:1fr}
}


/* archive area visual identity */
body.archive-zone {
  background:
    linear-gradient(rgba(243, 248, 255, 0.92), rgba(243, 248, 255, 0.92)),
    radial-gradient(900px 420px at 8% -8%, #dbeafe 0%, transparent 60%),
    radial-gradient(800px 360px at 92% 0%, #e0f2fe 0%, transparent 55%),
    #f3f8ff;
}

body.archive-zone .site-header {
  background: linear-gradient(90deg, #0f3b82 0%, #0b7189 100%);
  border-bottom: 2px solid #67b7d1;
}

body.archive-zone .hero {
  background: linear-gradient(135deg, #0f3b82 0%, #0b7189 100%);
  border: 1px solid #0b4f73;
}

body.archive-zone .hero .badge {
  background: #bfe7f5;
  color: #0f3b82;
}

.archive-zone-banner {
  background: #0f3b82;
  color: #e8f4ff;
  border-bottom: 1px solid #67b7d1;
}

.archive-zone-banner .wrap {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}