/* Fraunces, self-hosted (SIL OFL). One variable file per subset
   covers both weights. */
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url('/fonts/fraunces-vietnamese.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url('/fonts/fraunces-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url('/fonts/fraunces-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Design tokens
   ------------------------------------------------------------
   One brand green, one second accent. The sand/gold set is the
   commercial language - sponsor strips and featured slots - and
   is never used for an action. Green is brand and action only.
   ============================================================ */
:root {
	/* Brand green: turf. Also Bootstrap's success colour, the
	   theme-color meta and the PWA manifest colour, so it is the
	   one green the site has. White on it is 6.6:1. Dark and
	   darker are 20% and 40% shades: hover and active states. */
	--oge-green: #1d6b32;
	--oge-green-rgb: 29, 107, 50;
	--oge-green-dark: #175628;
	--oge-green-darker: #11401e;

	/* The sunlit end of the navbar gradient, which runs to
	   --oge-green-darker. Kept at 5:1 against white. */
	--oge-turf-light: #2a7f3a;

	/* Second accent: sand/gold. Featured and sponsored slots. */
	--oge-sand-bright: #d8c95e;
	--oge-sand: #c8b84a;
	--oge-sand-muted: #b8a85a;
	--oge-sand-border: #e8e3c4;
	--oge-sand-border-light: #ede9d0;
	--oge-sand-bg-from: #fffef8;
	--oge-sand-bg-to: #f9f7ed;
	--oge-sand-text: #6b5e2a;
	--oge-sand-text-strong: #4a3f10;

	--oge-ink: #1a1a1a;
	--oge-stamp-red: rgba(180, 40, 40, 0.6);

	--oge-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

	/* Expanded header height: 60px logo + 0.5rem padding top and bottom. */
	--oge-header-height: 76px;

	/* --- Retire Bootstrap blue -------------------------------
	   custom.css loads after bootstrap.min.css, so redefining
	   these at the same specificity wins on source order. */
	--bs-primary: var(--oge-green);
	--bs-primary-rgb: var(--oge-green-rgb);

	/* Bootstrap success is the brand green too. The subtle set
	   follows Bootstrap's own formula: 60% shade for text, 80% and
	   60% tints for background and border. */
	--bs-success: var(--oge-green);
	--bs-success-rgb: var(--oge-green-rgb);
	--bs-success-text-emphasis: #0c2b14;
	--bs-success-bg-subtle: #d2e1d6;
	--bs-success-border-subtle: #a5c4ad;
	--bs-form-valid-color: var(--oge-green);
	--bs-form-valid-border-color: var(--oge-green);

	/* Links get the darker green (8.8:1 on white) so they read as
	   distinct from the green of buttons and badges. */
	--bs-link-color: var(--oge-green-dark);
	--bs-link-color-rgb: 23, 86, 40;
	--bs-link-hover-color: var(--oge-green-darker);
	--bs-link-hover-color-rgb: 17, 64, 30;
}

/* Bootstrap 5.3 buttons read their own --bs-btn-* properties, which are
   set to literal blues in the compiled CSS, so overriding --bs-primary
   alone does not reach them. Success buttons are the same green. */
.btn-primary,
.btn-success {
	--bs-btn-bg: var(--oge-green);
	--bs-btn-border-color: var(--oge-green);
	--bs-btn-hover-bg: var(--oge-green-dark);
	--bs-btn-hover-border-color: var(--oge-green-dark);
	--bs-btn-active-bg: var(--oge-green-darker);
	--bs-btn-active-border-color: var(--oge-green-darker);
	--bs-btn-disabled-bg: var(--oge-green);
	--bs-btn-disabled-border-color: var(--oge-green);
	--bs-btn-focus-shadow-rgb: var(--oge-green-rgb);
}

.btn-outline-primary,
.btn-outline-success {
	--bs-btn-color: var(--oge-green-dark);
	--bs-btn-border-color: var(--oge-green);
	--bs-btn-hover-bg: var(--oge-green);
	--bs-btn-hover-border-color: var(--oge-green);
	--bs-btn-active-bg: var(--oge-green-dark);
	--bs-btn-active-border-color: var(--oge-green-dark);
	--bs-btn-disabled-color: var(--oge-green);
	--bs-btn-disabled-border-color: var(--oge-green);
	--bs-btn-focus-shadow-rgb: var(--oge-green-rgb);
}

/* The remaining places Bootstrap hardcodes blue. Without these the
   colour leaks back in through forms and pagination. */
.pagination {
	--bs-pagination-color: var(--oge-green-dark);
	--bs-pagination-hover-color: var(--oge-green-darker);
	--bs-pagination-focus-color: var(--oge-green-darker);
	--bs-pagination-active-bg: var(--oge-green);
	--bs-pagination-active-border-color: var(--oge-green);
	--bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--oge-green-rgb), 0.25);
}

