/* Saad Signal Design
   Site-wide visual tweaks that the block editor cannot do.
   Colors follow the Saad Signal palette. */

/* -------------------------------------------------------------------------
   Navigation menu as a side panel, anchored to the window.
   Works both with the classic overlay and with the Navigation Overlay
   template part, whose container is not full screen on its own.
   ---------------------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	background-color: rgba(45, 41, 38, 0.45) !important;
	overflow: hidden !important;
	z-index: 100000;
}

/* The panel itself. Fixed to the window, so no parent can shrink it. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: auto;
	width: min(380px, 85vw);
	max-width: none;
	height: 100%;
	height: 100dvh;
	margin: 0;
	box-sizing: border-box;
	background: #FFFFFF;
	overflow-y: auto;
	overflow-x: hidden;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	padding: 0;
	box-shadow: 8px 0 40px rgba(45, 41, 38, 0.18);
	animation: ssd-panel-in 0.22s ease-out;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 4.5rem 2rem 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 1.5rem;
	box-shadow: 8px 0 40px rgba(45, 41, 38, 0.18);
	animation: ssd-panel-in 0.22s ease-out;
}
/* When both exist, the inner one sits inside the dialog. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-content {
	position: static;
	width: 100%;
	height: auto;
	min-height: 100%;
	box-shadow: none;
	animation: none;
}

@keyframes ssd-panel-in {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		animation: none;
	}
}

/* Close button, inside the panel */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 1.5rem;
	right: 2rem;
	left: auto;
	color: #6B635C;
	z-index: 2;
}

/* Menu items, stacked and left aligned */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
	align-items: stretch;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: block;
	width: 100%;
	border-bottom: 1px solid #EAE4DD;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 0.85rem 0;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	color: #2D2926;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: #A35F38;
}

/* Blocks placed inside the menu, such as Search or a Subscribe button */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-search,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
	width: 100%;
}

/* Admin bar, so the panel does not hide behind it while logged in */
.admin-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.admin-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	top: 32px;
	height: calc(100dvh - 32px);
}
@media (max-width: 782px) {
	.admin-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.admin-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		top: 46px;
		height: calc(100dvh - 46px);
	}
}

/* -------------------------------------------------------------------------
   Show or hide a block by screen size.
   Add the class in the block's Advanced > Additional CSS class(es).
   The breakpoint is 782px, the same one WordPress uses to stack columns.
   ---------------------------------------------------------------------- */
@media (min-width: 782px) {
	.ssd-mobile-only {
		display: none !important;
	}
}
@media (max-width: 781px) {
	.ssd-desktop-only {
		display: none !important;
	}
}

/* Nothing inside the page overflows sideways on a phone */
@media (max-width: 781px) {
	.wp-block-post-featured-image img,
	.wp-block-image img {
		max-width: 100%;
		height: auto;
	}
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		gap: 1.5rem;
	}
}

