/* ============================================================
   Seawest Hardwood - theme overrides
   Buttons, brand colours and template customisations.
   Loaded after site.css on every page.
   ============================================================ */

/* ---------------------------------- */
/*Buttons and brand colours*/
/* ---------------------------------- */
/*Button*/
.button {
	background: #42A5F5;
	color: #ffffff;
}
.buttonInverted { }
.buttonGhost { }

/*Click to call*/
.click-to-call { }
.hide-on-mobile {}

/*Primary & Accent Colors Styles*/
.primaryColor {}
.primaryColorbg {}
.accentColor {}
.accentColorbg{}
.sectionTitle {}

/*Layout Effects*/
.circle { }
.roundedcorners { }
.fullWidth {}
.fullwidthStatic {}
.responsiveTable {}

.black-outline { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 2px 2px rgba(255,255,255,0.5); }
.white-outline { text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 2px 2px 2px rgba(0,0,0,0.5); }
.grey-outline-15px { outline: 15px solid; outline-offset: -15px; outline-color: rgba(0, 0,0, 0.6); }
.circle-red-border-5px {  }
.circle-blue-border-2px {  }

.frame { }
.polaroid { }
.stackedphoto { }
.taped-up-skew { }
.hvr-stackedphoto { }
.hvr-outline-out { }
.hvr-float { }
.hvr-float-shadow { }
.hvr-grow { }
.hvr-grow-shadow { }

/* ---------------------------------- */
/*Template customisations*/
/* ---------------------------------- */
.newimage {border: 2px solid #2961C1;}

/*TEXT STYLES*/
body {font-size: 14pt; line-height: 1.5; font-family: 'Muli', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
h1 {font-size: 36pt;}
h2 {font-size: 24pt;}

@media only screen and (max-width: 480px) {
  body {font-size: 12pt;}
  h1 {font-size: 28pt;}
  h2 {font-size: 20pt;}
}

/*=======bootstrap ====*/

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
   position: relative;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
}

@media (min-width: 768px){
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-9{
   width: 50%;
float: left;
}
.col-sm-12 {
   width: 100%;
}
.col-sm-3{
width: 25%;
float: left;
}
.col-sm-4{
width: 33.33%;
float: left;
}
.col-sm-8{
width: 66.66666667%;
float: left;
}
}

.row-width{
    padding-top: 0px;
    padding-bottom: 0px;
    position: relative;
    width: 90%;
    max-width: 100%;
    margin: auto;

}

.row-width{
    padding-top: 0px;
    padding-bottom: 0px;
    position: relative;
    display: block;
    width: 90%;
    max-width: 100%;
    margin: auto;

}

.section-width{
    position:relative;
    display:block;
    padding: 54px 0;
}

.img-blog{
    width: 50%;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    display: block;
}

/*======end=====*/

/*=====blog btn=====*/

.read-more-btn{
	width:fit-content;
	position:relative;
	display: block;
	padding: 8px 12px;
	text-transform: uppercase;
	font-size: 20px;
	background-color: #469e83;
	color: 	#fff;
	text-decoration: none;
}

.buttonInverted {
 padding: 10px 25px !important;
}

#navContainer {
 border-top: 1px solid rgba(70, 158, 131, 0.1);
  border-bottom: 1px solid rgba(70, 158, 131, 0.1);
}

.MKVbox {
 padding: 20px;
  background-color: rgba(70, 158, 131, 0.55);
  border: 5px solid #469E83;
}

.MKVbox p:last-child {
 margin-bottom: 0px;
}

.teasercontainer img {
  margin-bottom: 20px !important;
}

.teasercontainer a {
 color: #fff;
}

