/* ==========================================================================
   MarineWrap.ca — Modern refresh layer  (v1.0, 2026)
   Additive stylesheet. Load AFTER main.css / mainform.css.
   Refines the existing HTML5UP layout: deeper marine palette, generous
   rounding, soft layered shadows, smoother micro-interactions.
   Nothing here changes page structure or markup behaviour.
   ========================================================================== */

:root {
	/* Brand + marine palette */
	--mw-brand:        #ed4933;   /* signal orange (existing) */
	--mw-brand-2:      #ff6a4d;   /* lighter orange for gradients / hover */
	--mw-brand-deep:   #c9331f;   /* pressed */
	--mw-teal:         #21b2a6;   /* secondary marine accent (existing .second) */
	--mw-ink:          #1b2027;   /* deep marine charcoal */
	--mw-ink-2:        #232a33;   /* panel */
	--mw-surface:      #2b333d;   /* raised surface */
	--mw-surface-2:    #333c47;   /* hover surface */
	--mw-foam:         #f5f7f9;   /* near-white */
	--mw-line:         rgba(255,255,255,0.09);
	--mw-line-strong:  rgba(255,255,255,0.16);

	/* Radii */
	--mw-r-sm: 12px;
	--mw-r:    18px;
	--mw-r-lg: 24px;
	--mw-r-xl: 30px;

	/* Shadows — soft + layered */
	--mw-shadow-1: 0 2px 6px rgba(6,12,20,0.18);
	--mw-shadow-2: 0 12px 30px rgba(6,12,20,0.28);
	--mw-shadow-3: 0 26px 60px rgba(6,12,20,0.40);
	--mw-glow:     0 12px 26px rgba(237,73,51,0.34);

	/* Motion */
	--mw-ease: cubic-bezier(.2,.7,.2,1);
}

/* --------------------------------------------------------------------------
   BUTTONS — keep the pill shape, add depth + a proper focus ring
   main.css already sets border-radius:999px; we enhance fill + interaction.
   -------------------------------------------------------------------------- */
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
	background-image: linear-gradient(135deg, var(--mw-brand-2) 0%, var(--mw-brand) 55%, var(--mw-brand-deep) 100%) !important;
	background-color: var(--mw-brand) !important;
	box-shadow: var(--mw-glow), inset 0 1px 0 rgba(255,255,255,0.18) !important;
	letter-spacing: 0.18em;
}
input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
	box-shadow: 0 18px 34px rgba(237,73,51,0.42), inset 0 1px 0 rgba(255,255,255,0.22) !important;
	transform: translateY(-2px) !important;
	filter: saturate(1.05);
}
input[type="submit"].primary:active,
input[type="reset"].primary:active,
input[type="button"].primary:active,
button.primary:active,
.button.primary:active {
	transform: translateY(0) !important;
}

/* Ghost buttons (the outlined ones over the video banner) — modernise */
.button {
	letter-spacing: 0.18em;
	backdrop-filter: saturate(1.1) blur(2px);
	-webkit-backdrop-filter: saturate(1.1) blur(2px);
}

/* Secondary marine-teal button */
.button.second {
	background-image: linear-gradient(135deg, #2ad0c2 0%, var(--mw-teal) 60%, #16897f 100%) !important;
	box-shadow: 0 12px 26px rgba(33,178,166,0.30), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.button.second:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 18px 34px rgba(33,178,166,0.38), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* Keyboard focus — visible on every interactive control */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid rgba(255,150,120,0.85);
	outline-offset: 3px;
	border-radius: 8px;
}

/* --------------------------------------------------------------------------
   BANNER — richer overlay so the headline + buttons read cleanly on video
   -------------------------------------------------------------------------- */
#banner:after {
	background-image:
		linear-gradient(180deg, rgba(20,26,33,0.35) 0%, rgba(20,26,33,0.15) 40%, rgba(20,26,33,0.70) 100%) !important;
}
#banner .inner h2 {
	letter-spacing: -0.02em;
	text-shadow: 0 6px 30px rgba(0,0,0,0.45);
}

/* Sticky, glassy header treatment */
#header {
	backdrop-filter: saturate(1.2) blur(10px);
	-webkit-backdrop-filter: saturate(1.2) blur(10px);
	border-bottom: 1px solid var(--mw-line);
}
#header.alt {
	background: linear-gradient(180deg, rgba(20,26,33,0.55), rgba(20,26,33,0) );
}

/* Nav toggle → tidy rounded control */
#nav ul li.special > a.menuToggle {
	border-radius: 999px;
}

/* --------------------------------------------------------------------------
   SPOTLIGHT IMAGES / SLIDERS — rounded frames + soft shadow + gentle zoom
   -------------------------------------------------------------------------- */
