/* ==========================================================================
   Gavina Ink — Understrap theme
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
    1. Fonts & tokens
    2. Typography
    3. Layout: wrapper, main, sidebar
    4. Header
    5. Header navigation
    6. Navigation breakpoints (1200, 767)
    7. Mobile menu
    8. Account menu & footer palette
    9. Slideshow & hero captions
   10. PhotoBox caption
   11. Marquee
   12. Footer links
   13. Footer links breakpoints (1200, 600)
   14. Site footer
   15. Frontpage title & green square
   16. Frontpage title breakpoints (1200, 767, 600)
   17. Boxes: photo with overlapping card
   18. Boxes breakpoint (767)
   19. Scroll-reveal animations
   20. Quote carousel
   --------------------------------------------------------------------------
   Breakpoints: 1400 = max heights, 1200 = desktop, 767 = tablet, 600 = mobile
   ========================================================================== */

/* 1. Fonts & tokens  */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Roboto:wght@400;500;600;700&display=swap');

:root {
	--theme-color1: #8EF319;
	--theme-color2: #002A40;
}

/* 2. Typography  */
body { font-family: 'Roboto', sans-serif; }

h1, h2, h3, h4, h5, h6 { font-family: 'Oswald', sans-serif; }

h3 {
	text-transform: uppercase;
	color: var(--theme-color2);
}

h1 .mdi { vertical-align: middle; }

h1 .mdi::before {
	position: relative;
	top: -0.15em;
}

/* 3. Layout: wrapper, main, sidebar  */
.wrapper {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 1em;
}

main { padding: 2rem 0; }

/* sidebars sit beside the page content instead of pushing it down */
main:has(.sidebar) {
	display: flex;
	align-items: flex-start;
	gap: 2em;
}

main:has(.sidebar) aside { flex: 0 0 16rem; }

main:has(.sidebar) article {
	flex: 1;
	min-width: 0;
}

@media (max-width: 767px) {
	main:has(.sidebar) { flex-direction: column; }

	main:has(.sidebar) article { order: 1; }

	main:has(.sidebar) aside {
		order: 2;
		flex: 0 0 auto;
		width: 100%;
	}
}

/* 4. Header  */
header {
	width: 100%;
	padding: 1em 0;
}

.is_frontpage header {
	position: absolute;
	top: 0;
	z-index: 1;
	background: linear-gradient(rgb(41, 41, 41), transparent) !important;
	pointer-events: none;
}

.is_frontpage header a,
.is_frontpage header button,
.is_frontpage header nav { pointer-events: auto; }

.is_frontpage #account_menu + header { top: 2.2em; }

body:not(.is_frontpage) header { background-color: var(--theme-color2); }

body:not(.is_frontpage):has(article .page > h1) header { padding-bottom: 8rem; }

body:not(.is_frontpage) article .page > h1 {
	color: var(--theme-color1);
	text-transform: uppercase;
	font-size: 3rem;
	margin: -7rem 0 0.5em;
}

/* 5. Header navigation  */
header .wrapper,
#footer-links .wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

header nav ul li {
	position: relative;
	border-right: 1px solid var(--theme-color1);
	width: 8em;
	text-align: center;
	font-family: 'Oswald', sans-serif;
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

header nav ul li:last-of-type { border: none; }

header nav ul li a {
	display: block;
	padding: 1em 0.5em;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
}

header nav ul li:hover,
header nav ul li.current { background-color: var(--theme-color1); }

header nav ul li:hover a,
header nav ul li.current a,
header nav ul li a.current { color: #000; }

/* 6. Navigation breakpoints (1200, 767)  */
@media (max-width: 1200px) {
	#site-identity #title img {
		width: 170px;
		height: auto;
	}

	header nav ul li {
		width: auto;
		font-size: 0.8em;
	}

	header nav ul li a { white-space: nowrap; }
}

@media (max-width: 767px) {
	header .wrapper { position: relative; }

	#site-identity #title img { width: 140px; }

	header #mobile-menu {
		display: block;
		margin-left: auto;
	}

	header nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	header nav ul { flex-direction: column; }

	header nav ul li {
		border: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		width: 100%;
		font-size: 1.1em;
		background-color: rgba(41, 41, 41, 0.79);
	}

	header nav ul li a {
		padding: 0.8em 1.5em;
		text-align: left;
	}
}

/* 7. Mobile menu  */
#mobile-menu { display: none; }

/* 8. Account menu & footer palette  */
#account_menu {
	padding: 0.5em;
	text-align: right;
}

#account_menu,
footer,
#footer-links {
	color: white;
	background-color: var(--theme-color2);
}

nav a {
	color: white;
	text-transform: uppercase;
}

footer { text-transform: uppercase; }

