/* Dropdown Sentence Builder — frontend styles */

/* Poppins & Roboto Condensed are loaded independently via
   wp_enqueue_style() in class-dsb-shortcode.php (dsb-google-fonts),
   covering every weight (400–800) the Appearance tab offers — this
   plugin no longer relies on the active theme's font settings, since
   Astra (or any theme) may not have every weight enabled. */

/* The full-bleed sentence section below uses 100vw to break out of the
   theme's content container. 100vw can be a hair wider than the
   visible viewport when a vertical scrollbar is present, which would
   otherwise introduce an unwanted horizontal scrollbar on pages using
   this shortcode. This rule only loads on those pages (the stylesheet
   is enqueued per-shortcode), so the scope is safe. */
html {
	overflow-x: hidden;
}

.dsb-wrap {
	--dsb-text: #2b2b28;
	--dsb-accent: #6b9c6b;
	--dsb-accent-dark: #588058;
	--dsb-blue-dark: #1c6fb0;
	--dsb-blue-light: #3badea;
	--dsb-border: #e2e2e2;
	--dsb-muted: #6b6b6b;

	--dsb-brand-blue: #02346d;
	--dsb-brand-blue-light: #93cdff;
	--dsb-card-bg: #e8f0f4;

	--dsb-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--dsb-font-body: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px 48px;
	font-family: var(--dsb-font-body);
	color: var(--dsb-text);
}

/* ---------- Sentence section ---------- */

/* Breaks out of the theme's content container to span the full
   browser width while the text inside stays capped at 1000px, per
   the design reference. */
.dsb-sentence-bleed {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	background: var(--dsb-brand-blue);
}

.dsb-sentence {
	max-width: 1000px;
	margin: 0 auto;
}

.dsb-sentence-inner {
	text-align: center;
	transition: padding 0.3s ease;
	padding: 50px;
	font-family: var(--dsb-font-body);
}

.dsb-intro-text {
	margin: 0 0 18px;
	font-family: var(--dsb-font-body);
	font-weight: 400;
	font-size: 1rem;
	color: #ffffff;
}

.dsb-sentence-line {
	font-size: 1.9rem;
	font-weight: 400;
	line-height: 2;
	display: inline;
	color: var(--dsb-brand-blue-light);
}

.dsb-line-break {
	display: block;
	content: "";
	height: 2px;
}

.dsb-select-wrap {
	position: relative;
	display: inline-block;
	vertical-align: baseline;
	margin: 0 6px;
}

.dsb-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	color-scheme: dark;
	background-color: rgba(255, 255, 255, 0.16);
	border: none;
	border-radius: 6px;
	box-sizing: border-box;
	font: inherit;
	font-family: var(--dsb-font-body);
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
	padding: 0 50px;
	margin: 0;
	width: auto;
	vertical-align: baseline;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.dsb-select-wrap .dsb-select {
	margin: 0;
}

.dsb-select-arrow {
	position: absolute;
	top: 50%;
	right: 16px;
	width: 18px;
	height: 12px;
	transform: translateY(-50%);
	pointer-events: none;
}

.dsb-select-arrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dsb-select-arrow polygon {
	fill: #ffffff;
}

@keyframes dsb-arrow-bounce {
	0%, 100% {
		transform: translateY(-50%);
	}
	50% {
		transform: translateY(calc(-50% - 8px));
	}
}

.dsb-select-arrow.dsb-bounce {
	animation: dsb-arrow-bounce 0.6s ease-in-out infinite;
}

.dsb-wrap.dsb-is-shrunk .dsb-select-arrow {
	display: none;
}

.dsb-select:hover {
	background-color: rgba(255, 255, 255, 0.24);
}

.dsb-select:focus {
	background-color: rgba(255, 255, 255, 0.24) !important;
	color: #ffffff !important;
	outline: none;
}

/* Best-effort styling of the native options list. Support for
   coloring the open dropdown list varies by browser/OS — Windows
   Chrome/Edge/Firefox honor this, macOS Safari largely ignores it and
   falls back to the system picker. */
.dsb-select option {
	font-family: var(--dsb-font-body);
	background-color: var(--dsb-brand-blue);
	color: #ffffff;
}

.dsb-go-button-row {
	text-align: center;
}

