/*
Theme Name: DANDS Base Block Theme
Author: DANDS
Description: Shared block theme foundation for the DANDS multisite.
Version: 0.5.2
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: dands-base
*/

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; }
img { max-width: 100%; height: auto; }

/* Shared semantic colour tokens. The palette values are defaults; each
 * multisite site can override the three Site-* colours through Global Styles.
 */
:root {
	--dands-site-primary: var(--wp--preset--color--site-primary);
	--dands-site-light: var(--wp--preset--color--site-light);
	--dands-site-primary-hover: var(--wp--preset--color--site-primary-hover);
	--dands-site-white: var(--wp--preset--color--white);
	--dands-site-text: var(--wp--preset--color--dands-charcoal);
	--dands-site-border: var(--wp--preset--color--neutral-border);
}

/* Header layout: full-width outer header with a constrained inner container. */
.dands-site-header {
	width: 100%;
	max-width: none;
	background-color: var(--dands-site-primary) !important;
	color: var(--dands-site-white) !important;
}

.dands-site-header > .dands-header-inner {
	width: min(1200px, calc(100% - 32px));
	max-width: none;
	margin-inline: auto;
}

.dands-site-header,
.dands-site-header .dands-site-identity,
.dands-site-header .dands-site-identity *,
.dands-site-header .wp-block-site-title,
.dands-site-header .wp-block-site-tagline {
	color: var(--dands-site-white);
}

.dands-site-header .dands-site-logo img {
	max-height: 72px;
}

/* Keep the site title white even though shared link rules colour ordinary links. */
.dands-site-header .wp-block-site-title a,
.dands-site-header .wp-block-site-title a:visited,
.dands-site-header .wp-block-site-title a:hover,
.dands-site-header .wp-block-site-title a:focus-visible {
	color: var(--dands-site-white) !important;
	text-decoration: none;
}

/* Header logo has deliberate vertical breathing room inside the header. */
.dands-site-header .dands-site-logo {
	padding-block: 12px;
}

/* Default minimum heights; these remain editable on the Header/Footer Group
 * blocks in Appearance > Editor > Patterns > Template Parts. */
.dands-site-header {
	min-height: 120px;
}

.dands-site-footer {
	min-height: 100px;
}


/* Keep the existing logo size while preventing the identity/navigation from collapsing. */
.dands-site-identity {
	min-width: 0;
	flex-shrink: 1;
}

.dands-header-navigation {
	flex-shrink: 0;
	margin-left: 24px;
}

.dands-header-navigation .wp-block-navigation__container {
	gap: 24px;
}

.dands-header-navigation .wp-block-navigation-item {
	margin: 0;
}

/* Header navigation: primary by default, light text on the site-hover colour. */
.dands-header-navigation .wp-block-navigation-item__content,
.dands-header-navigation .wp-block-navigation-submenu__toggle {
	color: var(--dands-site-white) !important;
	background-color: transparent;
	border-radius: 4px;
	transition: background-color 120ms ease, color 120ms ease;
}

.dands-header-navigation .wp-block-navigation-item__content:hover,
.dands-header-navigation .wp-block-navigation-item__content:focus-visible,
.dands-header-navigation .wp-block-navigation-submenu__toggle:hover,
.dands-header-navigation .wp-block-navigation-submenu__toggle:focus-visible {
	color: var(--dands-site-light) !important;
	background-color: var(--dands-site-primary-hover) !important;
}

.dands-header-navigation .wp-block-navigation-item__content:hover,
.dands-header-navigation .wp-block-navigation-submenu__toggle:hover {
	text-decoration: none;
}

.dands-header-navigation .wp-block-navigation-item__content:focus-visible,
.dands-header-navigation .wp-block-navigation-submenu__toggle:focus-visible {
	outline: 3px solid var(--dands-site-light);
	outline-offset: 2px;
}

/* Give nested navigation levels consistent spacing without hard-coding menu items. */
.dands-header-navigation .wp-block-navigation__submenu-container {
	gap: 8px;
	padding: 8px;
	background-color: var(--dands-site-primary) !important;
}

@media (max-width: 782px) {
	.dands-site-header > .dands-header-inner {
		width: calc(100% - 24px);
	}

	.dands-header-navigation {
		margin-left: 16px;
	}

	.dands-header-navigation .wp-block-navigation__container {
		gap: 16px;
	}
}

/* Sticky full-width footer. */
.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
	width: 100%;
}

.dands-site-footer {
	width: 100%;
	margin-block-start: auto;
	background-color: var(--dands-site-primary) !important;
	color: var(--dands-site-white) !important;
}

