/* ==========================================================================
   USAL theme - design system
   Palette follows the original brand: accent #1ebbf0, ink #3b3f4a,
   body #333, muted #787d85 / #8b9199.

   Scaling rules used throughout:
     * every horizontal measure is fluid (clamp / %) - nothing is locked to a
       fixed pixel width, so the layout survives browser zoom, device pixel
       ratios and any viewport from 320px up to ultrawide.
     * vertical rhythm is fluid too (clamp), so the page never looks empty on
       a large monitor nor cramped on a phone.
     * the hero uses svh (small viewport height) so the mobile address bar
       cannot clip the bottom of the slider.
   ========================================================================== */

:root {
	--usal-accent: #1ebbf0;
	--usal-accent-dark: #1595c4;
	--usal-ink: #3b3f4a;
	--usal-footer-bg: #1a1c20;
	--usal-body: #333333;
	--usal-muted: #787d85;
	--usal-light: #8b9199;
	--usal-line: #e6e8ea;
	--usal-bg: #ffffff;
	--usal-bg-alt: #f6f8f9;
	--usal-radius: 4px;
	--usal-container: 1200px;
	--usal-gutter: clamp(16px, 4vw, 40px);
	--usal-header-h: 92px;
	--usal-section-y: clamp(44px, 6vw, 88px);
}

/* --------------------------------------------------------------- base ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--usal-header-h) + 16px);
}

body {
	margin: 0;
	background: var(--usal-bg);
	color: var(--usal-body);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	font-size: clamp(15px, 0.94rem + 0.12vw, 17px);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--usal-accent-dark); text-decoration: none; transition: color .18s ease; }
a:hover, a:focus { color: var(--usal-accent); }
h1, h2, h3, h4, h5, h6 { color: var(--usal-ink); line-height: 1.25; margin: 0 0 .6em; font-weight: 600; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.4em; }
blockquote { margin: 0 0 1.2em; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--usal-accent); color: var(--usal-muted); font-style: italic; }
hr { border: 0; border-top: 1px solid var(--usal-line); margin: 2em 0; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; }
th, td { padding: .6em .8em; border-bottom: 1px solid var(--usal-line); text-align: left; }

:focus-visible { outline: 2px solid var(--usal-accent); outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.usal-skip-link:focus {
	position: fixed !important; top: 8px; left: 8px; width: auto; height: auto;
	clip: auto; z-index: 999; background: var(--usal-accent); color: #fff;
	padding: .7em 1.2em; border-radius: var(--usal-radius);
}

/* ------------------------------------------------------------- layout ---- */
.usal-container {
	width: 100%; max-width: var(--usal-container); margin: 0 auto;
	padding-inline: var(--usal-gutter);
}
.usal-main { display: block; min-height: 40vh; }
.usal-section { padding-block: var(--usal-section-y); }
.usal-section--front { padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 88px); }

/* ------------------------------------------------------------- header ---- */
.usal-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--usal-line);
}
.usal-header__inner {
	max-width: var(--usal-container); margin: 0 auto;
	padding-inline: var(--usal-gutter);
	min-height: var(--usal-header-h);
	display: flex; align-items: center; justify-content: space-between;
	gap: clamp(12px, 2vw, 28px);
}
.usal-header__branding { flex: 0 0 auto; min-width: 0; }
.usal-header__branding img,
.usal-header__branding .custom-logo {
	/* logo enlarged by 20 % (was clamp(46px, 5.4vw, 68px)) */
	max-height: clamp(55.2px, 6.48vw, 81.6px);
	width: auto;
}
.usal-logo { font-weight: 700; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); color: var(--usal-ink); }

.usal-nav-toggle {
	display: none; background: none; border: 0; padding: 10px 6px; cursor: pointer;
	flex-direction: column; gap: 5px; margin-left: auto;
}
.usal-nav-toggle__bar { display: block; width: 24px; height: 2px; background: var(--usal-ink); transition: transform .2s ease, opacity .2s ease; }

.usal-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(0px, .4vw, 6px); }
.usal-menu li { position: relative; }
.usal-menu a {
	display: block;
	padding: clamp(22px, 2.6vw, 28px) clamp(10px, 1.15vw, 18px);
	color: var(--usal-ink);
	font-size: clamp(.95rem, .9rem + .18vw, 1.05rem);
	font-weight: 500; letter-spacing: .01em; position: relative; white-space: nowrap;
}
.usal-menu > li > a::after {
	content: ""; position: absolute;
	left: clamp(10px, 1.15vw, 18px); right: clamp(10px, 1.15vw, 18px);
	bottom: clamp(16px, 1.9vw, 20px); height: 2px;
	background: linear-gradient(90deg, var(--usal-accent), var(--usal-accent-dark));
	transform: scaleX(0); transform-origin: left center; transition: transform .22s ease;
}
.usal-menu > li > a:hover::after,
.usal-menu > li > a:focus-visible::after,
.usal-menu > li.current-menu-item > a::after,
.usal-menu > li.current-menu-ancestor > a::after,
.usal-menu > li.current_page_item > a::after { transform: scaleX(1); }

