/* Career Quiz – quiz.css
 *
 * CSS custom properties on .cq-container can be overridden from Elementor
 * or a parent selector without touching this file.
 *
 * Font references (Bootzy Condensed, Bootzy) are loaded by the theme.
 */

#career-quiz {
	position: relative;
}

.cq-container {
	--cq-orange:        #FF7C46;
	--cq-answer-bg:     rgba( 239, 237, 237, 0.4 );
	--cq-answer-hover:  rgba( 239, 237, 237, 0.8 );
	--cq-brown:         #482C10;
	--cq-selected-bg:   #FF7C46;
	--cq-selected-text: #ffffff;
	--cq-radius-pill:   25px;

	position:    relative;
	width:       60%;
	max-width:   720px;
	margin:      0 auto;
	padding:     145px 0;
	font-family: inherit;
	box-sizing:  border-box;
}

/* ─── Restart button ─────────────────────────────────────────────────────── */

.cq-restart {
	position:        absolute;
	top:             30px;
	right:           0;
	background:      none;
	border:          none;
	padding:         0;
	color:           var( --cq-brown );
	font-family:     'Neue Haas Unica', sans-serif;
	font-size:       22px;
	font-weight:     800;
	letter-spacing:  0.01em;
	text-decoration: none;
	text-transform:  uppercase;
	cursor:          pointer;
	opacity:         0.6;
	transition:      opacity 0.15s ease, color 0.15s ease;
	line-height:     1;
}

.cq-restart:hover,
.cq-restart:focus {
	opacity:          1;
	color:            var( --cq-orange );
	background-color: transparent;
	outline:          none;
}

.cq-restart--inactive {
	visibility:     hidden;
	pointer-events: none;
}

/* ─── Questions ──────────────────────────────────────────────────────────── */

.cq-question {
	display: none;
}

.cq-question.active {
	display:   block;
	animation: cq-fade-in 0.3s ease both;
}

@keyframes cq-fade-in {
	from {
		opacity:   0;
		transform: translateY( 12px );
	}
	to {
		opacity:   1;
		transform: translateY( 0 );
	}
}

/* ─── Question title ─────────────────────────────────────────────────────── */

.cq-question-title {
	display:        block;
	width:          65%;
	margin: 		0 auto;
	background:     var( --cq-orange );
	color:          var( --cq-brown );
	font-family:    'Bootzy Condensed', sans-serif;
	font-size:      clamp( 28px, 5vw, 48px );
	line-height:    0.9;
	letter-spacing: 0.01em;
	text-align:     center;
	text-transform: uppercase;
	border-radius:  var( --cq-radius-pill );
	padding:        24px 55px 14px;
	box-sizing:     border-box;
}

/* ─── Answers ────────────────────────────────────────────────────────────── */

.cq-answers {
	display:        flex;
	flex-direction: column;
	margin-top:     32px;
}

.cq-answer {
	position:        relative;
	display:         block;
	background:      var( --cq-answer-bg );
	color:           var( --cq-brown );
	font-family:     'Bootzy', sans-serif;
	font-size:       24px;
	letter-spacing:  0.05em;
	text-align:      left;
	border-radius:   var( --cq-radius-pill );
	padding:         30px 35px;
	margin:          10px 0;
	cursor:          pointer;
	user-select:     none;
	transition:      background 0.2s ease, color 0.15s ease;
	overflow-wrap:   break-word;
	word-break:      break-word;
}

.cq-answer:hover {
	background: var( --cq-answer-hover );
}

/* Keyboard focus: visible outline around the pill when the hidden radio is focused */
.cq-answer:focus-within {
	outline:        2px solid var( --cq-brown );
	outline-offset: 2px;
}

.cq-answer.selected {
	background: var( --cq-selected-bg );
	color:      var( --cq-selected-text );
}

/* Radio input is visually hidden but remains keyboard-accessible.
   It fills the entire label so the whole pill is a valid click target. */
.cq-answer input[type="radio"] {
	position: absolute;
	top:      0;
	left:     0;
	width:    100%;
	height:   100%;
	opacity:  0;
	margin:   0;
	cursor:   pointer;
	z-index:  1;
}

/* ─── Result region ──────────────────────────────────────────────────────── */