.teasercontainer {
   width: 100%;
  background: #2961c1;
background: -moz-linear-gradient(-45deg, #2961c1 0%, #4f79c1 25%, #469e83 68%, #469e83 100%);
background: -webkit-linear-gradient(-45deg, #2961c1 0%,#4f79c1 25%,#469e83 68%,#469e83 100%);
background: linear-gradient(135deg, #2961c1 0%,#4f79c1 25%,#469e83 68%,#469e83 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2961c1', endColorstr='#469e83',GradientType=1 );
}

.teaser1 {
  display: inline-block;
  width: 30%;
  float: left;
  padding: 20px;
}

.teaser2 {
  display: inline-block;
   width: 30%;
  padding: 20px;
}

.teaser3 {
  display: inline-block;
   width: 30%;
  float: right;
  padding: 20px;
}

#navContainer {
 background-color: #fff;
}

.offertext1 {
  font-family: "Century Gothic", sans-serif;
  color: #fff;
font-size: 55pt !important;
  font-weight: bold;
   text-shadow: 0px 2px 12px #000000;
}

.offertext2 {
  font-family: "Century Gothic", sans-serif;
  color: #fff;
font-size: 31pt !important;
   text-shadow: 0px 2px 12px #000000;
}

.selected a { opacity:1 !important;  }

.MKVtext1 {
font-family: "Century Gothic", sans-serif;
  color: #fff;
font-size: 31pt !important;
  font-weight: bold;
}

.MKVtext2 {
font-family: '';
font-size: 24pt !important;
}

.CTAtext1 {
font-family: "Century Gothic", sans-serif;
  color: #fff;
font-size: 31pt !important;
  font-weight: bold;
  text-shadow: 0px 2px 12px #000000;
}

.CTAtext1 a {
 color: #fff;
}

.CTAtext2 {
font-family: '';
font-size: 24pt !important;
}

.HPteasers, .HPabout {
text-align: center;
}

@media (max-width: 768px) {
.phonenum {
font-size: 14pt !important;
}

.MKVtext1 {
    font-family: "Century Gothic", sans-serif;
    color: #fff;
    font-size: 17pt !important;
    font-weight: bold;
}

.teaser1 {
    display: block;
    width: 100%;
    float: none;
    padding: 20px;
}

.teaser2 {
    display: block;
    width: 100%;
    padding: 20px;
}

.teaser3 {
    display: block;
    width: 100%;
    float: none;
    padding: 20px;
}

.offertext1 {
    font-family: "Century Gothic", sans-serif;
    color: #fff;
    font-size: 40pt !important;
    font-weight: bold;
    text-shadow: 0px 2px 12px #000;
}

.offertext2 {
    font-family: "Century Gothic", sans-serif;
    color: #fff;
    font-size: 18pt !important;
    text-shadow: 0px 2px 12px #000;
}

.CTAtext1 {
    font-family: "Century Gothic", sans-serif;
    color: #fff;
    font-size: 18pt !important;
    font-weight: bold;
    text-shadow: 0px 2px 12px #000;
}

}

h1 {
font-family: "Century Gothic", sans-serif;
  font-weight: bold;
}

h2 {
font-family: "Century Gothic", sans-serif;
}

.rsp_content a {text-decoration:none; font-weight:bold;}
.rsp_content a:hover:not(.button) {text-decoration:underline;}

.section ul, .section ol {
    margin: 0 25px 0px;
}

.fullwidthStatic, .fullWidthStatic {
    -moz-transform: none;
}

#Submit-id > div > input {
     font-size: 13pt;
}

.phone table:last-child {
    margin-left: 0px;
}

body {background: #ffffff;}
.alt {background: #e2e2e2;}

/*PRIMARY COLOR*/
.primaryColor, .companyname, h1, h3, a {color: #469e83;}
.primaryColorbg {background: #469e83;}
.primaryColorbg {border-color: #469e83;}

/*PRIMARY COLOR TEXT*/

/*ACCENT COLOR*/
.accentColorbg, .accentButton {background-color: #2961c1;}

/*ACCENT COLOR TEXT*/
.accentColor, h2, h4, h5, h6, .sectionTitle, .accentColorbg, .accentButton {color: #2961c1;}

/*FOOTER*/

/*BUTTON*/
.button, a.button, .button a, .wsp_print_btn_text, #layout input.form-element[type="submit"] {
	color: #ffffff;
	background: #469e83;
	border-radius: 0px;}

.button:hover, a.button:hover, .button a:hover, .wsp_print_btn_text:hover, #layout input.form-element[type="submit"]:hover {
	background: #6bb19c;}

.buttonGhost, a.buttonGhost, .buttonGhost a {
	border-color: #469e83;
	color: #469e83;}

.buttonGhost:hover, a.buttonGhost:hover,.buttonGhost a:hover {
	background: #469e83;
	color: #ffffff;}

.buttonInverted, a.buttonInverted,.buttonInverted a {
	color: #469e83;
	background: #ffffff;}

.buttonInverted:hover, a.buttonInverted:hover, .buttonInverted a:hover {
	color: #6bb19c;
	background: #ffffff;}

.buttonGhost.buttonInverted, a.buttonInverted.buttonGhost, .buttonInverted.buttonGhost a {
	border-color: #ffffff;
	color: #ffffff;}

.buttonGhost.buttonInverted:hover, a.buttonInverted.buttonGhost:hover, .buttonInverted.buttonGhost a:hover {
	color: #469e83;
	background: #ffffff;}
/*---------------------------------*/
/*--- CENTERED NAV---*/
/*---------------------------------*/
@media only screen and (max-width:768px) {
}
/*---------------------------------*/
/*--- END CENTERED NAV ---*/
/*---------------------------------*/

/*---------------------------------*/
/*--- DESIGN PADDING AND MARGINS ---*/
/*---------------------------------*/.rsp_kv.section {padding: 20vh 0 calc(20vh - 1em)}
.rsp_content {padding: 11vh 0 calc(11vh - 1em)}
.rsp_content.lbw_teaser{padding-top:11vh;padding-bottom:calc(11vh - 1em)}
body a,body p{margin-bottom:1.5em}
p .fullWidth img,p .fullwidth img,p img.fullWidth,p img.fullwidth{margin-bottom:-1.5em}
.section.section{margin:auto;max-width:1200px}
.section .section{margin:0!important}
#layout .fullWidthColumnImage.section{margin:0;max-width:100%}
@media only screen and (min-width:961px){
.fullWidthColumnInfo{max-width:calc(600px - 4%);margin-left:10%}
.fullWidthColumnInfo[style*='float: left;']{margin-left:0;margin-right:10%}}
@media only screen and (max-width:960px){
.fullWidthColumnInfo{margin:5%}
.designtest1crx .header > .rsp_header.section.section {padding: 20px;}}
@media only screen and (max-width:1280px){
.rsp_kv.section{padding:17vh 0 calc(17vh - 1em) !important;} /* OVERIDES THE .section.section.section  */
.rsp_content{padding:11vh 0 calc(11vh - 1em)}
#layout .section,.section.section{margin:0 5%}}
#mtx_copyright{text-align:center!important}
@media only screen and (max-width: 768px) {
.section.section.section {
padding: 11vh 15px calc(11vh - 1em);}}
/*---------------------------------*/
/*--- END DESIGN PADDING AND MARGINS ---*/
/*---------------------------------*/

 ul.gallery li {
    display: inline-table;
    margin:5px 5px 5px 0px;
}
ul.gallery img {
    border: #5380CD solid 2px;

  max-width: 275px;
  box-shadow: 1px 1px 10px #333;
}
@media only screen and (min-width: 768px){
ul.gallery img:hover {
    transform: scale(1.35, 1.35);
    opacity: 1;
}
}
ul.gallery{margin:0px !important;}

/* ---------------------------------- */
/*Header and footer alignment*/
/* ---------------------------------- */
/* The exported template stacked the masthead and nav out of inline-block
   elements. Each one sat on the text baseline, so every level added a ~7px
   descender gap under its contents: under the logo, under the phone block and
   under the nav list. That padded the header out and pushed both the phone
   number and the nav labels above the centre of the space they sit in.
   Taking those boxes out of the inline flow removes the gaps and lets the
   table cells centre their contents properly. */

.rsp_header {
	padding: 14px 0;
}

.rsp_header > table > tbody > tr > td {
	vertical-align: middle;
}

#companyname,
#companyname > div,
#companyname a,
#companyname img,
#companyslogan,
#companyslogan > div {
	display: block;
}

/* The phone sits in its own table; drop the trailing half-line of margin and
   let the oversized number use a line box that matches its own size.
   Matches the specificity of .Header-EcommerceSearch div.phone, which sets it. */
.header .phone,
.Header-EcommerceSearch div.phone {
	margin-bottom: 0;
}

.header .phone table {
	display: table;
	margin: 0 0 0 auto;
}

.header .phonenum {
	display: inline-block;
	line-height: 1;
}

/* The scorecard tracking pixel is written into the page after the footer. At
   1x1 it is invisible, but as inline content it still generated a full line
   box, leaving a strip of white below the footer. */
.tracking-pixel {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ---------------------------------- */
/*Site footer*/
/* ---------------------------------- */
/* Replaces the exported template's .footercontent / .vcard markup, which was a
   single centred column built out of nested tables. Columns here are laid out
   with auto-fit so they collapse to one column on their own, without a
   breakpoint to keep in sync with anything else. */

#mtx_footer {
	background-color: #469e83;
}

.site-footer {
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3rem);
	color: #fff;
	font-size: 15px;
	line-height: 1.6;
	text-align: center;

	a {
		/* site.css puts margin-bottom: 1em on every body link */
		margin: 0;
		color: inherit;
		text-decoration: none;
		border-bottom: 1px solid transparent;
		transition: border-color 0.15s ease;

		&:hover,
		&:focus-visible {
			border-bottom-color: #fff;
		}

		&:focus-visible {
			outline: 2px solid #fff;
			outline-offset: 3px;
		}
	}

	p {
		margin: 0;
	}
}

.site-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: start;
	max-width: 960px;
	margin: 0 auto;
}

.site-footer__heading {
	margin: 0 0 0.75rem;
	color: rgb(255 255 255 / 80%);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.site-footer__name {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.site-footer__bbb {
	display: inline-block;
	margin-top: 1rem;
	border: 0;
	background: #fff;
	border-radius: 4px;
	padding: 6px;

	img {
		display: block;
		width: 62px;
		height: auto;
		margin: 0;
	}
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;

	li {
		margin: 0;
	}

	a {
		display: inline-block;
		padding: 2px 0;
	}

	/* The current page is marked in the footer too, but quietly. */
	.selected a {
		font-weight: 700;
		border-bottom-color: #fff;
	}
}

.site-footer__contact {
	address {
		font-style: normal;
	}

	a {
		border-bottom-color: rgb(255 255 255 / 40%);
		/* the email address is longer than the column on small screens */
		overflow-wrap: anywhere;
	}

	p + p {
		margin-top: 0.35rem;
	}
}

.site-footer__hours {
	margin-top: 0.75rem;
	color: rgb(255 255 255 / 80%);
	font-size: 14px;
}

/* Scoped under .site-footer so it outranks the `.site-footer p { margin: 0 }`
   reset above, which was cancelling the auto side margins and leaving this
   flush left instead of centred. */
.site-footer .site-footer__colophon {
	max-width: 960px;
	margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgb(255 255 255 / 20%);
	color: rgb(255 255 255 / 80%);
	font-size: 13px;
	text-align: center;
}

/* Side by side, each column reads better left-aligned. */
@media (width >= 700px) {
	.site-footer {
		text-align: left;
	}
}

/* ---------------------------------- */
/*Mobile navigation*/
/* ---------------------------------- */
/* Below 860px the template's horizontal nav no longer fits on one line, so it
   is swapped for a toggle and a slide-in panel. 860px is the only breakpoint
   involved; scripts/nav.js watches the same width. */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	margin: 0 auto;
	padding: 14px 18px;
	border: 0;
	background: none;
	color: #469e83;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;

	&:focus-visible {
		outline: 2px solid #469e83;
		outline-offset: -2px;
	}
}

/* Three bars drawn from one element. */
.nav-toggle__bars {
	position: relative;
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: background-color 0.2s ease;

	&::before,
	&::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: currentColor;
		transition: transform 0.2s ease;
	}

	&::before { top: -7px; }
	&::after { top: 7px; }
}

[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;

	&::before { transform: translateY(7px) rotate(45deg); }
	&::after { transform: translateY(-7px) rotate(-45deg); }
}

.site-menu {
	position: fixed;
	inset: 0;
	z-index: 1000;

	&[hidden] { display: none; }
}

.site-menu__scrim {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 45%);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.site-menu__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	width: min(320px, 85vw);
	padding: 76px 28px 32px;
	background: #fff;
	box-shadow: -8px 0 24px rgb(0 0 0 / 18%);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform 0.25s ease;
}

/* Open state. Written as plain descendant selectors rather than nested
   `.is-open &` rules, which did not match here. */
.site-menu.is-open .site-menu__scrim {
	opacity: 1;
}

.site-menu.is-open .site-menu__panel {
	transform: translateX(0);
}

.site-menu__close {
	position: absolute;
	inset-block-start: 18px;
	inset-inline-end: 18px;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: #469e83;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;

	&:focus-visible {
		outline: 2px solid #469e83;
		outline-offset: 2px;
	}
}

.site-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;

	li { margin: 0; }

	a {
		display: block;
		margin: 0;
		padding: 14px 0;
		border-bottom: 1px solid rgb(70 158 131 / 18%);
		color: #469e83;
		font-size: 16px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-decoration: none;

		&:hover,
		&:focus-visible { color: #2961c1; }
	}

	.selected a {
		font-weight: 700;
		color: #2961c1;
	}
}

.site-menu__call {
	margin: 24px 0 0;
	padding: 13px 18px;
	border-radius: 5px;
	background: #469e83;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;

	&:hover,
	&:focus-visible { background: #2961c1; }
}

body.has-open-menu {
	overflow: hidden;
}

@media (width < 860px) {
	.site-nav {
		display: none;
	}

	.nav-toggle {
		display: flex;
	}
}

@media (width >= 860px) {
	.site-menu {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-menu__scrim,
	.site-menu__panel,
	.nav-toggle__bars,
	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		transition: none;
	}
}

.site-menu__panel:focus {
	outline: none;
}

/* The nav bar sticks to the top on its own now. The template used to clone the
   whole bar into the body and slide the copy down on scroll, which left a
   second, empty bar on phones once the copied list was hidden. .box is a flex
   column, so the real bar can just be sticky. */
#navContainer {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* ---------------------------------- */
/*Desktop navigation*/
/* ---------------------------------- */
/* The exported template built this list with a remote script that wrapped
   every item in six nested divs, sized them with inline styles and pulled its
   typography from another remote stylesheet. It is a flex row now: same look,
   no third-party dependency, 42 fewer elements in the bar. */

.site-nav {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 5%;
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;

	li {
		margin: 0;
	}

	a {
		display: block;
		margin: 0 5px;
		padding: 20px 10px;
		color: #469e83;
		font-family: "Century Gothic", sans-serif;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
		opacity: 0.7;
		transition: opacity 0.15s ease-out, transform 0.15s ease-out;

		&:hover,
		&:focus-visible {
			opacity: 1;
			transform: translateY(-2px);
		}

		&:focus-visible {
			outline: 2px solid #469e83;
			outline-offset: -4px;
		}
	}

	.selected a {
		font-weight: 700;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-nav__list a {
		transition: none;
	}
}

/* ---------------------------------- */
/*Contact form*/
/* ---------------------------------- */
/* Lives here rather than in fragments/contact_form.php so the fragment is
   markup only, the same way the nav and footer were split. The form is an
   inline-size container: it is dropped into a 50% table cell on /contact and
   / and has to reflow off its own width, not the viewport's. */

.contact-form {
	container: contact-form / inline-size;
	box-sizing: border-box;
	text-align: left;

	/* Brand colours, kept local so the form can be lifted onto another page. */
	--form-accent: #469e83;
	--form-focus-ring: rgb(70 158 131 / 30%);
	--form-ink: #2f3a3d;
	--form-muted: #6b787c;
	--form-border: #d5dcde;
	--form-surface: #fff;
	--form-danger: #c0392b;
	--form-radius: 10px;

	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}
}

/* The template gives the form a white card so it reads as one object against
   both the white and the grey (.alt) sections it sits in. */
.contact-form__card {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
	padding: clamp(1.25rem, 5cqi, 2rem);
	border: 1px solid var(--form-border);
	border-radius: 16px;
	background: var(--form-surface);
	box-shadow: 0 1px 2px rgb(15 42 38 / 6%), 0 12px 28px -18px rgb(15 42 38 / 35%);
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.contact-form__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.contact-form__label,
.contact-form__legend {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--form-ink);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.contact-form__legend {
	margin-bottom: 0.4rem;
}

.contact-form__required {
	margin-inline-start: 2px;
	color: var(--form-danger);
}

.contact-form :is(input, textarea) {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--form-border);
	border-radius: var(--form-radius);
	background: var(--form-surface);
	color: var(--form-ink);
	font: inherit;
	font-size: 16px; /* anything smaller and iOS zooms the page on focus */
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;

	&::placeholder {
		color: var(--form-muted);
	}

	&:hover {
		border-color: var(--form-muted);
	}

	&:focus-visible {
		outline: none;
		border-color: var(--form-accent);
		box-shadow: 0 0 0 3px var(--form-focus-ring);
	}

	/* :user-invalid, unlike :invalid, stays quiet until the field has actually
	   been filled in or submitted, so an untouched required field is not red. */
	&:user-invalid {
		border-color: var(--form-danger);

		&:focus-visible {
			box-shadow: 0 0 0 3px rgb(192 57 43 / 25%);
		}
	}
}

.contact-form textarea {
	min-height: 8.5rem;
	resize: vertical;
}

.contact-form__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: 0.75rem 1rem;
}

.contact-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
}

.contact-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 48px;
	padding: 0.75rem 2rem;
	border: 1px solid var(--form-accent);
	border-radius: var(--form-radius);
	background: var(--form-accent);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;

	&:hover {
		background: #fff;
		color: var(--form-accent);
		transform: translateY(-1px);
		box-shadow: 0 8px 18px -12px rgb(15 42 38 / 60%);
	}

	&:active {
		transform: none;
	}

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

	&:disabled {
		cursor: progress;
		opacity: 0.75;
		transform: none;
		box-shadow: none;
		background: var(--form-accent);
		color: #fff;
	}
}

.contact-form__note {
	margin: 0;
	color: var(--form-muted);
	font-size: 13px;
	line-height: 1.4;
}

/* One element instead of the eight-div spinner the template shipped. */
.contact-form__spinner {
	display: none;
	width: 1.1em;
	height: 1.1em;
	border: 2px solid rgb(255 255 255 / 40%);
	border-top-color: #fff;
	border-radius: 50%;
	animation: contact-form-spin 0.7s linear infinite;
}

.contact-form[submitting] .contact-form__spinner {
	display: block;
}

@keyframes contact-form-spin {
	to { transform: rotate(1turn); }
}

.contact-form__output {
	display: none;
	margin: 0;
	padding: 0.85rem 1rem;
	border: 1px solid;
	border-radius: var(--form-radius);
	font-size: 15px;
	line-height: 1.45;

	&[show] {
		display: block;
	}

	&[show="success"] {
		border-color: var(--form-accent);
		background: rgb(70 158 131 / 10%);
		color: #2c6354;
	}

	&[show="error"] {
		border-color: var(--form-danger);
		background: rgb(192 57 43 / 8%);
		color: #8c2a20;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-form :is(input, textarea, .contact-form__submit) {
		transition: none;
	}

	.contact-form__submit:hover {
		transform: none;
	}

	.contact-form__spinner {
		animation-duration: 2.4s;
	}
}