.spotlight .image.image-scroll {
	border-radius: var(--mw-r-lg);
	overflow: hidden;
	box-shadow: var(--mw-shadow-2);
}
.spotlight .image.image-scroll img {
	transition: transform 0.6s var(--mw-ease);
}
.spotlight .image.image-scroll:hover img.active {
	transform: scale(1.035);
}

/* Slider arrows — modern circular glass buttons.
   Selector matches main.css specificity (loaded after → wins cleanly). */
.spotlight .image.image-scroll .slider-btn {
	background: rgba(20,26,33,0.55);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 999px;
	width: 44px; height: 44px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.25rem; line-height: 1;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: var(--mw-shadow-1);
	transition: background 0.2s var(--mw-ease), transform 0.2s var(--mw-ease), border-color 0.2s var(--mw-ease);
	cursor: pointer;
}
.spotlight .image.image-scroll .slider-btn.prev { left: 0.6em; }
.spotlight .image.image-scroll .slider-btn.next { right: 0.6em; }
.spotlight .image.image-scroll .slider-btn:hover {
	background: var(--mw-brand);
	border-color: var(--mw-brand);
	transform: translateY(-50%) scale(1.08);
}

/* --------------------------------------------------------------------------
   PRODUCT CARDS on the home page ("Buy Shrink Wrap Products")
   -------------------------------------------------------------------------- */
#cta + div .box,
.box {
	border-radius: var(--mw-r) !important;
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--mw-line);
	box-shadow: var(--mw-shadow-1);
	overflow: hidden;
	transition: transform 0.25s var(--mw-ease), box-shadow 0.25s var(--mw-ease), border-color 0.25s var(--mw-ease);
	padding-bottom: 0.75em;
}
.box:hover {
	transform: translateY(-4px);
	box-shadow: var(--mw-shadow-2);
	border-color: var(--mw-line-strong);
}
.box img {
	border-top-left-radius: var(--mw-r);
	border-top-right-radius: var(--mw-r);
}

/* --------------------------------------------------------------------------
   HEADINGS — slightly tighter, more contemporary
   -------------------------------------------------------------------------- */
h1, h2, h3 { letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   HOME INSTANT-QUOTE FORM  (rebuilt as .mw-quickquote card in index.php)
   -------------------------------------------------------------------------- */
.mw-quickquote {
	max-width: 560px;
	margin: 0 auto;
	text-align: left;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--mw-line);
	border-radius: var(--mw-r-lg);
	box-shadow: var(--mw-shadow-2);
	padding: 26px 26px 30px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.mw-quickquote .mw-field { margin-bottom: 16px; }
.mw-quickquote .mw-field:last-of-type { margin-bottom: 22px; }
.mw-quickquote label.mw-lbl {
	display: block;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.72);
	margin: 0 0 7px 2px;
}
.mw-quickquote input[type="text"],
.mw-quickquote select {
	width: 100%;
	height: 3.25em;
	line-height: normal;
	background: rgba(10,14,19,0.55) !important;
	border: 1px solid var(--mw-line-strong) !important;
	border-radius: var(--mw-r-sm) !important;
	color: #fff !important;
	padding: 0 1em !important;
	font-size: 1em;
	box-shadow: none !important;
	transition: border-color 0.2s var(--mw-ease), box-shadow 0.2s var(--mw-ease), background 0.2s var(--mw-ease);
}
.mw-quickquote select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23ffb199' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 1.1em center !important;
	padding-right: 2.6em !important;
}
.mw-quickquote input[type="text"]:focus,
.mw-quickquote select:focus {
	border-color: var(--mw-brand) !important;
	box-shadow: 0 0 0 3px rgba(237,73,51,0.28) !important;
	background: rgba(10,14,19,0.7) !important;
	outline: none;
}
.mw-quickquote input::placeholder { color: rgba(255,255,255,0.4); }
.mw-quickquote .mw-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media screen and (max-width: 480px) {
	.mw-quickquote .mw-two { grid-template-columns: 1fr; gap: 0; }
	.mw-quickquote .mw-two .mw-field { margin-bottom: 16px; }
}

/* --------------------------------------------------------------------------
   MISC — contact + social sections get a touch more air
   -------------------------------------------------------------------------- */
.spotlight .content h2 { letter-spacing: -0.015em; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}
.spotlight .image.image-scroll {
    padding: 0;
    margin: 5px;
    border-radius: 18px;
}
.spotlight .image.image-scroll img {
    border-radius: 0;
}
.spotlight .image.image-scroll:hover img.active {
    transform: none;
}
/* Wide screens: bring the spotlight photos in off the window edges */
@media screen and (min-width: 981px) {
  .spotlight .image.image-scroll               { margin-left: 4em; margin-right: 5px; }
  .spotlight:nth-child(2n) .image.image-scroll { margin-left: 5px; margin-right: 4em; }
}