/* Sibling of .cq-container — naturally full width, no layout hacks needed.
   position + z-index: animation creates a stacking context with z-index:auto,
   which lets positioned decorations (smile, arrow) paint on top in DOM order.
   Explicit z-index:1 lifts the region above all auto-z-index decorations. */
.cq-result-region {
	display:        block;
	width:          100%;
	padding-bottom: 3.125rem;   /* 50px @ 16px base */
	animation:      cq-fade-in 0.4s ease both;
	position:       relative;
	z-index:        1;
}

.cq-result-region[hidden] {
	display: none;
}

/* Container collapses when result is showing.
   padding-top = RESTART bottom (~52px) + 75px desired gap = 127px ≈ 8rem.
   Dots are hidden in this state. */
.cq-container.cq-result-active {
	padding: 8rem 0 0;
}

.cq-container.cq-result-active .cq-dots {
	display: none;
}

/* ── Card: equal-column grid ── */

.cq-result-card {
	display:               grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	width:                 min( 96%, 1080px );
	box-sizing:            border-box;
	position:              relative;
	z-index:               1;
}

/* Image column: flex-column so height: 50% resolves against the row height.
   Left-aligned so the character hugs the left edge of its column. */
.cq-result-image {
	position:        relative;
	z-index:         2;
	margin-right:    -2.1875rem;   /* -35px @ 16px base */
	margin-top:      2.1875rem;    /* 35px @ 16px base */
	box-sizing:      border-box;
	display:         flex;
	justify-content: flex-end;
}

.cq-result-image img {
	display:     block;
	max-height:  60%;
	max-width:   90%;
	width:       auto;
	object-fit:  contain;
}

.cq-result-body {
	background:      #BFF0FF;
	border-radius:   25px;
	color:           #482C10;
	z-index:         1;
	box-sizing:      border-box;
	/* 45px / 55px @ 1440px; fluid via vw, floored at 1.5rem */
	padding:         clamp( 1.5rem, 3.125vw, 2.8125rem ) clamp( 1.5rem, 3.82vw, 3.4375rem );
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
}

.cq-result-top {
	padding: 0;
}

.cq-no-image .cq-result-image {
	display: none;
}

.cq-no-image .cq-result-body {
	grid-column: 1 / -1;
}

.cq-no-image .cq-result-top {
	padding-left: 2rem;
}

/* Mobile-only duplicate of "Best fit:" — sits above the image in flex order */
.cq-best-fit-label--mobile {
	display: none;
}

.cq-result-body .cq-best-fit-label {
	font-family: 'Neue Haas Unica', sans-serif;
	font-size:   22px;
	font-weight: 400;
	color:       #482C10;
	margin:      0 0 1.25rem;   /* 20px gap to career title */
	line-height: 1;
}

.cq-result-body h2 {
	font-family: 'Bootzy', sans-serif;
	font-size:   40px;
	line-height: 0.93;
	color:       #482C10;
	margin:      0 0 3.125rem;   /* 50px gap to description */
}

.cq-result-body p {
	font-family: 'Neue Haas Unica', sans-serif;
	font-size:   22px;
	font-weight: 400;
	color:       #482C10;
	line-height: 1.5;
	margin:      0;
}

/* ── Learn More button (opens modal) ── */

.cq-learn-more-btn {
	display:          inline-block;
	background:       none;
	background-color: transparent;
	border:           none;
	padding:          0;
	margin-top:       1.5625rem;   /* 25px gap from description */
	color:            #482C10;
	font-family:      'Bootzy', sans-serif;
	font-size:        22px;
	font-weight:      400;
	letter-spacing:   0.04em;
	text-transform:   uppercase;
	text-decoration:  underline;
	cursor:           pointer;
	transition:       color 0.15s ease;
}

.cq-learn-more-btn:hover,
.cq-learn-more-btn:focus {
	color:            var( --cq-orange );
	background-color: transparent;
	outline:          none;
}

/* ── Also consider ── */

.cq-also-consider {
	padding:    0;
	margin-top: 5.3125rem;   /* 85px gap after Learn More */
}

.cq-also-label {
	font-family: 'Neue Haas Unica', sans-serif;
	font-size:   22px;
	font-weight: 400;
	color:       #482C10;
	margin:      0 0 0.6rem;
}