.dropdown-menu {
	--bs-dropdown-link-active-bg: var(--oge-green);
}

.list-group {
	--bs-list-group-active-bg: var(--oge-green);
	--bs-list-group-active-border-color: var(--oge-green);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--oge-sand-muted);
	box-shadow: 0 0 0 0.25rem rgba(var(--oge-green-rgb), 0.2);
}

.form-check-input:checked {
	background-color: var(--oge-green);
	border-color: var(--oge-green);
}

.form-check-input:focus {
	border-color: var(--oge-sand-muted);
	box-shadow: 0 0 0 0.25rem rgba(var(--oge-green-rgb), 0.2);
}

/* Headings only. Card titles stay on the system stack - they are dense
   scanning targets and a display face slows them down. */
h1, h2, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	font-family: var(--oge-font-display);
	letter-spacing: -0.01em;
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--oge-ink);
    color: white;
    padding: 20px 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    z-index: 9999;
    border-top: 3px solid var(--oge-green);
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.cookie-banner p {
    font-size: 15px;
    margin-bottom: 0;
}

.cookie-banner strong {
    font-size: 18px;
    display: block;
    margin-bottom: 5px;
}

.cookie-banner a {
    color: var(--oge-green);
    font-weight: bold;
}

.cookie-banner .btn {
    font-weight: bold;
    padding: 10px 30px;
}

.cookie-banner .btn-light {
    background-color: var(--oge-green);
    border-color: var(--oge-green);
    color: white;
}

.cookie-banner .btn-light:hover {
    background-color: var(--oge-green-dark);
    border-color: var(--oge-green-dark);
}

.cookie-banner .btn-outline-light {
    color: white;
    border-color: white;
}

.cookie-banner .btn-outline-light:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (max-width: 768px) {
    .cookie-banner .btn {
        width: 48%;
        margin-bottom: 10px;
    }
    
    .cookie-banner {
        padding: 15px 0;
    }
}
#pwa-install-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1040;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    border: none;
}

#pwa-install-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}
/* Custom styles */
/* The lift is opt-in. It used to apply to every .card, including ones you
   cannot click, which is why .featured-course had to cancel it below. */
.oge-card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.oge-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.display-4 {
    font-weight: 700;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.btn {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.google-btn {
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.google-btn:hover {
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.12);
}

/* Scaling the link reflowed its neighbours on hover. An underline does the
   same job without moving the rest of the nav. */
.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.65);
    text-decoration: none !important;
}

/* The nav had no current-page indication at all. */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"] {
    color: #fff;
    font-weight: 600;
    border-bottom-color: #fff;
}
.sponsor-strip {
	background: linear-gradient(135deg, var(--oge-sand-bg-from) 0%, var(--oge-sand-bg-to) 100%);
	border-color: var(--oge-sand-border-light) !important;
	border-bottom-color: var(--oge-sand-border) !important;
}
.sponsor-label { color: var(--oge-sand-muted); }
.sponsor-logo { height: 62px; width: auto; border: 1px solid #ccc;}
.sponsor-logo-link:hover .sponsor-logo { opacity: 0.8; }
.sponsor-banner-link { max-width: 100%; }
.sponsor-banner { display: block; max-width: 100%; height: auto; }
.sponsor-text-line { color: var(--oge-sand-text); }
.sponsor-text-line.fw-bold { color: var(--oge-sand-text-strong); }
.sponsor-text-line a { color: inherit; text-decoration-color: var(--oge-sand); }
.sponsor-text-line a:hover { color: var(--oge-green-dark); }

.sponsor-fixed-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(135deg, var(--oge-sand-bg-from) 0%, var(--oge-sand-bg-to) 100%);
	border-top: 2px solid var(--oge-sand-border);
	box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
	z-index: 1030;
}
.sponsor-fixed-close {
	position: absolute;
	top: 8px;
	right: 12px;
}
@media (max-width: 768px) {
	.sponsor-fixed-bar {
		display: none;
	}
}
.carousel-control-prev,
.carousel-control-next {
    width: auto;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.4);
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 4px;
    opacity: 1;
}