/* 9. Slideshow & hero captions  */
#slideshow-container {
	position: relative;
	--hero-font-size: min(5.5rem, 6.875vw);
}

#slideshow {
	height: 800px;
	aspect-ratio: auto !important;
}

#slideshow .nivoSlider {
	display: flex;
	align-items: center;
}

#slideshow .nivo-caption {
	left: 1.09em;
	bottom: 1.09em;
	width: 6.9em;
	font-size: var(--hero-font-size, 5.5rem);
	font-weight: 700;
	line-height: 1;
	padding: 0 0 1.18em; /* constant room below the text for the 24px button */
	background-color: transparent;
	opacity: 1;
	text-transform: uppercase;
	overflow: visible;
	filter: drop-shadow(5px 4px 13px #000);
}

/* no ::last-line exists: paint the caption white, then clip a gradient that
   leaves only the bottom line (line-height = 1em) green. Guarded by @supports
   so a browser without background-clip:text keeps master.css's white text
   instead of rendering color:transparent glyphs over a plain rectangle. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	#slideshow .nivo-caption {
		color: transparent;
		background-image: linear-gradient(to top, var(--theme-color1) 0 1em, #fff 1em);
		background-origin: content-box;
		background-repeat: no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
	}
}

#slideshow .nivo-caption::first-line { font-weight: 400; }

#quote-button {
	position: absolute;
	left: calc(var(--hero-font-size, 5.5rem) * 1.09);
	bottom: calc(var(--hero-font-size, 5.5rem) * 1.09);
	font-size: calc(var(--hero-font-size, 5.5rem) * 0.27);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.4em 1.5em;
	color: #fff;
	border: 2px solid var(--theme-color1);
	background-color: rgba(0, 0, 0, 0.17);
	letter-spacing: 0.05em;
	filter: drop-shadow(5px 4px 13px #000);
	transition: background-color 0.15s ease-in, color 0.15s ease-in;
}

#quote-button:hover {
	background-color: var(--theme-color1);
	color: black;
}

/* max heights: captions scale with the slide, capped at the desktop size */
@media (max-width: 1400px) {
	#slideshow { height: min(62.5vw, 800px); }

	#photocaption { font-size: min(7rem, 8.75vw); }
}

/* 10. PhotoBox caption  */
#PhotoBox:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--theme-color2);
	opacity: 0.5;
}

#photocaption {
	bottom: 50%;
	transform: translateY(50%);
	text-align: center;
	font-size: 7rem;
	text-transform: uppercase;
	font-weight: bold;
	opacity: 1;
	background-color: transparent;
	text-shadow: 5px 7px 12px black;
}

/* 11. Marquee  */
.marquee {
	background-color: var(--theme-color1);
	text-align: center;
	padding: 1.5em 3em;
	vertical-align: top;
}

.marquee p {
	margin: 0;
	font-size: 1.5em;
	font-weight: 600;
}

.marquee .custom_button {
	background-color: white !important;
	border: none;
	color: var(--theme-color2) !important;
	text-transform: uppercase;
	font-weight: 400;
	padding: 0.5em 2.5em;
	text-decoration: none;
	margin-left: 1em;
	display: inline;
	white-space: nowrap;
	line-height: 275%;
	font-size: 80%;
	transition: box-shadow 0.15s ease-in-out;
}

.marquee .custom_button:hover { box-shadow: 5px 5px 0 var(--theme-color2); }

@media (max-width: 600px) {
	.marquee .custom_button {
		display: block;
		width: fit-content;
		margin: 0.5em auto 0;
		line-height: 1.6;
	}
}

/* 12. Footer links  */
#footer-links { position: relative; }

#footer-links:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.05);
}

#footer-links .wrapper {
	position: relative;
	z-index: 1;
	padding: 2em 1em;
}

#footer-links .footer-brand {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

#footer-links #title img { max-width: 70%; }

#footer-links nav ul {
	display: flex;
	gap: 1em;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	list-style: none;
}

#footer-links nav ul li {
	flex: 0 1 auto;
	white-space: nowrap;
}

#footer-links nav ul li a {
	padding: 1em;
	text-decoration: none;
	color: var(--theme-color1);
	text-transform: uppercase;
}

#footer-links nav ul ul { padding-left: 0; }

#footer-links nav ul ul a { color: #fff; }

/* 13. Footer links breakpoints (1200, 600)  */
@media (max-width: 1200px) {
	#footer-links nav ul {
		gap: 0.5em;
		flex-wrap: wrap;
		justify-content: center;
	}
}