.dsb-go-button {
	display: block;
	width: 250px;
	margin: 30px auto 0;
	background-color: #ffffff !important;
	background-image: none !important;
	color: var(--dsb-brand-blue) !important;
	border: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	border-radius: 6px;
	font-family: var(--dsb-font-body);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 14px 0;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.dsb-go-button:hover,
.dsb-go-button:focus {
	background-color: #eef1f5 !important;
	color: var(--dsb-brand-blue) !important;
}

.dsb-go-button:active {
	transform: translateY(1px);
}

.dsb-go-button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.dsb-go-button:disabled:hover {
	background-color: #ffffff !important;
}

/* Placeholder option ("Choose", etc.) reads slightly dimmer than real
   choices, both in the closed pill and the open list. */
.dsb-select option[value=""] {
	color: rgba(255, 255, 255, 0.7);
}

/* Shrunk state after a successful GO — everything stays on one line
   with the GO button positioned just to the right so a visitor can
   quickly change a selection and re-run the sentence. Font sizes are
   trimmed enough that this fits on one line without a scrollbar on
   typical screen widths; only very narrow (mobile) viewports wrap. */

.dsb-wrap.dsb-is-shrunk .dsb-sentence-inner {
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 12px;
}

.dsb-wrap.dsb-is-shrunk .dsb-intro-text {
	display: none;
}

.dsb-wrap.dsb-is-shrunk .dsb-sentence-line {
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	flex: 0 0 auto;
}

.dsb-wrap.dsb-is-shrunk .dsb-select {
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.3;
	color-scheme: dark;
	background-color: var(--dsb-brand-blue);
	border-bottom: none;
	padding: 1px 18px 8px 2px;
	margin: 0 2px;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 L7 7.5 L13 1.5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
		linear-gradient(#ffffff, #ffffff);
	background-repeat: no-repeat, no-repeat;
	background-position: right 3px center, left bottom 7px;
	background-size: 11px 7px, 100% 2px;
}

.dsb-wrap.dsb-is-shrunk .dsb-select:focus {
	background-color: var(--dsb-brand-blue) !important;
	color: #ffffff !important;
}

.dsb-wrap.dsb-is-shrunk .dsb-line-break {
	display: none;
}

.dsb-wrap.dsb-is-shrunk .dsb-go-button-row {
	display: contents;
}

.dsb-wrap.dsb-is-shrunk .dsb-go-button {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 7px 24px;
	font-size: 0.85rem;
	flex: 0 0 auto;
}

/* ---------- Results area ---------- */

.dsb-results {
	margin: 10px 0 8px;
}

.dsb-results:empty {
	margin: 0;
}

.dsb-results-message {
	text-align: center;
	color: var(--dsb-muted);
	font-size: 1.05rem;
	padding: 24px 0;
}

/* Featured Guide / Video Grid layout: 1 large + 4 small. Guide items
   use a 2:1 crop, Video Grid items use 16:9 — both stay sharp because
   the box's aspect-ratio matches what the admin is told to upload,
   instead of stretching a mismatched image to fit. */

.dsb-result-guide {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 6px;
	margin-bottom: 28px;
}

.dsb-result-item {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--dsb-blue-dark);
	aspect-ratio: 2 / 1;
	cursor: pointer;
}

.dsb-result-item.dsb-ratio-16-9 {
	aspect-ratio: 16 / 9;
}

.dsb-result-item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dsb-result-main {
	grid-column: 1;
	grid-row: 1 / span 2;
	aspect-ratio: auto;
}

.dsb-result-small:nth-child(3),
.dsb-result-small:nth-child(5) {
	background: var(--dsb-blue-light);
}

/* Overlay button — shared by every image in every result type. 15px
   padding from the bottom and the relevant side, per the admin's
   placement choice; colors/size/link are all set per-image. This is
   a decorative label, not its own link — clicking anywhere on the
   image (including the button) follows the parent tile's link, so
   the whole image is clickable even without a button configured. */

.dsb-item-button {
	position: absolute;
	bottom: 15px;
	display: inline-block;
	padding: 8px 18px;
	border-radius: 4px;
	text-decoration: none;
	font-family: var(--dsb-font-body);
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	max-width: calc(100% - 30px);
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	z-index: 2;
}

.dsb-btn-bottom-left {
	left: 15px;
}

.dsb-btn-bottom-center {
	left: 50%;
	transform: translateX(-50%);
}

.dsb-btn-bottom-right {
	right: 15px;
}

/* Full-width banner result: same output regardless of which dropdown
   combination was chosen — a single wide banner-style image, roughly
   1000x300, with its own optional overlay button. */

.dsb-result-full-width {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	margin-bottom: 28px;
	background: var(--dsb-blue-dark);
	max-width: 1000px;
	cursor: pointer;
	aspect-ratio: 1000 / 300;
	margin-left: auto;
	margin-right: auto;
}

.dsb-result-full-width img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Four content columns ---------- */

.dsb-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 18px;
	background: #ffffff;
}