.event-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    width: 240px;
    height: 240px;
    border: 7px solid var(--oge-stamp-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

.stamp-text {
    color: var(--oge-stamp-red);
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
}

.event-stamp-sm {
    width: 90px;
    height: 90px;
    border-width: 3px;
}

.stamp-text-sm {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    line-height: 1.2;
}

.fi {
    outline: 1px solid rgba(0, 0, 0, 0.15);
}

.featured-course,
.featured-tour {
	border: 2px solid var(--oge-sand-border);
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

.featured-course-header,
.featured-tour-header,
.oge-comp-featured-header {
	background: linear-gradient(135deg, var(--oge-sand-bright) 0%, var(--oge-sand) 100%);
	border-bottom: 1px solid var(--oge-sand-muted);
}

.featured-course-label,
.featured-tour-label,
.oge-comp-featured-label {
	color: var(--oge-sand-text-strong);
	letter-spacing: 0.08em;
}

.featured-course-photo,
.tour-photo {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
}

/* Stretch the photo to the full height of the taller text column.
   Do not set a width here - it would override the Bootstrap column. */
.featured-course-photo-col,
.tour-photo-col {
	display: flex;
}

.featured-course-photo-link,
.tour-photo-link {
	display: flex;
	width: 100%;
}

/* Pass the stretched height down through the carousel to the image */
.featured-course-carousel,
.featured-course-carousel .carousel-inner,
.featured-course-carousel .carousel-item,
.tour-carousel,
.tour-carousel .carousel-inner,
.tour-carousel .carousel-item {
	width: 100%;
	height: 100%;
}

.featured-course-description,
.featured-tour-description {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Nothing sits alongside the featured tour card on the tours page, so it can
   run to twice the lines the featured course block allows. */
.featured-tour-description {
	-webkit-line-clamp: 12;
}

@media (max-width: 767.98px) {
	.featured-course-photo,
	.tour-photo {
		min-height: 200px;
		max-height: 240px;
	}
}

/* Green fee popup trigger. Deliberately not a .btn: the global
   .btn:hover { transform: translateY(-2px) } rule would make this jump
   inside a line of body text. */
.green-fee-trigger {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--bs-link-color);
	text-decoration: underline dotted;
	text-underline-offset: 2px;
	cursor: pointer;
}

.green-fee-trigger:hover,
.green-fee-trigger:focus-visible {
	text-decoration: underline;
}

.green-fee-rates li {
	padding: 0.25rem 0;
	overflow-wrap: anywhere;
}

.green-fee-rates li + li {
	border-top: 1px solid var(--bs-border-color);
}

/* ============================================================
   Sticky header
   ------------------------------------------------------------
   The navbar was already .sticky-top; this only adds the shrink.
   ============================================================ */
.navbar.oge-navbar {
	/* Faint diagonal mowing stripes over a sunlit-to-shaded turf gradient.
	   bg-success stays on the element as the solid fallback colour. */
	background-image:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 48px, transparent 48px 96px),
		linear-gradient(100deg, var(--oge-turf-light) 0%, var(--oge-green) 45%, var(--oge-green-darker) 100%);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	transition: padding 0.2s ease, box-shadow 0.2s ease;
}

.navbar.oge-navbar .navbar-brand img {
	height: 60px;
	width: auto;
	transition: height 0.2s ease;
}

.navbar.oge-navbar.is-scrolled {
	padding-top: 0.15rem;
	padding-bottom: 0.15rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.navbar.oge-navbar.is-scrolled .navbar-brand img {
	height: 38px;
}

/* The results anchor has to clear the header. The expanded height is the right
   value for both states: the browser scrolls the anchor into place while the
   header is still tall, and the shrink then lifts the content by exactly the
   height it gave up - so the gap below the header comes out the same either way. */
#results {
	scroll-margin-top: calc(var(--oge-header-height) + 0.75rem);
}

/* ============================================================
   Homepage hero
   ------------------------------------------------------------
   A slow push-in on each background image. The incoming slide
   is .carousel-item-next/-prev while it fades in and .active
   after; the animation name is the same across those classes,
   so it runs on unbroken rather than restarting. 7s covers the
   6s interval plus the fade, and forwards holds the last frame.
   ============================================================ */
#heroCarousel .carousel-item.active img,
#heroCarousel .carousel-item-next img,
#heroCarousel .carousel-item-prev img {
	animation: oge-hero-zoom 7s ease-out forwards;
}