@media (max-width: 600px) {
	#footer-links .wrapper {
		flex-direction: column;
		gap: 1.5em;
		text-align: center;
	}

	/* un-nest the brand block so the stack can be reordered */
	#footer-links .footer-brand { display: contents; }

	#footer-links #title { order: 1; }

	#footer-links nav { order: 2; }

	#footer-links #all_socialmedia {
		order: 3;
		text-align: center;
	}

	#footer-links #title img { max-width: 220px; }
}

/* 14. Site footer  */
footer {
	text-align: center;
	padding: 1em 0;
	font-size: 80%;
}

footer a { color: var(--theme-color1); }

/* 15. Frontpage title & green square  */
.is_frontpage #pg_home {
	position: relative;
	grid-template-columns: minmax(0, 36rem) 1fr;
	gap: 4em 3em;
	align-items: center;
}

body:not(.has-pg-edit_page).is_frontpage #pg_home {
	display: grid;
	margin: 6em 0 1em;
}

.is_frontpage #pg_home > h1 {
	/* green square + accent tick geometry (scaled per breakpoint) */
	--sq: 20rem;
	--sq-top: -6.5rem;
	--tick-len: 3rem;
	grid-column: 1;
	position: relative;
	margin: 0;
	padding-left: 8rem;
	text-align: left;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 3.2rem;
	line-height: 1.05;
	color: var(--theme-color2);
}

.is_frontpage #pg_home > h1::before {
	content: '';
	position: absolute;
	left: 0;
	top: var(--sq-top);
	z-index: -1;
	width: var(--sq);
	height: var(--sq);
	background: var(--theme-color1);
}

.is_frontpage #pg_home > h1::after {
	content: '';
	position: absolute;
	left: 3rem;
	top: -4rem;
	width: 6rem;
	height: 5rem;
	pointer-events: none;
	background:
		linear-gradient(#1a1a1a, #1a1a1a) left 0.8rem bottom 1.2rem / var(--tick-len) 2px no-repeat,
		linear-gradient(#1a1a1a, #1a1a1a) left 4.6rem top 0.2rem / 2px var(--tick-len) no-repeat;
}

.is_frontpage #pg_home > .copy {
	grid-column: 2;
	margin: 0;
	padding: 0 4em;
	text-align: left;
	font-size: 1rem;
	line-height: 1.6;
}

.is_frontpage #pg_home > .boxes { grid-column: 1 / -1; }

/* 16. Frontpage title breakpoints (1200, 767, 600)  */
@media (max-width: 1200px) {
	.is_frontpage #pg_home { grid-template-columns: minmax(0, 30rem) 1fr; }

	.is_frontpage #pg_home > .copy { padding: 0 1em; }

	.is_frontpage #pg_home > h1 {
		--sq: 16rem;
		--sq-top: -4.85rem;
		--tick-len: 2.5rem;
		padding-left: 7rem;
		font-size: 3rem;
	}

	.is_frontpage #pg_home > h1::after {
		left: 2.6rem;
		top: -4.3rem;
		width: 5rem;
		height: 4.2rem;
		background:
			linear-gradient(#1a1a1a, #1a1a1a) left 0.65rem bottom 1rem / var(--tick-len) 2px no-repeat,
			linear-gradient(#1a1a1a, #1a1a1a) left 3.8rem top 0.25rem / 2px var(--tick-len) no-repeat;
	}
}

@media (max-width: 767px) {
	.is_frontpage #pg_home {
		grid-template-columns: 1fr;
		gap: 4em 0;
	}

	.is_frontpage #pg_home > h1,
	.is_frontpage #pg_home > .copy { grid-column: 1 / -1; }

	.is_frontpage #pg_home > .copy { padding: 0 1em; }

	.is_frontpage #pg_home > h1 {
		--sq: 13rem;
		--sq-top: -3.55rem;
		--tick-len: 2rem;
		padding-left: 6rem;
		font-size: 2.8rem;
	}

	.is_frontpage #pg_home > h1::after {
		left: 2rem;
		top: -3.2rem;
		width: 4.5rem;
		height: 3.8rem;
		background:
			linear-gradient(#1a1a1a, #1a1a1a) left 0.5rem bottom 0.8rem / var(--tick-len) 2px no-repeat,
			linear-gradient(#1a1a1a, #1a1a1a) left 3rem top 0.3rem / 2px var(--tick-len) no-repeat;
	}
}

@media (max-width: 600px) {
	.is_frontpage #pg_home > .copy { padding: 0; }

	.is_frontpage #pg_home > h1 {
		--sq: 8rem;
		--sq-top: -1.9rem;
		--tick-len: 1.5rem;
		padding-left: 3rem;
		font-size: 2rem;
	}

	.is_frontpage #pg_home > h1::after {
		left: 1rem;
		top: -1.9rem;
		width: 3rem;
		height: 2.5rem;
		background:
			linear-gradient(#1a1a1a, #1a1a1a) left 0.4rem bottom 0.6rem / var(--tick-len) 2px no-repeat,
			linear-gradient(#1a1a1a, #1a1a1a) left 2.3rem top 0.3rem / 2px var(--tick-len) no-repeat;
	}
}

