/*
Theme Name: CaseTheme
Theme URI: https://casetheme.net/
Description: Child theme of GeneratePress for CaseTheme. Custom header, footer and scroll sections.
Author: Abdul Moeed
Author URI: https://casetheme.net/
Template: generatepress
Version: 0.1.0
License: GNU General Public License v2 or later
Text Domain: casetheme
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Source palette: #17252A #2B7A78 #3AAFA9 #DEF2F1 #FEFFFF
	   Every pair below clears WCAG AA, including white on the button. */
	--ct-brand: #2B7A78;        /* buttons, links, active nav      5.0:1 on white */
	--ct-brand-dark: #1F5C5A;   /* hover, and text on mint         7.7:1 on white */
	--ct-accent: #3AAFA9;       /* bright teal. Decorative, and accents on dark  */
	--ct-deep: #17252A;         /* footer, dark sections          15.7:1 on white */
	--ct-tint: #DEF2F1;         /* mint card surfaces                            */
	--ct-wash: #F2FAF9;         /* page and section backgrounds                  */
	--ct-white: #FEFFFF;
	--ct-ink: #17252A;          /* body text                      15.7:1 on white */
	--ct-muted: #51666B;        /* secondary text                  6.1:1 on white */
	--ct-wire: #E6EEEE;
	--ct-wire-dark: #CBE3E2;
	--ct-good: #0CCE6B;
	--ct-poor: #FF4E42;

	--ct-font-head: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ct-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--ct-max: 1200px;
	--ct-shell: 1440px;
	--ct-gutter: 20px;
	--ct-gutter-shell: 32px;
	--ct-header-h: 72px;
	--ct-radius: 12px;
	--ct-radius-sm: 8px;
	--ct-shadow: 0 1px 2px rgba(23, 37, 42, .05), 0 8px 24px rgba(23, 37, 42, .08);
}

/* ==========================================================================
   2. Shared
   ========================================================================== */

/* GeneratePress sets this globally, but repeating it keeps these components
   self contained and correct in the standalone preview too. */
.ct-container,
.ct-container *,
.ct-header,
.ct-header *,
.ct-footer,
.ct-footer * {
	box-sizing: border-box;
}

.ct-container {
	width: 100%;
	max-width: var(--ct-max);
	margin-inline: auto;
	padding-inline: var(--ct-gutter);
}

/* The header and footer bands span the full browser width. Their inner content
   runs wider than the article container, so the brand furniture sits closer to
   the edges than the reading column does. */
.ct-header .ct-container,
.ct-footer .ct-container {
	max-width: var(--ct-shell);
	padding-inline: var(--ct-gutter-shell);
}

@media (max-width: 599px) {

	.ct-header .ct-container,
	.ct-footer .ct-container {
		padding-inline: var(--ct-gutter);
	}
}

.ct-no-scroll {
	overflow: hidden;
}

.ct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	padding: 11px 18px;
	border: 0;
	border-radius: var(--ct-radius-sm);
	background: var(--ct-brand);
	color: var(--ct-white);
	font-family: var(--ct-font-head);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s ease;
}

.ct-btn:hover,
.ct-btn:focus {
	background: var(--ct-deep);
	color: var(--ct-white);
}

.ct-btn--light {
	background: var(--ct-white);
	color: var(--ct-deep);
}

.ct-btn--light:hover,
.ct-btn--light:focus {
	background: var(--ct-tint);
	color: var(--ct-deep);
}

:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--ct-brand);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   3. Logo
   ========================================================================== */

.ct-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	line-height: 1;
}

.ct-logo__mark {
	display: block;
	flex: 0 0 auto;
}

.ct-logo__text {
	font-family: var(--ct-font-head);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.ct-logo__a {
	color: var(--ct-ink);
}

.ct-logo__b {
	color: var(--ct-brand);
}

.ct-logo--invert .ct-logo__a {
	color: var(--ct-white);
}

.ct-logo--invert .ct-logo__b {
	color: var(--ct-accent);
}

/* ==========================================================================
   4. Header
   ========================================================================== */

.ct-header__sentinel {
	display: block;
	height: 1px;
	margin-bottom: -1px;
}

.ct-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--ct-white);
	border-bottom: 1px solid var(--ct-tint);
	transition: box-shadow .2s ease;
}

.ct-header.is-stuck {
	box-shadow: 0 1px 0 rgba(43, 122, 120, .12), 0 6px 20px rgba(23, 37, 42, .10);
}

.ct-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--ct-header-h);
}

.ct-nav {
	display: flex;
	align-items: center;
	gap: 28px;
}

