/* ============================================================
   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. Also the navbar, the theme-color meta and the
	   PWA manifest colour, so it is the one green the site has. */
	--oge-green: #198754;
	--oge-green-dark: #146c43;
	--oge-green-darker: #0f5132;

	/* 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: #198754;
	--bs-primary-rgb: 25, 135, 84;

	/* Links get the darker green: #198754 on white is 4.5:1,
	   which is marginal for body text. #146c43 is 6.5:1. */
	--bs-link-color: #146c43;
	--bs-link-color-rgb: 20, 108, 67;
	--bs-link-hover-color: #0f5132;
	--bs-link-hover-color-rgb: 15, 81, 50;
}

/* 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. */
.btn-primary {
	--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: 25, 135, 84;
}

.btn-outline-primary {
	--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: 25, 135, 84;
}

/* 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(25, 135, 84, 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(25, 135, 84, 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(25, 135, 84, 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-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 {
	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);
}

/* ============================================================
   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(25, 135, 84, 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(25, 135, 84, 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 {
		transition: none !important;
		animation: none !important;
	}

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