/* ==========================================================================
   Landing Page Overrides
   --------------------------------------------------------------------------
   Fixes CSS conflicts between the velementww parent theme (Bootstrap 3 +
   custom CSS) and the landing page theme stylesheets.
   
   Key issues resolved:
   1.  Bootstrap 3 sets html { font-size: 10px } — landing CSS uses rem,
       so every rem-based value was 37.5 % smaller than intended.
   2.  Bootstrap .container sets fixed widths (max 1170 px) — landing pages
       expect max-width: 1400 px.
   3.  Bootstrap .btn, .form-*, body typography leak into landing layout.
   4.  Velementww css/style.css adds global transitions and text-decoration
       overrides that conflict with landing hover states.
   ========================================================================== */

/* --- 1. Root font-size reset -------------------------------------------- */
/* rem units throughout the landing CSS are authored for the browser default
   16 px root.  Bootstrap 3 overrides html to 10 px.  Restore it.          */
html {
	font-size: 16px !important;
}

/* --- 2. Body resets for landing pages ----------------------------------- */
.landing-interior,
.landing-exterior,
.landing-architectural {
	font-size: 16px;
	line-height: 1.6;
	color: #141414;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --- 3. Bootstrap .container override ----------------------------------- */
/* Bootstrap forces width: 1170px etc. via media queries.  Landing pages
   need a fluid container capped at 1400 px.                               */
.landing-interior .container,
.landing-exterior .container,
.landing-architectural .container {
	width: 100% !important;
	max-width: 1400px !important;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* --- 4. Bootstrap .btn full reset --------------------------------------- */
/* Bootstrap .btn: display:inline-block, padding:6px 12px, font-size:14px,
   font-weight:normal, line-height:1.428, border-radius:4px, border:1px solid
   transparent, background-image:none, text-shadow, box-shadow on :active.
   Landing CSS needs completely different values.                           */
.landing-interior .btn,
.landing-exterior .btn,
.landing-architectural .btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: inherit !important;
	line-height: 1 !important;
	border: none !important;
	border-radius: var(--radius) !important;
	cursor: pointer !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	padding: 0 !important;
	margin-bottom: 0 !important;
	background-image: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	vertical-align: baseline !important;
	-webkit-user-select: auto !important;
	-moz-user-select: auto !important;
	-ms-user-select: auto !important;
	user-select: auto !important;
	touch-action: auto !important;
	-webkit-transition: all 0.25s ease !important;
	-moz-transition: all 0.25s ease !important;
	transition: all 0.25s ease !important;
}

/* Hero buttons – explicit padding / size */
.landing-interior .btn-hero,
.landing-exterior .btn-hero,
.landing-architectural .btn-hero {
	background: var(--gradient-amber) !important;
	color: var(--color-primary-foreground) !important;
	padding: 1rem 2.5rem !important;
	font-size: 1.05rem !important;
	box-shadow: 0 4px 20px rgba(255, 180, 0, 0.3) !important;
}
.landing-interior .btn-hero:hover,
.landing-exterior .btn-hero:hover,
.landing-architectural .btn-hero:hover,
.landing-interior .btn-hero:focus,
.landing-exterior .btn-hero:focus,
.landing-architectural .btn-hero:focus {
	color: var(--color-primary-foreground) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(255, 180, 0, 0.4) !important;
	background: var(--gradient-amber) !important;
	outline: none !important;
}

/* Hero outline button */
.landing-interior .btn-hero-outline,
.landing-exterior .btn-hero-outline,
.landing-architectural .btn-hero-outline {
	background: transparent !important;
	color: var(--color-hero-foreground) !important;
	padding: 1rem 2.5rem !important;
	font-size: 1.05rem !important;
	border: 2px solid rgba(255, 255, 255, 0.3) !important;
}
.landing-interior .btn-hero-outline:hover,
.landing-exterior .btn-hero-outline:hover,
.landing-architectural .btn-hero-outline:hover,
.landing-interior .btn-hero-outline:focus,
.landing-exterior .btn-hero-outline:focus,
.landing-architectural .btn-hero-outline:focus {
	border-color: var(--color-primary) !important;
	color: var(--color-primary) !important;
	background: transparent !important;
	outline: none !important;
}

/* Full-width button */
.landing-interior .btn-full,
.landing-exterior .btn-full,
.landing-architectural .btn-full {
	width: 100% !important;
}

/* Submit / CTA buttons inside contact sections */
.landing-interior .contact button[type="submit"],
.landing-exterior .contact button[type="submit"],
.landing-architectural .contact button[type="submit"],
.landing-interior .contact .btn,
.landing-exterior .contact .btn,
.landing-architectural .contact .btn {
	padding: 1rem 2.5rem !important;
	font-size: 1.05rem !important;
	background: var(--gradient-amber) !important;
	color: var(--color-primary-foreground) !important;
	border: none !important;
	border-radius: var(--radius) !important;
	box-shadow: 0 4px 20px rgba(255, 180, 0, 0.3) !important;
}

/* Active / focus states — kill Bootstrap's inset shadow */
.landing-interior .btn:active,
.landing-exterior .btn:active,
.landing-architectural .btn:active,
.landing-interior .btn:active:focus,
.landing-exterior .btn:active:focus,
.landing-architectural .btn:active:focus {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	outline: none !important;
}

/* --- 5. Form element full reset ----------------------------------------- */
/* Bootstrap's normalize sets input/select/textarea base styles and
   .form-control adds height:34px, padding:6px 12px, font-size:14px,
   border:1px solid #ccc, border-radius:4px, box-shadow, and specific colors.
   Landing pages use .form-input / .form-select / .form-textarea classes.  */
.landing-interior .form-input,
.landing-exterior .form-input,
.landing-architectural .form-input,
.landing-interior .form-select,
.landing-exterior .form-select,
.landing-architectural .form-select,
.landing-interior .form-textarea,
.landing-exterior .form-textarea,
.landing-architectural .form-textarea {
	display: block !important;
	width: 100% !important;
	height: 3rem !important;
	padding: 0 1rem !important;
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: var(--radius) !important;
	color: var(--color-hero-foreground) !important;
	font-size: 0.95rem !important;
	font-family: var(--font-sans) !important;
	line-height: 1.6 !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	-webkit-transition: border-color 0.2s !important;
	-moz-transition: border-color 0.2s !important;
	transition: border-color 0.2s !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	outline: none !important;
	background-image: none;
}

/* Textarea overrides */
.landing-interior .form-textarea,
.landing-exterior .form-textarea,
.landing-architectural .form-textarea {
	height: auto !important;
	min-height: 120px !important;
	padding: 0.75rem 1rem !important;
	resize: none !important;
}

/* Select dropdown arrow */
.landing-interior .form-select,
.landing-exterior .form-select,
.landing-architectural .form-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ffffff80' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	padding-right: 2.5rem !important;
}