.ct-nav__list {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-nav__list a {
	display: block;
	padding: 6px 0;
	color: var(--ct-ink);
	font-family: var(--ct-font-head);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: color .16s ease;
}

.ct-nav__list a:hover,
.ct-nav__list a:focus {
	color: var(--ct-brand);
}

.ct-nav__list .current-menu-item > a,
.ct-nav__list .current_page_item > a {
	color: var(--ct-brand);
	box-shadow: inset 0 -2px 0 var(--ct-brand);
}

/* Submenus. Hover and focus-within on desktop, no JS. */
.ct-nav__list .menu-item-has-children {
	position: relative;
}

.ct-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: -14px;
	z-index: 5;
	display: block;
	min-width: 210px;
	margin: 0;
	padding: 8px;
	background: var(--ct-white);
	border: 1px solid var(--ct-tint);
	border-radius: var(--ct-radius);
	box-shadow: var(--ct-shadow);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.ct-nav__list .menu-item-has-children:hover > .sub-menu,
.ct-nav__list .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ct-nav__list .sub-menu a {
	padding: 9px 10px;
	border-radius: var(--ct-radius-sm);
	font-weight: 500;
}

.ct-nav__list .sub-menu a:hover,
.ct-nav__list .sub-menu a:focus {
	background: var(--ct-wash);
}

/* Burger. Hidden on desktop. */
.ct-burger {
	display: none;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--ct-tint);
	border-radius: var(--ct-radius-sm);
	background: var(--ct-white);
	cursor: pointer;
}

.ct-burger__bars,
.ct-burger__bars::before,
.ct-burger__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	margin-inline: auto;
	background: var(--ct-ink);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.ct-burger__bars::before,
.ct-burger__bars::after {
	content: "";
	position: relative;
}

.ct-burger__bars::before {
	top: -6px;
}

.ct-burger__bars::after {
	top: 4px;
}

.is-open .ct-burger__bars {
	background: transparent;
}

.is-open .ct-burger__bars::before {
	top: 0;
	transform: translateY(2px) rotate(45deg);
}

.is-open .ct-burger__bars::after {
	top: 0;
	transform: translateY(0) rotate(-45deg);
}

@media (max-width: 899px) {

	.ct-burger {
		display: block;
	}

	/* Positioned against .ct-header, not .ct-header__inner. Anchoring to the
	   inner container would need negative gutters, which pushes the panel past
	   the viewport edge and creates horizontal page scroll. */
	.ct-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 80;
		display: block;
		padding: 8px var(--ct-gutter) 20px;
		background: var(--ct-white);
		border-bottom: 1px solid var(--ct-tint);
		box-shadow: var(--ct-shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
	}

	.ct-header.is-open .ct-nav {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.ct-nav__list {
		display: block;
	}

	.ct-nav__list > li {
		border-bottom: 1px solid var(--ct-wash);
	}

	.ct-nav__list a {
		padding: 14px 2px;
		font-size: 17px;
	}

	.ct-nav__list .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 8px 14px;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.ct-nav__actions {
		margin-top: 16px;
	}

	.ct-nav__actions .ct-btn {
		width: 100%;
		padding: 14px 18px;
	}
}

/* ==========================================================================
   5. Footer
   ========================================================================== */

.ct-footer {
	margin-top: 72px;
	padding: 64px 0 28px;
	background: var(--ct-deep);
	color: #DEF2F1;
	font-family: var(--ct-font-body);
	font-size: 15px;
}

.ct-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.ct-footer__blurb {
	max-width: 42ch;
	margin: 16px 0 24px;
	color: #B9D6D4;
	line-height: 1.65;
}

.ct-footer__heading {
	margin: 0 0 14px;
	color: var(--ct-white);
	font-family: var(--ct-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ct-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-footer__list li + li {
	margin-top: 10px;
}

.ct-footer a {
	color: #DEF2F1;
	text-decoration: none;
	transition: color .16s ease;
}

.ct-footer a:hover,
.ct-footer a:focus {
	color: var(--ct-white);
}

.ct-subscribe__label {
	display: block;
	margin-bottom: 10px;
	color: var(--ct-white);
	font-family: var(--ct-font-head);
	font-size: 14px;
	font-weight: 700;
}

.ct-subscribe__row {
	display: flex;
	gap: 8px;
	max-width: 380px;
}

.ct-subscribe__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--ct-radius-sm);
	background: rgba(255, 255, 255, .06);
	color: var(--ct-white);
	font-family: var(--ct-font-body);
	font-size: 15px;
}

.ct-subscribe__input::placeholder {
	color: #9FC4C2;
}

.ct-subscribe__input:focus {
	border-color: var(--ct-accent);
	background: rgba(255, 255, 255, .1);
	outline: none;
}

.ct-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	margin-top: 48px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: 13.5px;
	color: #B9D6D4;
}

.ct-footer__copy,
.ct-footer__note {
	margin: 0;
}

@media (max-width: 899px) {

	.ct-footer {
		margin-top: 56px;
		padding-top: 48px;
	}

	.ct-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}

	.ct-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 539px) {

	.ct-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ct-subscribe__row {
		flex-direction: column;
	}

	.ct-subscribe__row .ct-btn {
		width: 100%;
	}
}

/* ==========================================================================
   6. Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}