/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

@media (min-width: 768px) {
	.preconstruction-hero {
		height: calc(100vh - 52px);
	}
}

/* Color picker styling */
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: 2px solid #cbd5e1;
  border-radius: 9999px;
  transition: border-color 150ms;
}

input[type="color"]:hover::-webkit-color-swatch {
  border-color: #94a3b8;
}

input[type="color"] {
  width: 100%;
  height: 100%;
}

.folio-cloudy-card {
	border-radius: 1rem;
	padding: 1rem 1.5rem;
	background-color: var(--folio-surface-base);
	background-color: color-mix(in srgb, var(--folio-surface-base) 80%, transparent);
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
}

.folio-halfwidth-image-shadow {
	box-shadow: 0 10px 5px rgba(15, 23, 42, 0.9);
}

.folio-primary-border {
	/* Falls back to a subtle slate-like border if the CSS variable is missing */
	border-color: rgba(148, 163, 184, 0.2);
	border-color: color-mix(in srgb, var(--folio-text-base) 25%, transparent);
}

.folio-primary-divider > li + li {
	border-top: 1px solid rgba(148, 163, 184, 0.2);
	border-top-color: color-mix(in srgb, var(--folio-text-base) 15%, transparent);
}

.hover-underline {
	text-decoration: none;
	text-underline-offset: 4px;
}

.hover-underline:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.folio-theme {
	color: var(--folio-text-base);
	background-color: var(--folio-surface-base);
	font-family: var(--folio-font-body);
	--folio-header-height: 64px;
}


.folio-surface-base {
	background-color: var(--folio-surface-base);
}

.folio-surface-filled {
	background-color: var(--folio-surface-contrast);
}

.folio-surface-elevated {
	background-color: var(--folio-surface-elevated);
}

.folio-section.folio-surface-elevated:not(.folio-section-card) {
	box-shadow: var(--folio-shadow-card);
}

.folio-surface-contrast {
	background-color: var(--folio-surface-contrast);
}

.folio-surface-muted {
	background-color: var(--folio-surface-muted);
}

.folio-surface-transparent {
	background-color: transparent;
}

.folio-border-subtle {
	border-color: var(--folio-border-subtle);
}

.folio-header {
	background-color: var(--folio-surface-elevated);
	border-bottom: 1px solid var(--folio-border-subtle);
}

.folio-mobile-panel {
	background-color: var(--folio-surface-base);
	border-left: 1px solid var(--folio-border-subtle);
}

.folio-icon-button {
	border-color: var(--folio-border-subtle);
	color: var(--folio-text-base);
}

.folio-nav-link {
	color: var(--folio-text-base);
	transition: color 150ms ease;
}

.folio-nav-link:hover {
	color: var(--folio-text-base);
}

.folio-nav-link--active {
	color: var(--folio-accent-color);
}

.folio-nav-link--active:hover {
	color: var(--folio-accent-hover);
}

.folio-section {
	padding: var(--folio-space-6);
}

.folio-section--standard {
	padding: var(--folio-space-6);
}

.folio-section--compact {
	padding: var(--folio-space-4);
}

.folio-section--roomy {
	padding: var(--folio-space-8);
}

.folio-section--flush {
	padding: 0;
}

.folio-section--divider {
	border-top: 1px solid var(--folio-border-subtle);
}

.folio-section-card {
	border-radius: var(--folio-radius-lg);
	background-color: var(--folio-surface-elevated);
	border-style: solid;
	border-color: var(--folio-border-subtle);
	border-width: 0;
	box-shadow: none;
}

.folio-section-card.folio-surface-base {
	background-color: var(--folio-surface-base);
}

.folio-section-card.folio-surface-elevated {
	background-color: var(--folio-surface-elevated);
}

.folio-section-card.folio-surface-contrast {
	background-color: var(--folio-surface-contrast);
}

.folio-section-card.folio-surface-muted {
	background-color: var(--folio-surface-muted);
}

.folio-section-card.folio-surface-filled {
	background-color: var(--folio-surface-contrast);
}

.folio-section-card.folio-surface-transparent {
	background-color: transparent;
}

.folio-section-card.folio-section--divider {
	box-shadow: 0 -1px 0 var(--folio-border-subtle) inset, var(--folio-shadow-card);
}

.folio-section-card--bordered {
	border-style: solid;
	border-color: var(--folio-border-subtle);
}

.folio-section-card--border-0 {
	border-width: 0;
}

.folio-section-card--border-1 {
	border-width: 1px;
}