.cq-also-divider {
	border:     none;
	border-top: 1px solid #482C10;
	margin:     0.625rem 0 0;   /* 10px top; bottom gap owned by .cq-also-grid margin-top */
}

.cq-also-grid {
	display:               grid;
	grid-template-columns: repeat( 3, 1fr );
	column-gap:            2rem;
	margin-top:            0.5rem;   /* 8px below divider */
}

.cq-also-col {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
}

/* Row 1: level labels — all three align to the top of the row */
.cq-also-level-cell {
	display:     flex;
	align-items: flex-start;
}

.cq-also-level {
	display:        block;
	font-family:    'Neue Haas Unica', sans-serif;
	font-size:      14px;
	font-weight:    400;
	text-transform: uppercase;
	line-height:    1.2em;
	color:          #482C10;
	margin:         0;
}

.cq-also-level span {
	display:     block;
	font-weight: 400;
}

/* Row 2: career name + description */
.cq-also-career-cell p {
	font-family: 'Neue Haas Unica', sans-serif;
	font-size:   18px;
	font-weight: 400;
	color:       #482C10;
	line-height: 1.2;
	margin:      0.25rem 0 0;
}

/* Career name links in "Also consider" — bold text, opens modal */
.cq-also-career-btn {
	display:         inline;
	font-family:     'Neue Haas Unica', sans-serif;
	font-size:       18px;
	font-weight:     700;
	line-height:     1.2;
	color:           #482C10;
	text-decoration: underline;
	transition:      color 0.15s ease;
}

.cq-also-career-btn:hover,
.cq-also-career-btn:focus {
	color:            var( --cq-orange );
	background-color: transparent;
	outline:          none;
}

/* ─── Modal ──────────────────────────────────────────────────────────────── */

/* Prevents page scroll while any modal is open */
body.cq-modal-open {
	overflow: hidden;
}

.cq-modal {
	position:        fixed;
	inset:           0;
	z-index:         9999;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         12.4vw 9.7vw;
	opacity:         0;
	pointer-events:  none;
	transition:      opacity 0.25s ease;
}

.cq-modal[hidden] {
	display: none;
}

.cq-modal.is-open {
	opacity:        1;
	pointer-events: auto;
}

.cq-modal-backdrop {
	position:   absolute;
	inset:      0;
	background: rgba( 0, 0, 0, 0.5 );
}

.cq-modal-box {
	position:      relative;
	z-index:       1;
	background-color: #2185AD;
	background-image: url( '/wp-content/uploads/2026/01/just-clouds-2.jpg' );
	background-size:     cover;
	background-position: center;
	background-repeat:   no-repeat;
	border-radius: 25px;
	padding:       4.6875rem 7.8125rem;   /* 75px 125px @ 16px base */
	width:         100%;
	max-width:     820px;
	max-height:    98vh;
	overflow-y:    auto;
	box-sizing:    border-box;
}

.cq-modal-close {
	position:         absolute;
	top:              1.1rem;
	right:            1.4rem;
	background:       none !important;
	background-color: transparent !important;
	border:           none;
	font-size:        1.4rem;
	line-height:      1;
	cursor:           pointer;
	color:            #ffffff;
	padding:          0;
	opacity:          0.7;
	transition:       opacity 0.15s ease;
}

.cq-modal-close:hover,
.cq-modal-close:focus {
	opacity:          1;
	background:       none !important;
	background-color: transparent !important;
	outline:          none;
}

.cq-modal-box h3 {
	font-family:    'Bootzy', sans-serif;
	font-size:      30px;
	font-weight:    400;
	line-height:    1.2;
	letter-spacing: 0;
	color:          #ffffff;
	margin:         0 2rem 2rem 0;
	transform:      rotate( -2.54deg );
	transform-origin: left center;
	display:        inline-block;
}

.cq-modal-grid {
	display:               grid;
	grid-template-columns: repeat( 3, 1fr );
	gap:                   1.5rem 2rem;
}

.cq-modal-step h6 {
	font-family:    'Bootzy', sans-serif;
	font-size:      18px;
	font-weight:    400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:          #F4DE01;
	margin:         0 0 0.4rem;
	line-height:    1.3;
}

.cq-modal-step p {
	font-family: inherit;
	font-size:   18px;
	font-weight: 400;
	color:       #F5F5F5;
	line-height: 1.2;
	margin:      0;
}

