/*
Theme Name: Gorseinon RFC
Theme URI: https://gorseinonrfc.co.uk
Author: Gorseinon RFC
Author URI: https://gorseinonrfc.co.uk
Description: Official WordPress theme for Gorseinon RFC – Cherry & Cream community rugby club.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gorseinon-rfc
Tags: sports, rugby, club, cherry, cream, responsive
*/

/* ============================================================
   RESET & VARIABLES
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Source+Serif+4:wght@400;600&display=swap');

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--cherry:      #9B1C31;
	--cherry-dark: #6E1322;
	--cream:       #F5F0E8;
	--cream-dark:  #E8E0D0;
	--near-black:  #1A1A1A;
	--mid-grey:    #666;
	--white:       #fff;
	--font-heading: 'Oswald', Arial, sans-serif;
	--font-body:    'Source Serif 4', Georgia, serif;
	--font-ui:      Arial, sans-serif;
}

html { font-size: 16px; }

body {
	font-family: var(--font-ui);
	background: var(--cream);
	color: var(--near-black);
	line-height: 1.6;
}

a { color: var(--cherry); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   UTILITY
   ============================================================ */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

.section-title {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--cherry);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--cherry);
	display: flex;
	align-items: center;
	gap: 10px;
}

.section-title::before {
	content: '';
	display: inline-block;
	width: 5px;
	height: 22px;
	background: var(--cherry);
	flex-shrink: 0;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.site-topbar {
	background: var(--cherry-dark);
	padding: 6px 0;
}

.site-topbar .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.site-topbar span {
	color: rgba(255,255,255,.85);
	font-size: 11px;
}

.site-topbar .topbar-social a {
	color: rgba(255,255,255,.7);
	font-size: 11px;
	margin-left: 10px;
	transition: color .2s;
}

.site-topbar .topbar-social a:hover {
	color: #fff;
	text-decoration: none;
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-header {
	background: var(--cherry);
	padding: 12px 0;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-badge {
	width: 52px;
	height: 52px;
	background: var(--cream);
	border-radius: 50%;
	border: 3px solid rgba(255,255,255,.4);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-size: 10px;
	font-weight: 700;
	color: var(--cherry);
	text-align: center;
	line-height: 1.2;
	letter-spacing: 0.5px;
	flex-shrink: 0;
	overflow: hidden;
}

.site-badge img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-name {
	color: #fff;
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1;
	display: block;
}

.site-tagline {
	color: rgba(255,255,255,.7);
	font-size: 10px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	margin-top: 3px;
	display: block;
}

/* Primary Navigation */
.main-navigation ul {
	display: flex;
	list-style: none;
	gap: 0;
}

.main-navigation ul li a {
	color: rgba(255,255,255,.85);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 8px 12px;
	display: block;
	transition: background .15s, color .15s;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-page-ancestor > a {
	background: var(--cherry-dark);
	color: #fff;
	text-decoration: none;
}

/* Hamburger (mobile) */
.menu-toggle {
	display: none;
	background: transparent;
	border: 1.5px solid rgba(255,255,255,.5);
	color: #fff;
	padding: 6px 10px;
	font-size: 18px;
	cursor: pointer;
	border-radius: 3px;
	line-height: 1;
}

/* ============================================================
   HERO
   ============================================================ */
.site-hero {
	position: relative;
	min-height: 340px;
	background: linear-gradient(135deg, #1A0A10 0%, #4a0f1e 50%, #2a0810 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	text-align: center;
	padding: 60px 20px;
}

/* Background image support (set via Customizer) */
.site-hero.has-bg-image {
	background-size: cover;
	background-position: center;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(26,10,16,.65);
}

/* Decorative stripes */
.hero-stripes {
	position: absolute;
	inset: 0;
	opacity: 0.05;
	pointer-events: none;
}

.hero-stripes div {
	position: absolute;
	background: var(--cream);
	width: 100%;
	height: 32px;
}

.hero-stripes div:nth-child(1) { top: 0; }
.hero-stripes div:nth-child(2) { top: 64px; }
.hero-stripes div:nth-child(3) { top: 128px; }
.hero-stripes div:nth-child(4) { top: 192px; }
.hero-stripes div:nth-child(5) { top: 256px; }
.hero-stripes div:nth-child(6) { top: 320px; }

.hero-content {
	position: relative;
	z-index: 2;
	max-width: 700px;
	margin: 0 auto;
}

.hero-title {
	color: var(--cream);
	font-family: var(--font-heading);
	font-size: clamp(32px, 6vw, 52px);
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: 10px;
}

.hero-subtitle {
	color: rgba(245,240,232,.65);
	font-size: 12px;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin-bottom: 28px;
}

.hero-buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.btn {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 10px 22px;
	border-radius: 3px;
	border: none;
	cursor: pointer;
	transition: all .2s;
	text-decoration: none;
}

.btn-primary {
	background: var(--cream);
	color: var(--cherry);
}

.btn-primary:hover {
	background: #fff;
	color: var(--cherry-dark);
	text-decoration: none;
}

.btn-outline {
	background: transparent;
	color: var(--cream);
	border: 2px solid rgba(245,240,232,.5);
}

.btn-outline:hover {
	border-color: var(--cream);
	background: rgba(245,240,232,.1);
	color: #fff;
	text-decoration: none;
}

/* ============================================================
   RESULTS BAR
   ============================================================ */
.results-bar {
	background: var(--near-black);
	overflow: hidden;
}

.results-bar-inner {
	display: flex;
	align-items: stretch;
	overflow-x: auto;
	scrollbar-width: none;
}

.results-bar-inner::-webkit-scrollbar { display: none; }

.results-bar-label {
	padding: 10px 16px;
	font-size: 9px;
	color: rgba(255,255,255,.4);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	white-space: nowrap;
	border-right: 1px solid rgba(255,255,255,.1);
	display: flex;
	align-items: center;
}

.result-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border-right: 1px solid rgba(255,255,255,.08);
	flex-shrink: 0;
}

.result-chip:last-child { border: none; }

.rc-meta { }
.rc-date {
	font-size: 9px;
	color: rgba(255,255,255,.4);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 3px;
}

.rc-score {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	font-family: var(--font-heading);
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.rc-badge {
	font-size: 9px;
	padding: 3px 7px;
	border-radius: 2px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}

.rc-badge.win  { background: var(--cherry); color: #fff; }
.rc-badge.draw { background: #2a4a1a; color: #7ec868; }
.rc-badge.loss { background: #444; color: rgba(255,255,255,.6); }

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.site-content {
	padding: 32px 0;
}

.content-area {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 28px;
	align-items: start;
}

/* ============================================================
   NEWS / POSTS
   ============================================================ */
.news-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.news-card {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid #ddd;
	transition: box-shadow .2s, transform .2s;
}

.news-card:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,.1);
	transform: translateY(-2px);
}

.news-card.featured {
	grid-column: span 2;
}

.news-card-thumb {
	overflow: hidden;
}

.news-card-thumb img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	transition: transform .3s;
}

.news-card.featured .news-card-thumb img {
	height: 240px;
}

.news-card:hover .news-card-thumb img {
	transform: scale(1.03);
}

/* Placeholder if no image */
.news-card-thumb-placeholder {
	height: 120px;
	background: linear-gradient(135deg, var(--cherry-dark), var(--cherry));
	display: flex;
	align-items: center;
	justify-content: center;
}

.news-card.featured .news-card-thumb-placeholder {
	height: 180px;
}

.news-card-thumb-placeholder span {
	color: rgba(255,255,255,.25);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.news-card-body {
	padding: 14px 16px 16px;
}

.news-card-tag {
	font-size: 9px;
	color: var(--cherry);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.news-card-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--near-black);
	margin-top: 4px;
	line-height: 1.45;
}

.news-card.featured .news-card-title {
	font-size: 16px;
}

.news-card-title a {
	color: inherit;
}

.news-card-title a:hover {
	color: var(--cherry);
	text-decoration: none;
}

.news-card-excerpt {
	font-size: 11px;
	color: var(--mid-grey);
	margin-top: 6px;
	line-height: 1.5;
}

.news-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #f0f0f0;
}

.news-card-date {
	font-size: 9px;
	color: #999;
}

.news-card-more {
	font-size: 10px;
	font-weight: 700;
	color: var(--cherry);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Archive/single post layout */
.post-list-item {
	background: #fff;
	border-radius: 6px;
	border: 1px solid #ddd;
	padding: 20px;
	margin-bottom: 20px;
}

.post-list-item .entry-title {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
	color: var(--near-black);
	margin-bottom: 8px;
}

.post-list-item .entry-title a { color: inherit; }
.post-list-item .entry-title a:hover { color: var(--cherry); text-decoration: none; }

.entry-meta {
	font-size: 11px;
	color: #999;
	margin-bottom: 10px;
}

.entry-meta a { color: var(--cherry); }

.entry-content { font-family: var(--font-body); font-size: 15px; line-height: 1.7; }
.entry-content p { margin-bottom: 1em; }
.entry-content h2, .entry-content h3 {
	font-family: var(--font-heading);
	color: var(--cherry);
	margin: 1.4em 0 .5em;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
	background: #fff;
	border-radius: 6px;
	border: 1px solid #ddd;
	overflow: hidden;
}

.sidebar-widget {
	padding: 16px;
	border-bottom: 1px solid #eee;
}

.sidebar-widget:last-child { border: none; }

.widget-title {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
	color: var(--cherry);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 12px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--cherry);
}

/* Fixtures Widget */
.fixture-list { list-style: none; }

.fixture-item {
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f0;
}

.fixture-item:last-child { border: none; }

.fixture-date {
	font-size: 9px;
	color: var(--cherry);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.fixture-teams {
	font-size: 11px;
	font-weight: 700;
	color: var(--near-black);
	margin-top: 2px;
	line-height: 1.4;
}

.fixture-venue {
	font-size: 10px;
	color: #999;
	margin-top: 1px;
}

.fixture-badge {
	display: inline-block;
	font-size: 8px;
	padding: 2px 6px;
	border-radius: 2px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 4px;
}

.fixture-badge.home { background: var(--cherry); color: #fff; }
.fixture-badge.away { background: #444; color: rgba(255,255,255,.8); }

/* Social Widget */
.social-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.social-link {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--near-black);
	padding: 6px 10px;
	border-radius: 4px;
	background: var(--cream);
	transition: background .15s;
}

.social-link:hover {
	background: var(--cherry);
	color: #fff;
	text-decoration: none;
}

/* ============================================================
   SQUAD SECTION
   ============================================================ */
.squad-section {
	padding: 32px 0;
	background: #fff;
	border-top: 1px solid #e0d8cc;
}

.player-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 16px;
	margin-top: 16px;
}

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

.player-photo-wrap {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	margin: 0 auto 8px;
	border: 3px solid var(--cherry);
	overflow: hidden;
	background: linear-gradient(135deg, var(--cherry-dark), var(--cherry));
	display: flex;
	align-items: center;
	justify-content: center;
}

.player-photo-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.player-initials {
	font-size: 20px;
	font-weight: 700;
	font-family: var(--font-heading);
	color: #fff;
}

.player-name {
	font-size: 11px;
	font-weight: 700;
	color: var(--near-black);
	line-height: 1.2;
}

.player-pos {
	font-size: 10px;
	color: var(--cherry);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 2px;
}

.player-num {
	font-size: 9px;
	color: #999;
	margin-top: 2px;
}

/* ============================================================
   SPONSORS BAR
   ============================================================ */
.sponsors-section {
	background: var(--cream-dark);
	padding: 20px 0;
	border-top: 1px solid #ddd;
}

.sponsors-label {
	font-size: 10px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 600;
	margin-bottom: 12px;
	text-align: center;
}

.sponsors-row {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.sponsor-box {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 8px 18px;
	font-size: 11px;
	color: #777;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.sponsor-box img {
	max-height: 36px;
	max-width: 120px;
	object-fit: contain;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	background: var(--cherry-dark);
	color: rgba(255,255,255,.75);
	padding: 32px 0 16px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 28px;
	margin-bottom: 24px;
}

.footer-col-title {
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 12px;
}

.footer-brand-name {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	display: block;
	margin-bottom: 4px;
}

.footer-tagline {
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 12px;
	display: block;
}

.footer-address {
	font-size: 11px;
	line-height: 1.6;
}

.footer-nav { list-style: none; }
.footer-nav li { margin-bottom: 6px; }
.footer-nav li a {
	font-size: 12px;
	color: rgba(255,255,255,.65);
	transition: color .15s;
}
.footer-nav li a:hover { color: #fff; text-decoration: none; }

.footer-bottom {
	border-top: 1px solid rgba(255,255,255,.1);
	padding-top: 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.footer-copy {
	font-size: 10px;
	color: rgba(255,255,255,.45);
}

.footer-bottom-links {
	display: flex;
	gap: 16px;
}

.footer-bottom-links a {
	font-size: 10px;
	color: rgba(255,255,255,.45);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.footer-bottom-links a:hover { color: rgba(255,255,255,.8); text-decoration: none; }

/* ============================================================
   PAGE TEMPLATES
   ============================================================ */
/* Full-width page */
.page-template-full-width .content-area {
	grid-template-columns: 1fr;
}

/* Contact page */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

/* Single post */
.single .entry-header {
	margin-bottom: 24px;
}

.single .entry-title {
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 700;
	color: var(--near-black);
	line-height: 1.2;
}

.post-thumbnail {
	margin-bottom: 24px;
	border-radius: 6px;
	overflow: hidden;
}

.post-thumbnail img {
	width: 100%;
	height: 400px;
	object-fit: cover;
}

/* ============================================================
   WIDGETS (WP widget areas)
   ============================================================ */
.widget { margin-bottom: 24px; }
.widget-title {
	font-family: var(--font-heading);
	font-size: 15px;
	text-transform: uppercase;
}

/* ============================================================
   FORMS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
	width: 100%;
	padding: 10px 14px;
	border: 1.5px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	font-family: var(--font-ui);
	color: var(--near-black);
	background: #fff;
	transition: border-color .2s;
}

input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--cherry);
	box-shadow: 0 0 0 3px rgba(155,28,49,.15);
}

/* Comment form */
.comment-form { margin-top: 32px; }
.comment-form .form-submit input[type="submit"] {
	background: var(--cherry);
	color: #fff;
	border: none;
	padding: 10px 24px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	border-radius: 3px;
	cursor: pointer;
	width: auto;
	transition: background .15s;
}

.comment-form .form-submit input[type="submit"]:hover {
	background: var(--cherry-dark);
}

/* Search form */
.search-form {
	display: flex;
	gap: 6px;
}

.search-form input[type="search"] { flex: 1; }

.search-form .search-submit {
	background: var(--cherry);
	color: #fff;
	border: none;
	padding: 10px 14px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	white-space: nowrap;
	width: auto;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination,
.nav-links {
	display: flex;
	gap: 6px;
	align-items: center;
	margin: 24px 0;
}

.page-numbers,
.nav-links a,
.nav-links span {
	padding: 7px 13px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 700;
	border: 1.5px solid #ddd;
	color: var(--near-black);
	transition: all .15s;
}

.page-numbers.current,
.page-numbers:hover,
.nav-links a:hover {
	background: var(--cherry);
	color: #fff;
	border-color: var(--cherry);
	text-decoration: none;
}

/* ============================================================
   BLOCKS / GUTENBERG COMPATIBILITY
   ============================================================ */
.wp-block-image { margin: 1.5em 0; }
.wp-block-quote {
	border-left: 4px solid var(--cherry);
	padding-left: 16px;
	margin: 1.5em 0;
	color: var(--mid-grey);
	font-style: italic;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	.content-area {
		grid-template-columns: 1fr;
	}

	.sidebar {
		order: -1;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 680px) {
	.site-topbar { display: none; }

	.main-navigation { display: none; }
	.main-navigation.toggled { display: block; }
	.main-navigation ul {
		flex-direction: column;
		background: var(--cherry-dark);
		position: absolute;
		top: 100%;
		left: 0; right: 0;
		z-index: 99;
		padding: 8px 0;
	}

	.menu-toggle { display: block; }

	.news-grid { grid-template-columns: 1fr; }
	.news-card.featured { grid-column: span 1; }

	.hero-title { font-size: 28px; }

	.footer-grid { grid-template-columns: 1fr; }

	.contact-grid { grid-template-columns: 1fr; }

	.footer-bottom { flex-direction: column; text-align: center; }

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

@media (max-width: 400px) {
	.player-grid { grid-template-columns: repeat(2, 1fr); }
	.hero-buttons { flex-direction: column; align-items: center; }
}