/* dropdown */
.usal-menu .sub-menu {
	list-style: none; position: absolute; top: 100%; left: 0;
	min-width: min(230px, 80vw); margin: 0; padding: 6px 0;
	background: #fff; border: 1px solid var(--usal-line); border-radius: var(--usal-radius);
	box-shadow: 0 12px 30px rgba(59, 63, 74, .10);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.usal-menu li:hover > .sub-menu,
.usal-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.usal-menu .sub-menu a {
	padding: 10px 18px; color: var(--usal-body); font-weight: 400; white-space: normal;
}
.usal-menu .sub-menu a:hover { background: var(--usal-bg-alt); color: var(--usal-accent-dark); }

/* --------------------------------------------------------------- hero ---- */
.usal-hero {
	position: relative;
	/* fills the viewport below the header - the same full-screen impression
	   as the original The7 photo slider, without the page builder */
	height: calc(100svh - var(--usal-header-h));
	min-height: 420px;
	max-height: 1200px;
	background: var(--usal-ink);
	overflow: hidden;
	isolation: isolate;
}
@supports not (height: 100svh) {
	.usal-hero { height: calc(100vh - var(--usal-header-h)); }
}
.usal-hero__slider { position: absolute; inset: 0; z-index: 0; }
.usal-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.usal-hero__slide.is-active { opacity: 1; }
.usal-hero__slide img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 42%;
}
.usal-hero__slide::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20, 24, 30, .40) 0%, rgba(20, 24, 30, .18) 38%, rgba(20, 24, 30, .62) 100%);
}
.usal-hero__caption {
	position: absolute; left: 0; right: 0; bottom: clamp(70px, 9vh, 110px); z-index: 2; margin: 0;
	text-align: center; color: #fff; font-size: clamp(1rem, 2.2vw, 1.5rem);
	font-weight: 500; letter-spacing: .04em; text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

/* overlay with the brand message */
.usal-hero__overlay {
	position: relative; z-index: 3;
	max-width: var(--usal-container); margin: 0 auto;
	padding: clamp(24px, 6vh, 48px) var(--usal-gutter);
	min-height: min(calc(100svh - var(--usal-header-h)), 1200px);
	display: flex; flex-direction: column; justify-content: center;
	align-items: flex-start;
	pointer-events: none;
}
.usal-hero__overlay > * { pointer-events: auto; }
.usal-hero__eyebrow {
	margin: 0 0 .8em; color: var(--usal-accent);
	font-size: clamp(.8rem, .76rem + .2vw, .95rem);
	font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.usal-hero__title {
	margin: 0 0 .5em; color: #fff;
	/* scales with the width AND the height of the viewport, so the block
	   still fits on a short laptop screen or a landscape phone */
	font-size: clamp(1.4rem, min(1rem + 2.8vw, 8vh), 3.3rem);
	line-height: 1.15; font-weight: 700;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
	max-width: min(24ch, 100%);
}
.usal-hero__text {
	margin: 0 0 1.6em; color: rgba(255, 255, 255, .9);
	font-size: clamp(.92rem, min(.92rem + .35vw, 3.2vh), 1.15rem);
	max-width: 52ch;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
.usal-hero__actions { margin: 0; display: flex; flex-wrap: wrap; gap: clamp(10px, 1.4vw, 16px); }

.usal-hero__dots {
	position: absolute; left: 0; right: 0; bottom: clamp(18px, 3vh, 30px); z-index: 4;
	display: flex; justify-content: center; gap: 9px;
}
.usal-hero__dot {
	width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .45); cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.usal-hero__dot.is-active { background: var(--usal-accent); transform: scale(1.25); }

/* -------------------------------------------------------------- page ----- */
.usal-page__title {
	font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.6rem);
	position: relative; padding-bottom: .45em; margin-bottom: .9em;
}
.usal-page__title::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: clamp(48px, 6vw, 64px); height: 3px;
	background: linear-gradient(90deg, var(--usal-accent), var(--usal-accent-dark)); border-radius: 2px;
}
.usal-page__title--center { text-align: center; }
.usal-page__title--center::after { left: 50%; transform: translateX(-50%); }
.usal-section--split .usal-container {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 48px); align-items: start;
}
.usal-page__media img { border-radius: var(--usal-radius); width: 100%; }