/* ─── Loading state ──────────────────────────────────────────────────────── */

.cq-loading {
	display:         flex;
	justify-content: center;
	align-items:     center;
	padding:         3rem 1rem;
}

.cq-loading__dots {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.cq-loading__dots span {
	display:       block;
	width:         10px;
	height:        10px;
	border-radius: 50%;
	background:    var( --cq-answer-bg );
	animation:     cq-hop 1.2s ease-in-out infinite;
}

.cq-loading__dots span:nth-child(1) { animation-delay: 0s;    }
.cq-loading__dots span:nth-child(2) { animation-delay: 0.15s; }
.cq-loading__dots span:nth-child(3) { animation-delay: 0.30s; }
.cq-loading__dots span:nth-child(4) { animation-delay: 0.45s; }

@keyframes cq-hop {
	0%,  80%, 100% { transform: translateY( 0 );      background: var( --cq-answer-bg ); }
	40%            { transform: translateY( -12px );   background: rgba( 239, 237, 237, 1 ); }
}

/* ─── Error state ────────────────────────────────────────────────────────── */

.cq-error {
	background:    #fff5f5;
	border-left:   4px solid #cc0000;
	padding:       1rem 1.5rem;
	border-radius: 4px;
	color:         #cc0000;
}

.cq-error-retry {
	display:       block;
	margin-top:    0.75rem;
	background:    none;
	border:        1px solid #cc0000;
	border-radius: 4px;
	padding:       0.4rem 1rem;
	color:         #cc0000;
	font-size:     14px;
	cursor:        pointer;
	transition:    background 0.15s ease, color 0.15s ease;
}

.cq-error-retry:hover,
.cq-error-retry:focus {
	background: #cc0000;
	color:      #ffffff;
	outline:    none;
}

/* ─── Decorative flourishes ──────────────────────────────────────────────── */
/* All three are in the static #career-quiz HTML so they appear in both
   quiz and result states. Positioned relative to #career-quiz. */

/* Arrow: top-left corner at 78px from top, 14px from left.
   Width/height use vw so it scales as the viewport resizes —
   anchored to the design values (300×96) at 1440px wide. */
.cq-arrow-deco {
	position:       absolute;
	top:            4.875rem;                        /* 78px */
	left:           0.875rem;                        /* 14px */
	width:          clamp( 9.375rem, 20.83vw, 18.75rem );  /* 150–300px */
	height:         clamp( 3rem,     6.67vw,  6rem  );     /*  48–96px  */
	pointer-events: none;
	display:        block;
}

/* Smile: 66px from quiz left edge, 540px from quiz top */
.cq-smile-deco {
	position:       absolute;
	left:           4.125rem;    /* 66px */
	top:            33.75rem;    /* 540px */
	width:          4.5625rem;   /* 73px */
	height:         4.5625rem;
	pointer-events: none;
}

/* Star: 140px from quiz right edge, 60px from quiz bottom; under result card */
.cq-star-deco {
	position:       absolute;
	right:          8.75rem;     /* 140px */
	bottom:         3.75rem;     /* 60px */
	width:          4rem;        /* 64px */
	height:         4rem;
	pointer-events: none;
	z-index:        0;
}

/* ─── Dot navigation ─────────────────────────────────────────────────────── */

/* Desktop: right-aligned column under the RESTART button */
.cq-dots {
	position:    absolute;
	top:         110px;
	right:       0;
	display:     flex;
	align-items: center;
	gap:         8px;
}

.cq-dot {
	width:         10px;
	height:        10px;
	border-radius: 50%;
	background:    var( --cq-answer-bg );
	border:        none;
	padding:       0;
	flex-shrink:   0;
	cursor:        pointer;
	transition:    background 0.2s ease, opacity 0.2s ease;
}

.cq-dot.answered {
	background: rgba( 239, 237, 237, 0.7 );
}

.cq-dot.active {
	background: rgba( 239, 237, 237, 1 );
}

.cq-dot:disabled {
	opacity: 0.35;
	cursor:  default;
}

/* Arrows hidden on desktop */
.cq-dots__arrow {
	display:    none;
	background: none;
	border:     none;
	padding:    8px;
	cursor:     pointer;
	opacity:    0.8;
	transition: opacity 0.15s ease;
	line-height: 0;
}

.cq-dots__arrow:hover  { opacity: 1; }
.cq-dots__arrow:disabled { opacity: 0.3; cursor: default; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media ( max-width: 767px ) {

	/* Restore full width and reduce top padding on mobile */
	.cq-container {
		width:   100%;
		padding: 60px 0 90px;
	}

	/* Question title full width on mobile */
	.cq-question-title {
		width:     100%;
		padding:   24px 30px 14px;
		font-size: clamp( 32px, 8vw, 52px );
	}

	.cq-question.active {
		padding: 0 10px;
	}

	.cq-answer {
		font-size:    18px;
		padding:      22px 10px;
		padding-left: 10px;
	}

	/* Mobile dots: fixed to bottom of container, centered, with arrows */
	.cq-dots {
		top:             auto;
		right:           0;
		left:            0;
		bottom:          24px;
		justify-content: center;
		gap:             14px;
	}

	.cq-dots__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Active dot is yellow on mobile */
	.cq-dot.active {
		background: #FFEC35;
	}

	/* Result: single-column flex on mobile */
	.cq-result-card {
		display:        flex;
		flex-direction: column;
		padding:        0;
	}

	/* Show mobile "Best fit:" (above image), hide the one inside the body */
	.cq-best-fit-label--mobile {
		display: block;
	}

	.cq-result-top .cq-best-fit-label {
		display: none;
	}

	/* Image: full width, centered */
	.cq-result-image {
		width:           100%;
		margin:          0;
		justify-content: center;
	}

	.cq-result-image img {
		width:      auto;
		height:     auto;
		max-width:  100%;
		margin-top: 0;
	}

	/* Body: transparent bg, 25px padding all around */
	.cq-result-body {
		width:            100%;
		padding:          1.5625rem;   /* 25px */
		box-sizing:       border-box;
		background-color: transparent;
	}

	.cq-result-top {
		padding: 0;
	}

	/* Hide title and description on mobile */
	.cq-result-body h2,
	.cq-result-top > p:not( .cq-best-fit-label ) {
		display: none;
	}

	/* Learn More: centred */
	.cq-learn-more-btn {
		display:      block;
		text-align:   center;
		justify-self: center;
	}

	/* Gap from Learn More to Also consider: 36px */
	.cq-also-consider {
		padding:    0;
		margin-top: 2.25rem;   /* 36px */
	}

	/* Remove dividing line on mobile */
	.cq-also-divider {
		display: none;
	}

	/* Also-consider: all text white on mobile.
	   .cq-also-consider prefix raises specificity above .cq-result-body p (0,1,1). */
	.cq-also-consider .cq-also-label,
	.cq-also-level,
	.cq-also-career-cell p {
		color: #ffffff;
	}

	.cq-also-career-btn {
		color:           #ffffff;
		text-decoration: underline;
		line-height:     1;
	}

	/* Shrink result-active container padding on mobile */
	.cq-container.cq-result-active {
		padding: 2rem;
	}

	/* Also grid: collapse to single column on mobile */
	.cq-also-grid {
		grid-template-columns: 1fr;
		column-gap:            0;
		row-gap:               1.5rem;
	}

	/* Hide desktop flourishes on mobile */
	.cq-arrow-deco,
	.cq-smile-deco,
	.cq-star-deco {
		display: none;
	}

	/* Modal: 2 columns on mobile */
	.cq-modal-grid {
		grid-template-columns: repeat( 2, 1fr );
		gap:                   1.25rem;
	}

	.cq-modal {
		padding: 12.4vw 3vw;
	}

	.cq-modal-box {
		padding: 1.75rem 1.25rem;
	}

	.cq-modal-box h3 {
		font-size: 30px;
	}

	.cq-modal-step h6,
	.cq-modal-step p {
		font-size: 18px;
	}
}

/* ─── Motion preferences ─────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.cq-question.active,
	.cq-result-region {
		animation: none;
	}

	.cq-answer,
	.cq-restart,
	.cq-learn-more-btn,
	.cq-also-career-btn,
	.cq-modal,
	.cq-modal-close,
	.cq-error-retry,
	.cq-dot {
		transition: none;
	}

	.cq-loading__dots span {
		animation: none;
		background: rgba( 239, 237, 237, 1 );
	}
}