.dands-site-footer > .dands-footer-inner {
	width: min(1200px, calc(100% - 32px));
	max-width: none;
	margin-inline: auto;
}

.dands-site-footer .dands-footer-content,
.dands-site-footer .dands-footer-content * {
	color: var(--dands-site-white);
}

.dands-site-footer a {
	color: var(--dands-site-white) !important;
}

.dands-site-footer a:hover,
.dands-site-footer a:focus-visible {
	color: var(--dands-site-light) !important;
}

.dands-site-footer a:focus-visible {
	outline: 3px solid var(--dands-site-light);
	outline-offset: 2px;
}

.dands-footer-content {
	width: 100%;
}

.dands-footer-inner > .wp-block-shortcode:last-child {
	margin-inline-start: auto;
}

@media (max-width: 575px) {
	/* Keep standard page content comfortably clear of the phone viewport edges. */
	.dands-page-main {
		padding-inline: 12px;
	}
}

@media (max-width: 782px) {
	.dands-site-footer > .dands-footer-inner {
		width: calc(100% - 24px);
	}

	.dands-footer-content {
		gap: 8px 16px;
	}

	.dands-footer-inner > .wp-block-shortcode:last-child {
		margin-inline-start: 0;
	}
}

/* Front-page navigation card component. */
.dands-front-page-cards {
	width: 100%;
	margin-block: 32px;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dands-front-page-card {
	display: flex;
	flex-direction: column;
	min-height: 180px;
	padding: 24px;
	border: 1px solid var(--dands-site-border);
	border-radius: 4px;
	background-color: var(--dands-site-light) !important;
	color: var(--dands-site-text) !important;
}

.dands-front-page-card .wp-block-buttons {
	margin-block: 0 20px;
}

.dands-front-page-card .wp-block-button__link {
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 4px;
	background-color: var(--dands-site-primary) !important;
	color: var(--dands-site-white) !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.dands-front-page-card .wp-block-button__link:hover {
	background-color: var(--dands-site-primary-hover) !important;
	color: var(--dands-site-light) !important;
}

.dands-front-page-card .wp-block-button__link:focus-visible {
	background-color: var(--dands-site-primary-hover) !important;
	color: var(--dands-site-light) !important;
	outline: 3px solid var(--dands-site-light);
	outline-offset: 3px;
}

.dands-front-page-card__description {
	margin-block: 0;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
	text-align: center !important;
}

.dands-front-page-card__description a {
	color: var(--dands-site-primary);
}

.dands-front-page-card__description a:hover,
.dands-front-page-card__description a:focus-visible {
	color: var(--dands-site-primary-hover);
}

@media (max-width: 991px) {
	.dands-front-page-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.dands-front-page-cards {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-block: 24px;
	}

	.dands-front-page-card {
		min-height: 0;
	}
}

/* Shared links, excluding Button block links. */
.wp-site-blocks a:not(.wp-element-button) {
	color: var(--dands-site-primary);
}

.wp-site-blocks a:not(.wp-element-button):hover,
.wp-site-blocks a:not(.wp-element-button):focus-visible {
	color: var(--dands-site-primary-hover);
}


/* Shared RFA table and pagination presentation.
 * Data/query logic remains in the RFA plugin; these styles are theme-level so
 * every RFA index/event block receives the same visual treatment.
 */
.rfa-index,
.rfa-event-details,
.rfa-event-victims,
.rfa-statistics {
	font-size: 16px;
	line-height: 1.4;
}

.rfa-index .table-responsive,
.rfa-event-details .table-responsive,
.rfa-event-victims .table-responsive,
.rfa-statistics .table-responsive,
.rfa-a-z-navigation,
.rfa-daterange-navigation {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-block: 16px;
}

.rfa-index .table,
.rfa-event-details .table,
.rfa-event-victims .table,
.rfa-statistics .table,
.rfa-a-z-navigation .table,
.rfa-daterange-navigation .table {
	width: 100%;
	min-width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 16px;
	line-height: 1.4;
}

.rfa-index .table th,
.rfa-index .table td,
.rfa-event-details .table th,
.rfa-event-details .table td,
.rfa-event-victims .table th,
.rfa-event-victims .table td,
.rfa-statistics .table th,
.rfa-statistics .table td,
.rfa-a-z-navigation .table th,
.rfa-daterange-navigation .table th,
.rfa-a-z-navigation .table td,
.rfa-daterange-navigation .table td {
	padding: 8px 12px;
	border: 1px solid var(--dands-site-border);
	vertical-align: top;
	text-align: left;
}

.rfa-a-z-navigation .table,
.rfa-daterange-navigation .table {
	width: max-content;
	min-width: 100%;
}

.rfa-index .table thead th,
.rfa-event-victims .table thead th,
.rfa-statistics .table thead th {
	font-weight: 600;
}

.rfa-event-details .table th[scope="row"],
.rfa-statistics .table th[scope="row"] {
	font-weight: 600;
}

.rfa-index .table a,
.rfa-event-details .table a,
.rfa-event-victims .table a,
.rfa-statistics .table a,
.rfa-a-z-navigation .table a,
.rfa-daterange-navigation .table a {
	color: var(--dands-site-primary);
}

.rfa-index .table a:hover,
.rfa-index .table a:focus-visible,
.rfa-event-details .table a:hover,
.rfa-event-details .table a:focus-visible,
.rfa-event-victims .table a:hover,
.rfa-event-victims .table a:focus-visible,
.rfa-statistics .table a:hover,
.rfa-statistics .table a:focus-visible,
.rfa-a-z-navigation .table a:hover,
.rfa-daterange-navigation .table a:hover,
.rfa-a-z-navigation .table a:focus-visible,
.rfa-daterange-navigation .table a:focus-visible {
	color: var(--dands-site-primary-hover);
}

.rfa-index .table a:focus-visible,
.rfa-event-details .table a:focus-visible,
.rfa-event-victims .table a:focus-visible,
.rfa-statistics .table a:focus-visible,
.rfa-a-z-navigation .table a:focus-visible,
.rfa-daterange-navigation .table a:focus-visible {
	outline: 3px solid var(--dands-site-text);
	outline-offset: 2px;
	border-radius: 2px;
}

.rfa-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-block: 24px;
}

.rfa-pagination ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rfa-pagination li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rfa-pagination a,
.rfa-pagination span,
.rfa-pagination strong {
	display: inline-flex;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 12px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--dands-site-border);
	border-radius: 4px;
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
}