/* ----------------------------------------------------------- content ----- */
.usal-content > *:last-child { margin-bottom: 0; }
.usal-content h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.6rem); margin-top: 1.6em; }
.usal-content h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.3rem); margin-top: 1.4em; }
.usal-content h4 { font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); }
.usal-content .wp-block-image { margin: 0 0 1.4em; }
.usal-content .caption { font-size: .86rem; color: var(--usal-muted); text-align: center; margin-top: -.8em; }

/* migrated column grid
   The old site used WPBakery rows: the columns take an exact share of the
   row (2/5 + 3/5, 1/3 + 2/3 ...) and the space between them comes from the
   padding inside the columns. The same model is used here, so the rebuilt
   pages have exactly the same proportions as the original ones. */
.usal-content .grid {
	--col-gap: clamp(24px, 3vw, 36px);
	--col-pad: min(calc(var(--col-gap) / 2), var(--usal-gutter));
	display: flex; flex-wrap: wrap;
	margin: 0 calc(var(--col-pad) * -1) 1.6em;
}
.usal-content .grid > .col { min-width: 0; padding: 0 var(--col-pad); box-sizing: border-box; }
.usal-content .grid > .col-1-1 { width: 100%; }
.usal-content .grid > .col-1-2,
.usal-content .grid > .col-2-4 { width: 50%; }
.usal-content .grid > .col-1-3 { width: 33.3333%; }
.usal-content .grid > .col-2-3 { width: 66.6667%; }
.usal-content .grid > .col-1-4 { width: 25%; }
.usal-content .grid > .col-3-4 { width: 75%; }
.usal-content .grid > .col-2-5 { width: 40%; }
.usal-content .grid > .col-3-5 { width: 60%; }
.usal-content .grid > .col-1-5 { width: 20%; }
.usal-content .grid > .col-4-5 { width: 80%; }