/* Select options */
.landing-interior .form-select option,
.landing-exterior .form-select option,
.landing-architectural .form-select option {
	background: #1a1a1a !important;
	color: #fff !important;
}

/* Focus states */
.landing-interior .form-input:focus,
.landing-exterior .form-input:focus,
.landing-architectural .form-input:focus,
.landing-interior .form-select:focus,
.landing-exterior .form-select:focus,
.landing-architectural .form-select:focus,
.landing-interior .form-textarea:focus,
.landing-exterior .form-textarea:focus,
.landing-architectural .form-textarea:focus {
	border-color: var(--color-primary) !important;
	outline: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

/* Placeholder colors */
.landing-interior .form-input::placeholder,
.landing-exterior .form-input::placeholder,
.landing-architectural .form-input::placeholder,
.landing-interior .form-textarea::placeholder,
.landing-exterior .form-textarea::placeholder,
.landing-architectural .form-textarea::placeholder {
	color: rgba(255, 255, 255, 0.4) !important;
}

/* File input */
.landing-interior .form-file,
.landing-exterior .form-file,
.landing-architectural .form-file {
	width: 100% !important;
	font-size: 0.875rem !important;
	color: rgba(255, 255, 255, 0.6) !important;
	height: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.landing-interior .form-file::file-selector-button,
.landing-exterior .form-file::file-selector-button,
.landing-architectural .form-file::file-selector-button {
	margin-right: 0.75rem;
	padding: 0.5rem 1rem !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 4px !important;
	background: rgba(255, 255, 255, 0.05) !important;
	color: var(--color-hero-foreground) !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	cursor: pointer !important;
}

.landing-interior .form-file::file-selector-button:hover,
.landing-exterior .form-file::file-selector-button:hover,
.landing-architectural .form-file::file-selector-button:hover {
	background: rgba(255, 255, 255, 0.1) !important;
}

/* Form hint / footer note */
.landing-interior .form-hint,
.landing-exterior .form-hint,
.landing-architectural .form-hint {
	font-size: 0.75rem !important;
	color: rgba(255, 255, 255, 0.4) !important;
}

.landing-interior .form-footer-note,
.landing-exterior .form-footer-note,
.landing-architectural .form-footer-note {
	font-size: 0.75rem !important;
	color: rgba(255, 255, 255, 0.5) !important;
	text-align: center !important;
}

/* Form grid layout */
.landing-interior .form-grid,
.landing-exterior .form-grid,
.landing-architectural .form-grid {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 1.25rem !important;
}

@media (min-width: 768px) {
	.landing-interior .form-grid-2,
	.landing-exterior .form-grid-2,
	.landing-architectural .form-grid-2 {
		grid-template-columns: 1fr 1fr !important;
	}
}

/* --- 6. Disable velementww global transitions on landing elements -------- */
/* css/style.css applies transition: all .3s to h1-h6, p, ul, li, span, etc.
   This can interfere with landing scroll animations and layout shifts.     */
.landing-interior h1,
.landing-interior h2,
.landing-interior h3,
.landing-interior h4,
.landing-interior h5,
.landing-interior h6,
.landing-interior p,
.landing-interior ul,
.landing-interior li,
.landing-interior span,
.landing-interior i,
.landing-interior a,
.landing-exterior h1,
.landing-exterior h2,
.landing-exterior h3,
.landing-exterior h4,
.landing-exterior h5,
.landing-exterior h6,
.landing-exterior p,
.landing-exterior ul,
.landing-exterior li,
.landing-exterior span,
.landing-exterior i,
.landing-exterior a,
.landing-architectural h1,
.landing-architectural h2,
.landing-architectural h3,
.landing-architectural h4,
.landing-architectural h5,
.landing-architectural h6,
.landing-architectural p,
.landing-architectural ul,
.landing-architectural li,
.landing-architectural span,
.landing-architectural i,
.landing-architectural a {
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}

/* Re-enable intentional transitions (landing CSS defines these itself) */
.landing-interior a:hover,
.landing-exterior a:hover,
.landing-architectural a:hover {
	text-decoration: none;
}

/* --- 7. Override velementww's a { text-decoration: none!important } ------ */
.landing-interior a,
.landing-exterior a,
.landing-architectural a {
	text-decoration: none !important;
}

/* --- 8. Ensure full-width sections -------------------------------------- */
.landing-interior,
.landing-exterior,
.landing-architectural {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}

/* Sections must span viewport width */
.landing-interior section,
.landing-exterior section,
.landing-architectural section {
	width: 100%;
	max-width: 100%;
}

/* --- 9. Reset Bootstrap base typography that leaks in ------------------- */
.landing-interior,
.landing-exterior,
.landing-architectural {
	font-family: var(--font-sans);
}

.landing-interior h1,
.landing-interior h2,
.landing-interior h3,
.landing-interior h4,
.landing-exterior h1,
.landing-exterior h2,
.landing-exterior h3,
.landing-exterior h4,
.landing-architectural h1,
.landing-architectural h2,
.landing-architectural h3,
.landing-architectural h4 {
	font-family: var(--font-display);
	margin-top: 0;
	margin-bottom: 0;
}

/* --- 10. Reset list styles Bootstrap/normalize strip -------------------- */
.landing-interior ul,
.landing-interior ol,
.landing-exterior ul,
.landing-exterior ol,
.landing-architectural ul,
.landing-architectural ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- 11. Image reset ---------------------------------------------------- */
.landing-interior img,
.landing-exterior img,
.landing-architectural img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
}

/* --- 12. Fix orphaned .site-content close in footer --------------------- */
/* No DOM fix needed — browsers silently discard stray </div>.
   But ensure footer sits flush.                                            */
#ssb-container,
.mega-menu-item-19,
.mega-menu-item-18,
.mega-menu-item-16 {
	display: none !important;
}