.rfa-pagination a {
	background: transparent;
	color: var(--dands-site-primary);
}

.rfa-pagination a:hover {
	background: var(--dands-site-primary-hover);
	border-color: var(--dands-site-primary-hover);
	color: var(--dands-site-light);
	text-decoration: none;
}

.rfa-pagination a:focus-visible {
	background: var(--dands-site-primary-hover);
	border-color: var(--dands-site-text);
	color: var(--dands-site-light);
	outline: 3px solid var(--dands-site-text);
	outline-offset: 2px;
}

.rfa-pagination [aria-current="page"] {
	border-color: var(--dands-site-primary);
	background: var(--dands-site-primary);
	color: var(--dands-site-white);
	font-weight: 600;
}

.rfa-pagination a:active {
	background: var(--dands-site-primary-hover);
	color: var(--dands-site-light);
}

.rfa-pagination a[aria-disabled="true"] {
	background: transparent;
	border-color: var(--dands-site-border);
	color: var(--dands-site-text);
	opacity: 0.55;
	pointer-events: none;
}

@media (max-width: 575px) {
	.rfa-pagination ul {
		gap: 6px;
	}

	.rfa-pagination a,
	.rfa-pagination span,
	.rfa-pagination strong {
		min-width: 44px;
		min-height: 44px;
		padding: 8px 10px;
	}
}


/* Mobile navigation overlay.
 * WordPress supplies the open/close behaviour. These rules keep the overlay
 * visually consistent with the site header and ensure its links remain visible
 * when the responsive menu is opened on phones.
 */
@media (max-width: 782px) {
	.dands-header-navigation .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		flex-direction: column;
		background-color: var(--dands-site-primary) !important;
		color: var(--dands-site-white) !important;
		padding: 24px;
		z-index: 100000;
	}

	.dands-header-navigation .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		margin-top: 48px;
	}

	.dands-header-navigation .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		width: 100%;
	}

	.dands-header-navigation .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content,
	.dands-header-navigation .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-submenu__toggle {
		display: block;
		width: 100%;
		padding: 12px 16px;
		color: var(--dands-site-white) !important;
		background-color: transparent !important;
	}

	.dands-header-navigation .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content:hover,
	.dands-header-navigation .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content:focus-visible,
	.dands-header-navigation .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-submenu__toggle:hover,
	.dands-header-navigation .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-submenu__toggle:focus-visible {
		color: var(--dands-site-light) !important;
		background-color: var(--dands-site-primary-hover) !important;
	}

	.dands-header-navigation .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		color: var(--dands-site-white) !important;
		background: transparent !important;
	}

	.dands-header-navigation .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close:focus-visible {
		outline: 3px solid var(--dands-site-light);
		outline-offset: 2px;
	}

	.dands-header-navigation .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-container {
		background: transparent !important;
		padding: 0 0 0 16px;
	}
}