/* highlight cards (front page) */
.usal-highlights {
	display: grid; gap: clamp(20px, 2.4vw, 30px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	margin: 0 0 1.4em;
}
.usal-highlight {
	background: #fff; border: 1px solid var(--usal-line);
	border-top: 3px solid var(--usal-accent);
	border-radius: var(--usal-radius); padding: clamp(20px, 2.2vw, 28px);
}
.usal-highlight h3 { margin: 0 0 .5em; font-size: clamp(1.08rem, 1rem + .35vw, 1.22rem); }
.usal-highlight p:last-child { margin-bottom: 0; }
.usal-highlight ul { padding-left: 1.15em; }
.usal-highlight li { margin-bottom: .35em; }

/* product gallery on the products page */
.usal-content .gallery {
	display: grid; gap: clamp(16px, 2vw, 24px);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.usal-content .gallery figure { margin: 0; }
.usal-content .gallery img {
	border-radius: var(--usal-radius); width: 100%;
	transition: transform .25s ease, box-shadow .25s ease;
}
.usal-content .gallery figure:hover img {
	transform: translateY(-4px); box-shadow: 0 16px 34px rgba(59, 63, 74, .16);
}

/* ------------------------------------------------------------- cards ----- */
.usal-cards {
	display: grid; gap: clamp(20px, 2.4vw, 30px);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.usal-card { background: #fff; border: 1px solid var(--usal-line); border-radius: var(--usal-radius); overflow: hidden; }
.usal-card__media img { width: 100%; }
.usal-card__title { font-size: clamp(1.05rem, 1rem + .25vw, 1.14rem); margin: 16px 18px 6px; }
.usal-card__title a { color: var(--usal-ink); }
.usal-card__excerpt { padding: 0 18px 18px; color: var(--usal-muted); font-size: .95rem; }

/* ----------------------------------------------------------- buttons ----- */
.usal-button {
	display: inline-block;
	padding: clamp(.68em, 1vw, .85em) clamp(1.2em, 2vw, 1.8em);
	border-radius: var(--usal-radius);
	background: linear-gradient(90deg, var(--usal-accent), var(--usal-accent-dark));
	color: #fff !important; font-weight: 600; letter-spacing: .01em;
	box-shadow: 0 8px 20px rgba(30, 187, 240, .28);
	transition: transform .18s ease, box-shadow .18s ease;
}
.usal-button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(30, 187, 240, .36); }
.usal-button--ghost {
	background: rgba(255, 255, 255, .12); color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .65); box-shadow: none;
}
.usal-button--ghost:hover { background: rgba(255, 255, 255, .22); box-shadow: none; }

/* ------------------------------------------------------------- footer ---- */
/* Mirrors the original site: a dark bar (#1a1c20) with one left aligned
   copyright line, 13px / 23px, 60px tall. */
.usal-footer { background: var(--usal-footer-bg); color: #fff; margin-top: 0; }
.usal-footer__inner {
	max-width: var(--usal-container); margin: 0 auto;
	padding: 10px var(--usal-gutter); min-height: 60px;
	display: flex; align-items: center;
}
.usal-footer__copy { margin: 0; font-size: 13px; line-height: 23px; color: #fff; }
.usal-footer__copy a { color: #fff; }

.usal-backtop {
	position: fixed; right: 10px; bottom: 10px; z-index: 109;
	width: 40px; height: 40px; display: grid; place-items: center;
	background: rgba(0, 0, 0, .32); color: #fff !important;
	border-radius: 1px; box-shadow: none;
	opacity: 0; visibility: hidden; transform: translateX(45px);
	transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}
.usal-backtop.is-visible { opacity: 1; visibility: visible; transform: translateX(0); }
.usal-backtop:hover { background: rgba(0, 0, 0, .5); }
.usal-backtop svg { display: block; }

/* ------------------------------------------------------------- misc ------ */
.usal-empty { text-align: center; padding: 40px 0 60px; }
.usal-pagination { display: flex; gap: 10px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.usal-pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--usal-line); border-radius: var(--usal-radius); }
.usal-pagination .page-numbers.current { background: var(--usal-accent); color: #fff; border-color: var(--usal-accent); }
.usal-map { margin: 1.6em 0; }
.usal-map iframe { width: 100%; max-width: 100%; border: 0; border-radius: var(--usal-radius); }
/* the Google Maps embed defaults to a fixed 600px - it has to follow the
   column it sits in, otherwise it overflows on a phone */
.usal-content iframe {
	width: 100%; max-width: 100%; border: 0;
	min-height: clamp(280px, 46vw, 440px);
	border-radius: var(--usal-radius);
}
.usal-contact-list { list-style: none; padding: 0; }
.usal-contact-list li { padding: 6px 0; border-bottom: 1px solid var(--usal-line); }
.usal-contact-list li:last-child { border-bottom: 0; }

/* --------------------------------------------------------- responsive ---- */
@media (max-width: 1024px) {
	.usal-content .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Below this width the menu collapses - this also covers tablets and browsers
   zoomed to 150 %, where the menu would otherwise collide with the logo. */
@media (max-width: 900px) {
	:root { --usal-header-h: 70px; }

	.usal-header__inner { flex-wrap: wrap; min-height: 70px; }
	.usal-nav-toggle { display: flex; order: 3; }
	.usal-nav-toggle[aria-expanded="true"] .usal-nav-toggle__bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
	.usal-nav-toggle[aria-expanded="true"] .usal-nav-toggle__bar:nth-child(3) { opacity: 0; }
	.usal-nav-toggle[aria-expanded="true"] .usal-nav-toggle__bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

	.usal-nav {
		order: 4; width: 100%; display: none;
		border-top: 1px solid var(--usal-line); padding: 8px 0 16px;
	}
	.usal-nav.is-open { display: block; }
	.usal-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.usal-menu a { padding: 12px 4px; border-bottom: 1px solid var(--usal-line); white-space: normal; }
	.usal-menu > li > a::after { display: none; }
	.usal-menu .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-left: 2px solid var(--usal-accent);
		margin-left: 10px; padding: 0 0 0 8px;
	}
	.usal-menu .sub-menu a { padding: 9px 4px; border-bottom: 0; color: var(--usal-muted); }

	.usal-section--split .usal-container { grid-template-columns: 1fr; gap: 26px; }
	.usal-content .grid > .col { width: 100% !important; }
	.usal-content .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.usal-hero__title { max-width: 22ch; }
}

/* Short viewports (laptop in landscape with the browser chrome open, or a
   phone in landscape) - the hero text is dropped and the title shrinks so
   the overlay always fits inside the hero. */
@media (max-height: 700px) {
	.usal-hero__text { display: none; }
	.usal-hero__overlay { padding-block: clamp(20px, 5vh, 36px); }
	.usal-hero__eyebrow { margin-bottom: .5em; }
	.usal-hero__actions .usal-button { padding-block: .55em; }
}

@media (max-height: 560px) {
	.usal-hero { min-height: 300px; }
	.usal-hero__overlay { min-height: min(calc(100svh - var(--usal-header-h)), 1200px); padding-block: 18px; }
	.usal-hero__title { font-size: clamp(1.3rem, 7.5vh, 1.9rem); }
	.usal-hero__dots { bottom: 12px; }
}

@media (max-width: 560px) {
	.usal-content .gallery { grid-template-columns: 1fr; }
	.usal-hero__actions { width: 100%; }
	.usal-hero__actions .usal-button { flex: 1 1 auto; text-align: center; }
	.usal-footer__inner { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
	html { scroll-behavior: auto; }
}