.folio-section-card--border-2 {
	border-width: 2px;
}

.folio-section-card--border-3 {
	border-width: 3px;
}

.folio-section-card--elevation-low {
	box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.35);
}

.folio-section-card--elevation-medium {
	box-shadow: var(--folio-shadow-card);
}

.folio-section-card--elevation-high {
	box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.45);
}

.folio-section-card--flat {
	box-shadow: none;
}

.folio-section-card--padded {
	padding: var(--folio-space-6);
}

.folio-radius-square {
	border-radius: 0;
}

.folio-radius-minimal {
	border-radius: var(--folio-radius-sm);
}

.folio-radius-soft {
	border-radius: var(--folio-radius-md);
}

.folio-radius-rounded {
	border-radius: var(--folio-radius-lg);
}

.folio-section-card--flat {
	box-shadow: none;
}

.folio-section-card--media {
	padding: 0;
	overflow: hidden;
}

.folio-section-pad {
	padding: var(--folio-space-7);
}

.folio-hero-card {
	background-color: color-mix(in srgb, var(--folio-surface-elevated) 86%, transparent);
	border-radius: var(--folio-radius-lg);
	padding: var(--folio-space-7) var(--folio-space-8);
	box-shadow: var(--folio-shadow-elevated);
	border: 1px solid var(--folio-border-subtle);
}

.folio-heading {
	color: var(--folio-text-base);
	font-family: var(--folio-font-heading);
	font-weight: 600;
	font-size: var(--folio-title-font-size);
}

.folio-body {
	color: var(--folio-text-muted);
	max-width: 65ch;
	font-size: var(--folio-body-font-size);
}

.folio-cta {
	background-color: var(--folio-accent-color);
	color: var(--folio-accent-text);
	border-radius: var(--folio-radius-pill);
	padding: var(--folio-space-3) var(--folio-space-6);
	box-shadow: var(--folio-shadow-button);
	text-transform: none;
	letter-spacing: 0.02em;
	border: 1px solid transparent;
}

.folio-cta:hover {
	background-color: var(--folio-accent-hover);
}

.folio-theme[data-button-style="outline"] .folio-cta {
	background-color: transparent;
	color: var(--folio-accent-color);
	border-color: var(--folio-accent-color);
	box-shadow: none;
}

.folio-theme[data-button-style="outline"] .folio-cta:hover {
	background-color: color-mix(in srgb, var(--folio-accent-color) 14%, transparent);
}

.folio-theme[data-button-style="ghost"] .folio-cta {
	background-color: transparent;
	color: var(--folio-accent-color);
	border-color: transparent;
	box-shadow: none;
}

.folio-theme[data-button-style="ghost"] .folio-cta:hover {
	background-color: color-mix(in srgb, var(--folio-accent-color) 12%, transparent);
}

.folio-theme[data-folio-theme="luxurious"] .folio-heading {
	font-weight: 700;
	letter-spacing: 0.04em;
}

.folio-theme[data-folio-theme="minimalist"] .folio-section-card {
	box-shadow: none;
}

.folio-input,
.folio-select {
	background-color: var(--folio-surface-muted);
	border-color: var(--folio-border-subtle);
	color: var(--folio-text-base);
	border-radius: var(--folio-radius-md);
}

.folio-input::placeholder {
	color: var(--folio-text-subtle);
}

.folio-divider {
	border-color: var(--folio-accent-divider);
}

.folio-radius-md {
	border-radius: var(--folio-radius-md);
}

.folio-radius-lg {
	border-radius: var(--folio-radius-lg);
}

.folio-list-item {
	background-color: transparent;
	transition: background-color 150ms ease, transform 150ms ease;
}

.folio-list-item:hover {
	background-color: var(--folio-surface-muted);
	transform: translateY(-2px);
}

.folio-list-item.is-active {
	background-color: var(--folio-surface-muted);
}

.folio-hero-overlay {
	background-color: transparent;
}

.folio-image-overlay {
	background-color: transparent;
}

.folio-dashboard-main {
	padding-left: 10rem;
	padding-right: 10rem;
}

body.section-settings-modal-open {
	overflow: hidden;
}

@media (max-width: 1700px) {
	.folio-dashboard-main {
		padding-left: 5rem;
		padding-right: 5rem;
	}
}

@media (max-width: 1550px) {
	.folio-dashboard-main {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media (max-width: 1430px) {
	.folio-dashboard-main {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}
@media (max-width: 1350px) {
	.folio-dashboard-main {
		padding-left: 0;
		padding-right: 0;
	}
}