@keyframes oge-hero-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

/* The hero text rises into place on load, staggered by an inline
   --oge-rise-delay per element. `both` keeps each one hidden until
   its delay is up. */
.oge-hero-rise {
	animation: oge-hero-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--oge-rise-delay, 0s) both;
}

@keyframes oge-hero-rise {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}
}

/* ============================================================
   Competition card
   ============================================================ */
.oge-comp-card {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
}

/* The date is what people scan for, so it leads. */
.oge-date-block {
	flex: 0 0 auto;
	width: 3.35rem;
	text-align: center;
	border: 1px solid var(--bs-border-color);
	border-radius: 0.5rem;
	overflow: hidden;
	background: #fff;
	line-height: 1.1;
}

.oge-date-block-month {
	display: block;
	background: var(--oge-green);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.15rem 0;
}

.oge-date-block-day {
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	padding: 0.2rem 0 0.1rem;
	color: var(--oge-ink);
}

.oge-date-block-year {
	display: block;
	font-size: 0.6rem;
	color: var(--bs-secondary-color);
	padding-bottom: 0.2rem;
}

.oge-date-range {
	font-size: 0.75rem;
	color: var(--bs-secondary-color);
}

.oge-comp-body {
	min-width: 0; /* lets long course names wrap instead of overflowing */
	flex: 1 1 auto;
}

.oge-comp-title {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.15rem;
	overflow-wrap: anywhere;
}

.oge-comp-meta {
	font-size: 0.875rem;
	color: var(--bs-secondary-color);
	margin-bottom: 0.4rem;
}

/* Format, category and handicap were labelled lines; as chips they read
   as attributes rather than prose. */
.oge-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-bottom: 0.5rem;
}

.oge-chip {
	font-size: 0.75rem;
	padding: 0.15rem 0.5rem;
	border-radius: 1rem;
	background: var(--bs-tertiary-bg);
	color: var(--bs-secondary-color);
	white-space: nowrap;
}

.oge-chip-distance {
	background: rgba(var(--oge-green-rgb), 0.1);
	color: var(--oge-green-dark);
	font-weight: 600;
}

/* The same chip, but on the search form, where it both names an active filter
   and removes it. Sized to sit on the button line beside "More filters". */
.oge-chip-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8125rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--bs-border-color);
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
	text-decoration: none;
}

.oge-chip-filter:hover,
.oge-chip-filter:focus {
	border-color: var(--oge-green);
	background: rgba(var(--oge-green-rgb), 0.08);
	color: var(--oge-green-darker);
}

.oge-fee {
	font-weight: 700;
	color: var(--oge-ink);
}

/* Featured events borrow the sand accent, not a second green. */
.oge-comp-featured-card {
	border: 1px solid var(--oge-sand);
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

.oge-comp-featured-header {
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}

/* The organiser marker on an event or tour title. Gold is the tour, gray the
   society, so the colour carries the distinction and not just the glyph. A
   status marker, not an action, so the sand accent still reads correctly. */
.oge-organiser-tour {
	color: var(--oge-sand);
}

/* Illustrative cards on the sponsor sales page: real markup, no live links. */
.oge-card-preview {
	pointer-events: none;
}

/* ============================================================
   Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.oge-card-hover,
	.oge-card-hover:hover,
	.navbar.oge-navbar,
	.navbar.oge-navbar .navbar-brand img,
	.btn,
	.google-btn,
	.navbar-nav .nav-link,
	#pwa-install-btn:hover,
	.cookie-banner,
	#heroCarousel .carousel-item img,
	.oge-hero-rise {
		transition: none !important;
		animation: none !important;
	}

	.oge-card-hover:hover,
	#pwa-install-btn:hover {
		transform: none !important;
	}
}