/* 17. Boxes: photo with overlapping card  */
.boxes-grid-1 {
	flex-direction: column;
	align-items: stretch;
	gap: 4em;
	margin: 3em 0;
	overflow-x: clip;
}

.is_frontpage .boxes-grid-1 { margin-bottom: 1em; }

.boxes-grid-1 .box {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
}

.boxes-grid-1 .box:nth-child(even) { flex-direction: row; }

.boxes-grid-1 .box .box-hero {
	flex: 0 0 56%;
	margin-bottom: 0;
	min-height: 28rem;
}

.boxes-grid-1 .box .box-hero-image {
	aspect-ratio: auto;
	height: 100%;
	min-height: 28rem;
}

.boxes-grid-1 .box > .content {
	flex: 0 0 46%;
	align-self: center;
	position: relative;
	z-index: 1;
	margin-right: -10%;
	background: rgba(0, 42, 64, 0.88);
	color: #fff;
	padding: 2.5em 3em;
	text-align: center;
}

.boxes-grid-1 .box:nth-child(even) > .content {
	margin-right: 0;
	margin-left: -10%;
}

.boxes-grid-1 .box > .content h2 {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1.8rem;
	color: #fff;
	margin-top: 0;
}

.boxes-grid-1 .box > .content > .copy {
	font-size: 1.05rem;
	line-height: 1.6;
}

/* 18. Boxes breakpoint (767)  */
@media (max-width: 767px) {
	.boxes-grid-1 .box,
	.boxes-grid-1 .box:nth-child(even) { flex-direction: column; }

	.boxes-grid-1 .box .box-hero,
	.boxes-grid-1 .box .box-hero-image { min-height: 14rem; }

	.boxes-grid-1 .box > .content,
	.boxes-grid-1 .box:nth-child(even) > .content { margin: 0; }
}

/* 19. Scroll-reveal animations  */
/* heading: static text, green square slides in from the left */
.is_frontpage #pg_home > h1.scroll-anim::before {
	transform: translateX(-120%);
	opacity: 0;
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.is_frontpage #pg_home > h1.scroll-anim.inview::before {
	transform: none;
	opacity: 1;
}

/* accent ticks grow inward once the square has settled */
.is_frontpage #pg_home > h1.scroll-anim::after {
	background-size: 0 2px, 2px 0;
	transition: background-size 0.5s ease 0.5s;
}

.is_frontpage #pg_home > h1.scroll-anim.inview::after { background-size: var(--tick-len) 2px, 2px var(--tick-len); }

/* blue cards: slide in from their side, reverse on exit */
.boxes-grid-1 .box > .content.scroll-anim {
	opacity: 0;
	transform: translateX(-60px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.boxes-grid-1 .box:nth-child(even) > .content.scroll-anim { transform: translateX(60px); }

.boxes-grid-1 .box > .content.scroll-anim.inview,
.boxes-grid-1 .box:nth-child(even) > .content.scroll-anim.inview {
	opacity: 1;
	transform: none;
}

/* photobox caption: rise from below, reverse on exit */
#photocaption.scroll-anim {
	opacity: 0;
	transform: translateY(110%);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

#photocaption.scroll-anim.inview {
	opacity: 1;
	transform: translateY(50%);
}

/* 20. Quote carousel  */
#quote-carousel {
	position: relative;
	text-align: center;
	padding: 2em 1em;
}

@media (max-width: 767px) {
	#quote-carousel { padding-top: 1em; }
}

#quote-carousel > h1 { display: none; }

#quote-carousel .quote-container {
	max-width: 46rem;
	margin: 0 auto;
}

#quote-carousel .quote-container blockquote {
	border: none;
	margin: 0;
	padding: 0;
	font-size: 1.15rem;
	line-height: 1.6;
	text-align: left;
}

#quote-carousel .quote-container blockquote p:last-of-type {
	font-size: 0.85rem;
	text-transform: none;
	text-align: center;
	margin-top: 1em;
	color: var(--theme-color2);
}

#quote-carousel .mdi-format-quote-open {
	display: block;
	font-size: 3.5rem;
	line-height: 0.8;
	color: var(--theme-color2);
	margin-bottom: 0.25em;
}

#quote-carousel .owl-pagination {
	text-align: center;
	margin-top: 1.5em;
}

#quote-carousel .owl-page { display: inline-block; }

#quote-carousel .owl-page span {
	display: block;
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
	background-color: #ccc;
	margin: 0 0.25em;
}

#quote-carousel .owl-page.active span { background-color: var(--theme-color1); }