/* Buttons inside the navigation panel: full width, text on one line */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
	display: block;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-button {
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	white-space: nowrap;
	box-sizing: border-box;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-search__inside-wrapper {
	width: 100%;
}

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */
.ssd-headbar {
	flex-wrap: nowrap !important;
}
.ssd-headbar a {
	text-decoration: none;
}

/* The site logo never overflows, and shrinks on tablet and phone. */
.wp-block-site-logo img,
.ssd-logo img {
	max-width: 100%;
	height: auto;
}
@media (max-width: 1024px) {
	.ssd-logo img {
		width: 320px;
	}
}
@media (max-width: 781px) {
	.ssd-logo img {
		width: 190px;
	}
	.ssd-headbar {
		gap: 8px;
	}
	.ssd-headbar > .wp-block-column:first-child,
	.ssd-headbar > .wp-block-column:last-child {
		flex-basis: 44px !important;
		min-width: 44px;
	}
}

/* -------------------------------------------------------------------------
   Header on phones: no leftover gaps.
   The theme adds block gap between siblings, and the header carries two
   spacers plus generous padding, which stack up under the logo.
   ---------------------------------------------------------------------- */
@media (max-width: 781px) {
	/* the group that holds the mobile bar */
	.wp-block-group:has(> .ssd-headbar) {
		padding-top: 16px !important;
		padding-bottom: 8px !important;
	}
	/* spacers belong to the desktop layout */
	.wp-block-group:has(> .ssd-headbar) > .wp-block-spacer {
		display: none;
	}
	/* the logo and the rule sit close together */
	.wp-block-group:has(> .ssd-headbar) > .wp-block-site-logo {
		margin-block-start: 8px !important;
		margin-block-end: 0 !important;
	}
	hr.wp-block-separator.ssd-mobile-only {
		margin-block-start: 12px !important;
		margin-block-end: 0 !important;
	}
}

/* -------------------------------------------------------------------------
   On phones the header block is alignwide, which bleeds into the root
   padding and ends up wider than the page content. This lines them up.
   ---------------------------------------------------------------------- */
@media (max-width: 781px) {
	.wp-block-group.alignwide:has(> .ssd-headbar) {
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: none !important;
	}
}

/* -------------------------------------------------------------------------
   Optical alignment of the header icons.
   The hamburger drawing sits 5px inside its 24px box and the envelope 3px,
   so without this they look indented next to the rule and the content.
   ---------------------------------------------------------------------- */
.ssd-headbar .wp-block-navigation__responsive-container-open {
	margin-left: -5px;
	padding-left: 0;
}
.ssd-headbar ul.wp-block-social-links {
	margin-right: -3px;
}

/* -------------------------------------------------------------------------
   Logo inside the mobile bar: it takes the middle and stays centred
   between the hamburger and the envelope.
   ---------------------------------------------------------------------- */
.ssd-headbar > .wp-block-site-logo,
.ssd-headbar > .ssd-rlogo,
.ssd-headbar > .wp-block-image {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	margin: 0 !important;
}
.ssd-headbar > .ssd-rlogo .ssd-rlogo__link {
	display: block;
}
.ssd-headbar > .wp-block-site-logo img {
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
   Responsive logo block: one image per screen size.
   ---------------------------------------------------------------------- */
.ssd-rlogo img {
	max-width: 100%;
	height: auto;
	display: block;
}
.ssd-rlogo__link {
	display: inline-block;
}
@media (min-width: 782px) {
	.ssd-rlogo__mobile {
		display: none !important;
	}
}
@media (max-width: 781px) {
	.ssd-rlogo__desktop {
		display: none !important;
	}
}
/* In the editor both are shown, with a label, so nothing looks broken. */
.ssd-rlogo--editor img {
	display: block;
}

/* Responsive logo outside the bar: honour the block's alignment */
.ssd-rlogo.aligncenter {
	text-align: center;
}
.ssd-rlogo.aligncenter img,
.ssd-rlogo.aligncenter .ssd-rlogo__link {
	margin-left: auto;
	margin-right: auto;
}
.ssd-rlogo.aligncenter .ssd-rlogo__link {
	display: table;
}

/* -------------------------------------------------------------------------
   Featured image inside a Query Loop: keep it on the same left edge as the
   title. Core gives it a 650px cap with auto margins, so it drifts to the
   centre whenever the card is wider than that.
   ---------------------------------------------------------------------- */
.wp-block-post-template .wp-block-post-featured-image {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* -------------------------------------------------------------------------
   Comment form: WordPress renders it in PHP, so it has no block controls.
   Without this the submit button is linen text on a white background.
   ---------------------------------------------------------------------- */
.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form input[type="submit"] {
	background-color: #2D2926;
	color: #F2EDE8;
	border: 0;
	border-radius: 999px;
	padding: 12px 28px;
	font-size: 0.95rem;
	line-height: 1.2;
	cursor: pointer;
}
.wp-block-post-comments-form .wp-element-button:hover,
.wp-block-post-comments-form input[type="submit"]:hover {
	background-color: #A35F38;
}
.wp-block-post-comments-form textarea,
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"] {
	border: 1px solid #DCD4CB;
	border-radius: 4px;
	padding: 10px 12px;
}
.wp-block-post-comments-form textarea:focus,
.wp-block-post-comments-form input:focus {
	outline: 2px solid #A35F38;
	outline-offset: 1px;
}

/* -------------------------------------------------------------------------
   Format label: small mark on a card saying the post is a video or a
   statistic. Articles carry no label, so a list of articles stays clean.
   ---------------------------------------------------------------------- */
.ssd-format {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	color: #A35F38;
	border: 1px solid #A35F38;
	border-radius: 2px;
	padding: 4px 7px 3px;
	vertical-align: middle;
}
.ssd-format--preview {
	opacity: 0.6;
}

/* -------------------------------------------------------------------------
   Reading measure: a paragraph wider than about 62 characters is tiring to
   read. Add the class ssd-measure to intro text sitting in a wide column.
   ---------------------------------------------------------------------- */
.ssd-measure {
	max-width: 62ch;
	margin-right: auto;
}

/* -------------------------------------------------------------------------
   Featured image in a list: it has to be exactly as wide as the title and
   the excerpt beside it. Theme and editor both try to cap it.
   ---------------------------------------------------------------------- */
.wp-block-post-template .wp-block-post-featured-image,
.wp-block-post-template .wp-block-post-title,
.wp-block-post-template .ssa-byline,
.wp-block-post-template .ssa-names,
.wp-block-post-template .wp-block-post-date,
.wp-block-post-template .wp-block-post-excerpt {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.wp-block-post-template .wp-block-post-featured-image img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto;
}

/* -------------------------------------------------------------------------
   Balanced title: on when the page has the switch turned on. The title
   drops from headline scale to a size that sits with its own content.
   ---------------------------------------------------------------------- */
.ssd-title-balanced main h1:not(:where(
	.wp-block-query *,
	.wp-block-post-template *,
	aside *,
	.wp-block-column .wp-block-query *
)) {
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem) !important;
	line-height: 1.15;
	letter-spacing: -0.01em;
}