/**
 * @file /assets/css/layout.css
 * @date 2026-11
 * @author Milos Mandic | codeDESIGN
 */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --red: #c00d0e;
  --ink: #242424;
  --body: #444444;
}

* { box-sizing: border-box; }

html { background: #ffffff; }

body {
  margin: 0;
  padding: clamp(1rem, 3vw, 3rem);
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  color: var(--body);
  font: 400 1rem/1.6 "Open Sans", Arial, sans-serif;
}

a { color: inherit; }

a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }

.page { width: min(100%, 70rem); }

.hero { position: relative; background: #ffffff; }

.banner-image { display: block; width: 100%; height: auto; }

.brand { position: absolute; top: 0; left: 5.6%; width: 11.4%; }

.brand img { display: block; width: 100%; height: auto; }

.intro {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.mobile-visual { display: none; }

.contact {
  position: absolute;
  top: 69%;
  right: 4.6%;
  bottom: 0;
  left: 51%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #ffffff;
}

.contact p { margin: 0 0 .25rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }

.phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 600 clamp(1.15rem, 2.6vw, 2.12rem)/1.25 "Work Sans", Arial, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}

.email { display: inline-flex; align-items: center; min-height: 38px; font-size: .88rem; text-decoration: none; }

.contact a:hover { text-decoration: underline; text-underline-offset: .2em; }

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.35rem 0 0;
  border-top: 1px solid #ededed;
  font-size: .75rem;
}

.footer p { margin: 0; }
.footer address { font-style: normal; }
.footer strong { color: var(--ink); font-weight: 600; }
.footer nav { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.footer nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer nav a:hover { text-decoration: underline; }
.copyright { color: #666666; font-size: .69rem; }

.legal-page { max-width: 50rem; }
.legal-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 3px solid var(--red); padding-bottom: 1rem; }
.legal-header img { display: block; width: 95px; height: 95px; }
.legal-header a { text-underline-offset: .2em; }
.legal-content { padding-block: 1.25rem 2rem; overflow-wrap: anywhere; font-size: .75rem; }
.legal-content h1 { font: 700 1.125rem/1.4 "Work Sans", Arial, sans-serif; color: var(--red); }
.legal-content h2 { margin-top: 1.25rem; font-size: .875rem; line-height: 1.4; color: var(--ink); }
.legal-content h3 { font-size: .8125rem; }
.legal-content p, .legal-content ul { margin: .6rem 0 1rem; }
.legal-content address { font-style: normal; }
.legal-content a { color: var(--red); text-underline-offset: .2em; }

@media (max-width: 760px) {
  body { padding: 1.2rem; }
  .banner-image { display: none; }
  .brand { position: static; display: block; width: 95px; margin: 0 0 1.2rem; }
  .intro { position: static; width: auto; height: auto; margin: 0 0 1.5rem; overflow: visible; clip-path: none; }
  .intro h1 { margin: 0 0 .45rem; font: 750 clamp(1.9rem, 7.7vw, 2.75rem)/.98 "Work Sans", Arial, sans-serif; letter-spacing: -.045em; text-transform: uppercase; color: var(--red); }
  .intro p { margin: 0; font: 600 .88rem/1.5 "Work Sans", Arial, sans-serif; text-transform: uppercase; }
  .mobile-visual { display: block; height: clamp(140px, 37vw, 220px); background: url("../images/ws-control-banner.jpg") right top / auto 220% no-repeat; clip-path: polygon(0 0, 100% 0, 100% 100%, 7% 100%); }
  .contact { position: static; min-height: 145px; padding: 1.3rem 1.35rem 1.05rem 1.6rem; background: var(--red); clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); }
  .phone { font-size: clamp(1.22rem, 5.1vw, 1.8rem); }
  .footer { flex-wrap: wrap; padding-top: 1rem; gap: .4rem; }
  .footer nav { margin-left: auto; }
  .legal-page .footer nav { margin-left: 0; }
}



/* LEGAL MODAL */
html.legal_modal_open {
	scrollbar-gutter: stable;
	overflow: hidden;
}
dialog.legal_modal {
	background: #ffffff;
	width: min(48rem, calc(100% - 2rem));
	border: 0;
	border-radius: 0;
	margin: auto;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
	color: var(--body);
	max-width: none;
	max-height: min(90vh, 56rem);
	max-height: min(90dvh, 56rem);
}
dialog.legal_modal[open] {
	display: flex;
	flex-direction: column;
}
dialog.legal_modal::backdrop {
	background: rgba(0, 0, 0, .6);
}
dialog.legal_modal header.legal_modal_header {
	border-bottom: 2px solid var(--red);
	padding: 12px 16px 12px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 0 0 auto;
	gap: 16px;
}
dialog.legal_modal h2.legal_modal_title {
	margin: 0px 0px 0px 0px;
	font: 700 1.125rem/1.4 "Work Sans", Arial, sans-serif;
	color: var(--red);
}
dialog.legal_modal button.legal_modal_close {
	background: transparent;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 0;
	padding: 0px 0px 0px 0px;
	font: 400 28px/1 Arial, sans-serif;
	color: var(--ink);
	cursor: pointer;
	flex: 0 0 44px;
}
dialog.legal_modal button.legal_modal_close:hover {
	background: #f3f3f3;
}
dialog.legal_modal button.legal_modal_close:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: -4px;
}
dialog.legal_modal div.legal_modal_body {
	padding: 20px 24px 24px 24px;
	overflow: auto;
	font: 400 .75rem/1.6 "Open Sans", Arial, sans-serif;
	min-height: 0;
	overscroll-behavior: contain;
}
dialog.legal_modal section.legal-content {
	padding: 0px 0px 0px 0px;
}
dialog.legal_modal section.legal-content > :first-child {
	margin-top: 0;
}
dialog.legal_modal section.legal-content > :last-child {
	margin-bottom: 0;
}