.dsb-column {
	border-radius: 8px;
	overflow: hidden;
}

.dsb-column-title {
	font-family: var(--dsb-font-heading);
	font-size: 1.1rem;
	font-weight: 700;
	text-align: center;
	margin: 0;
	padding: 12px 8px;
	background: var(--dsb-brand-blue);
	color: #ffffff;
}

.dsb-column-body {
	background: var(--dsb-card-bg);
	padding: 10px 12px 12px;
}

.dsb-column-links {
	font-family: var(--dsb-font-body);
	list-style: none;
	text-align: left;
	white-space: nowrap;
	padding: 0 0 0 4px;
	margin: 0;
}

.dsb-column-links li {
	margin: 0 0 4px;
}

.dsb-column-links a {
	color: var(--dsb-brand-blue);
	text-decoration: none;
}

.dsb-column-links a:hover {
	text-decoration: underline;
}

.dsb-view-all {
	display: block;
	text-align: center;
	font-family: var(--dsb-font-heading);
	color: var(--dsb-brand-blue);
	font-weight: 700;
	text-decoration: none;
	font-size: 0.95rem;
	margin-top: 4px;
}

.dsb-view-all:hover {
	text-decoration: underline;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.dsb-columns {
		grid-template-columns: repeat(2, 1fr);
	}
	.dsb-result-guide {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto;
	}
	.dsb-result-main {
		grid-column: 1 / span 2;
		grid-row: 1;
		min-height: 220px;
	}
}

@media (max-width: 700px) {
	.dsb-sentence-inner {
		padding: 32px 20px;
	}
	.dsb-sentence-line {
		font-size: 1.5rem;
	}

	/* Stack "label / dropdown / label / dropdown..." into alternating
	   full-width rows instead of the two-line paragraph layout used on
	   larger screens. Only applies before the sentence has shrunk. */
	.dsb-wrap:not(.dsb-is-shrunk) .dsb-sentence-line {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.dsb-wrap:not(.dsb-is-shrunk) .dsb-lead-text,
	.dsb-wrap:not(.dsb-is-shrunk) .dsb-mid-text,
	.dsb-wrap:not(.dsb-is-shrunk) .dsb-tail-text,
	.dsb-wrap:not(.dsb-is-shrunk) .dsb-end-text {
		display: block;
		width: 100%;
		text-align: center;
	}
	.dsb-wrap:not(.dsb-is-shrunk) .dsb-select-wrap {
		display: block;
		width: 100%;
		margin: 0 0 10px;
	}
	.dsb-wrap:not(.dsb-is-shrunk) .dsb-select {
		display: block;
		width: 100%;
		font-size: 1.5rem;
		text-align: center;
		padding: 0 50px;
		margin: 0;
	}
	.dsb-wrap:not(.dsb-is-shrunk) .dsb-line-break {
		display: none;
	}

	.dsb-columns {
		grid-template-columns: 1fr;
	}
	.dsb-wrap.dsb-is-shrunk .dsb-sentence-inner {
		flex-wrap: wrap;
		gap: 8px;
		padding: 12px 16px;
	}
	.dsb-wrap.dsb-is-shrunk .dsb-sentence-line {
		font-size: 0.75rem;
		white-space: normal;
		flex: 1 1 100%;
		text-align: center;
	}
	.dsb-wrap.dsb-is-shrunk .dsb-go-button {
		padding: 7px 18px;
		font-size: 0.8rem;
	}
}