:root {
    /* The Pickled Goose — Figma palette (design-context.get_variable_defs, 2026-09-25) */
    --primary-dark: #183233;    /* Dark Teal */
    --primary-mid: #20332A;     /* Dark Green */
    --primary-light: #65BC7B;   /* Bright Green */
    --primary-lightest: #ffffff;
    --primary-grey: #D8D8D8;    /* Grey */

    --font-family-base: "Open Sans", sans-serif;
    --font-family-heading: Georgia, "Times New Roman", serif;

    --font-weight-light: 200;
    --font-weight-regular: 300;
    --font-weight-heavy: 400;
    --font-weight-bold: 700;

    --font-size-base: 17px;
    --font-size-large: 23px;
    --font-size-heading: 64px; /* single reference for all section headings (desktop) */

    --border-radius: 0px;
}

body {
    font-family: var(--font-family-base);
    font-optical-sizing: auto;
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-base);
    font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-optical-sizing: auto;
    font-weight: var(--font-weight-heavy);
    letter-spacing: normal;
}
/* Match every top-level section heading (h1 "Welcome", h2 section titles) to
   the same size, overriding Bootstrap's own differing h1/h2 defaults. h3+
   (e.g. "Local Highlights") are a distinct, lower sub-heading level and are
   left alone. */
h1, h2 {
    font-size: var(--font-size-heading);
}

    	.card-img,
	.card-img-top, .gallery-item img {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
        transition: 0.3s ease-in-out;
                cursor: pointer;
	}

    	.gallery-item:hover, .card-img-top:hover  {
		transform: scale(1.05);
	}
	.modal-header {
		background-color: transparent;
		border-bottom: none;
	}
	.modal-content {
		background-color: transparent;
		border: none;
	}
	.modal-body img {
		background-color: #fff; /* Optional: to ensure image visibility */
		border: var(--primary-lightest) solid 5px;
	}
	.custom-close {
		position: absolute;
		top: 0px;
		right: 0px;
		width: 30px;
		height: 30px;
		background-color: white;
		border: none;
		border-radius: 50%;
		opacity: 1;
		z-index: 1051; /* Ensure the close button is on top */
	}

	.custom-close::before {
		content: "\2715"; /* Unicode for 'x' */
		font-size: 20px;
		color: black;
		display: block;
		text-align: center;
		line-height: 30px;
	}

@media only screen and (max-width: 768px) {

	/* Deliberately NOT scaled up with --font-size-heading (now 64px desktop):
	   64px is a desktop-only display size. Keeping mobile headings at 2rem/32px
	   preserves readability and layout on small screens instead of scaling
	   proportionately (which would push mobile past ~51px). */
	h1, h2 {
		font-size: 2rem !important;
	}
.pb-5, .py-5 {
    padding-bottom: 0rem !important;
}



.mt-5 {
    margin-top: 0rem !important;
}
}


/* Site width: widen the content band (Bootstrap .container) from its 1320px
   xxl cap to 1400px. Smaller breakpoint steps and gutters are unchanged;
   full-bleed backgrounds / container-fluid are not affected. */
@media (min-width: 1400px) {
	.container {
		max-width: 1400px;
	}
}