/*
Theme Name: Kenya Embassy Kuwait
Description: Block theme for the Embassy of the Republic of Kenya to the State of Kuwait (accredited to the Kingdom of Bahrain and the Republic of Lebanon). Recreates the layout of the original site with core blocks only.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kenya-embassy-kuwait
Tags: block-theme, full-site-editing, two-columns, accessibility-ready, custom-logo, editor-style
*/

/* Colours, type sizes and spacing are in theme.json; this file holds the
   layout and component rules theme.json cannot express. */

/* -------------------------------------------------------------- page ---- */

body {
	background-color: var(--wp--preset--color--surface);
	background-image:
		repeating-linear-gradient(45deg, rgb(0 0 0 / 3.5%) 0 1px, transparent 1px 8px),
		repeating-linear-gradient(-45deg, rgb(0 0 0 / 3.5%) 0 1px, transparent 1px 8px);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

:where(.kek-navbar, .kek-footer, .kek-news__head) :focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* Header, banner/slider, card and footer sit flush, as on the original. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ------------------------------------------------------------ header ---- */

.kek-masthead {
	padding-top: 15px;
	padding-bottom: 15px;
}

.kek-masthead__inner {
	gap: 15px;
}

.kek-logo img {
	width: 155px;
	height: auto;
}

.kek-masthead__title {
	flex: 1;
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	line-height: 1.1;
	text-transform: uppercase;
}

.kek-social {
	gap: 10px !important;
}

.kek-social .wp-social-link {
	width: 35px;
	height: 35px;
	justify-content: center;
}

.kek-social .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
}

.kek-social .wp-social-link svg {
	width: 16px;
	height: 16px;
	margin: 0;
}

/* -------------------------------------------------------- navigation ---- */

.kek-navbar {
	padding-top: 0;
	padding-bottom: 0;
}

.kek-nav {
	font-size: var(--wp--preset--font-size--base);
	gap: 0;
}

.kek-nav .wp-block-navigation__container {
	gap: 0;
}

.kek-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 15px;
	line-height: 20px;
}

.kek-nav .wp-block-navigation__container > .wp-block-navigation-item:hover,
.kek-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within,
.kek-nav .wp-block-navigation__container > .current-menu-item,
.kek-nav .wp-block-navigation__container > .wp-block-navigation-item:has(.current-menu-item) {
	background-color: var(--wp--preset--color--accent);
}

.kek-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle:not(.wp-block-navigation-item__content) {
	margin-right: 10px;
}

/* dropdowns */
.kek-nav .wp-block-navigation__submenu-container {
	min-width: 230px !important;
	padding: 5px 0;
	color: var(--wp--preset--color--contrast) !important;
	background-color: var(--wp--preset--color--base) !important;
	border: 1px solid rgb(0 0 0 / 15%) !important;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
}

.kek-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 5px 15px;
}

.kek-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.kek-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.kek-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--surface);
}

/* mobile: red menu button, stacked blue menu */
.kek-nav .wp-block-navigation__responsive-container-open {
	margin: 8px 0 8px auto;
	padding: 6px 10px;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--accent);
	border-radius: 4px;
}

.kek-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 15px;
}

.kek-nav .is-menu-open .wp-block-navigation__submenu-container {
	color: var(--wp--preset--color--base) !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none;
}

.kek-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
}

/* ------------------------------------------------------- page layout ---- */

.kek-main {
	padding-top: 0;
	padding-bottom: 0;
}

.kek-banner {
	height: clamp(160px, 34.7vw, 500px);
	margin-bottom: 0;
}

.kek-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kek-card {
	margin-top: 0 !important;
	margin-bottom: 0;
	padding: 10px 15px 80px;
	border-radius: 0 0 10px 10px;
}

.kek-cols {
	gap: 30px;
}

.kek-title {
	margin-top: 8px;
}

.kek-entry > * + * {
	margin-top: 10px;
}

.kek-entry :is(h2, h3, h4) {
	margin: 20px 0 10px;
}

/* "sub-title" headings on the original: small, bold, uppercase. */
.kek-entry .kek-subtitle,
.kek-subtitle {
	margin: 20px 10px 5px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--heading);
	text-transform: uppercase;
}

/* Lists the original showed without bullets (embassy officials, useful links). */
.kek-plain-list {
	padding-left: 0;
	list-style: none;
}

.kek-plain-list li + li {
	margin-top: 6px;
}

.kek-entry .wp-block-table :is(table, td, th) {
	border: 1px solid #808080;
}

.kek-entry .wp-block-table :is(td, th) {
	padding: 4px 8px;
}

.kek-entry p {
	margin-left: 20px;
}

/* The original shows left-floated pictures as small thumbnails beside the text. */
.kek-entry .wp-block-image.alignleft {
	max-width: 200px;
	margin: 15px 15px 10px 0;
}

.kek-entry .wp-block-image.alignleft img {
	width: 100% !important;
	height: auto !important;
}

.kek-entry .wp-block-gallery {
	gap: 5px;
}

.kek-entry .wp-block-media-text {
	margin-bottom: 15px;
}

.kek-entry .wp-block-file {
	margin-left: 20px;
}

.kek-single-image img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------- carousel ---- */
/* Without JS: a native scroll-snap strip. carousel.js adds buttons and
   autoplay and marks the track .is-enhanced. */

.kek-carousel {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	position: relative;
}

.kek-carousel > * {
	box-sizing: border-box;
	flex: 0 0 100% !important;
	width: 100% !important;
	margin: 0 !important;
	scroll-snap-align: start;
}

.kek-carousel.is-enhanced {
	scrollbar-width: none;
}

.kek-carousel.is-enhanced::-webkit-scrollbar {
	display: none;
}

.kek-carousel-wrap {
	position: relative;
}

.kek-carousel-btn {
	position: absolute;
	top: 50%;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	padding: 0;
	font: 700 20px/1 var(--wp--preset--font-family--open-sans);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	background-color: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 2px;
}

.kek-carousel-btn:hover {
	background-color: var(--wp--preset--color--footer);
}

.kek-carousel-btn:nth-child(1) {
	left: 10px;
}

.kek-carousel-btn:nth-child(2) {
	right: 10px;
}

.kek-carousel-btn:nth-child(3) {
	top: auto;
	right: 10px;
	bottom: 10px;
	margin: 0;
	font-size: 11px;
}

/* home slider */
.kek-slider {
	--kek-interval: 7000ms;
	margin: 0 !important;
}

.kek-slider img {
	width: 100%;
	height: clamp(200px, 41vw, 592px) !important;
	object-fit: cover;
}

/* -------------------------------------------------------------- news ---- */

.kek-news {
	padding-bottom: 15px;
}

.kek-news__head {
	margin: 0;
	padding: 12px 20px;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--base);
	text-transform: uppercase;
	background-color: var(--wp--preset--color--news);
}

.kek-news__track {
	--kek-interval: 5000ms;
	padding: 0;
	list-style: none;
}

.kek-news__track > li {
	padding: 15px;
}

.kek-news__title {
	margin: 0 0 15px;
	font-size: var(--wp--preset--font-size--small);
	color: #000;
	text-transform: none;
}

.kek-news__image {
	margin: 0 0 10px;
}

.kek-news__body {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.kek-news__body ul {
	padding-left: 20px;
}

/* the controls in one row under the news (not over the photo) */
.kek-news .kek-carousel-ui {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 8px 0 0;
}

.kek-news .kek-carousel-btn {
	position: static;
	width: 28px;
	height: 26px;
	margin: 0;
	font-size: 16px;
}

.kek-news .kek-carousel-btn:nth-child(3) {
	font-size: 9px;
}


.kek-news__title a {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.kek-news__title a:hover,
.kek-news__title a:focus {
	color: var(--wp--preset--color--title);
	text-decoration: underline;
}

.kek-news__body p {
	display: -webkit-box;
	margin: 0 0 4px;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.kek-news__body .wp-block-post-excerpt__more-text a,
.kek-news__all a {
	font-weight: 600;
	color: var(--wp--preset--color--title);
}

.kek-news__all {
	margin: 10px 20px 0;
	font-size: var(--wp--preset--font-size--small);
	text-align: right;
}

/* news without a photo: the Embassy's coat of arms in the photo's place (functions.php,
   kek_news_no_photo), on white, in the same shape as a photo */
.kek-no-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: var(--wp--preset--color--base);
	border: 1px solid #e3e3e3;
}

.kek-no-photo > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.kek-no-photo .kek-no-photo__logo {
	width: auto;
	max-width: 62%;
	height: auto;
	max-height: 72%;
	object-fit: contain;
}

.kek-news .kek-no-photo {
	margin: 0 0 10px;
}

/* ---------------------------------------------------- latest updates --- */
/* Home page news (patterns/home-news.php): a centred title, a 3-column CSS grid of cards
   (two news: photo + bold title; the public holidays: a list with alternating row colours)
   and a centred button. The "All news" page lists the news with a small photo. */

.kek-section-title {
	margin: 0 0 28px;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--news);
	text-transform: uppercase;
}

.kek-section-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 10px auto 0;
	background: var(--wp--preset--color--accent);
}

.kek-card--home {
	padding-top: 0;                       /* the grey news band starts right under the slider */
}

.kek-card--home:not(:has(.kek-home-content > *)) {
	padding-bottom: 0;                    /* no page text under the news: the band closes the card */
}

.kek-card--home:not(:has(.kek-home-content > *)) .kek-latest {
	margin-bottom: 0;
	border-radius: 0 0 10px 10px;
}

/* the same colours as the boxes beside the pages (news, public holidays): light grey panels
   with square corners, dark blue title bars with white capitals, red buttons */
.kek-latest {
	margin: 0 -15px 30px;
	padding: 36px 30px 34px;
	background: var(--wp--preset--color--base);
}

/* the grid: the news cards (inside the Query Loop) and the holidays card are its items */
.kek-latest__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.kek-latest__news,
.kek-latest__cards {
	display: contents;
}

.kek-latest__cards > .wp-block-post,
.kek-latest__grid > .kek-latest__holidays {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.kek-latest__cards > .wp-block-post {
	padding: 15px 15px 0;                 /* the photo sits inside the grey panel, as beside the pages */
}

.kek-latest__photo {
	margin: 0;
}

.kek-latest__photo img {
	display: block;
	width: 100%;
}

.kek-latest__headline {
	margin: 0;
	padding: 14px 0 18px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.35;
}

.kek-latest__headline a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.kek-latest__headline a:hover,
.kek-latest__headline a:focus {
	color: var(--wp--preset--color--title);
	text-decoration: underline;
}

/* the holidays card */
.kek-latest__grid > .kek-latest__holidays .kek-holidays {
	flex: 1;
	margin: 0;
	padding: 0 0 14px;
	background: none;
}

.kek-latest__grid .kek-holidays__head {
	margin: 0 0 10px;
	padding: 12px 20px;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	color: var(--wp--preset--color--base);
	text-transform: uppercase;
	background: var(--wp--preset--color--news);
}

.kek-latest__grid .kek-holidays__table td {
	padding: 5px 6px;
	font-size: var(--wp--preset--font-size--base);
}

/* call to action */
.kek-latest__all {
	margin: 32px 0 0;
}

.kek-cta {
	display: inline-block;
	padding: 11px 28px;
	font-weight: 700;
	color: var(--wp--preset--color--base);
	text-transform: uppercase;
	text-decoration: none;
	background: var(--wp--preset--color--accent);   /* red, as the controls beside the pages */
	border-radius: 2px;
	transition: background-color .15s ease;
}

.kek-cta:hover,
.kek-cta:focus {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--news);
}

/* the "All news" page: small photo, title, first lines */
.kek-news-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kek-news-archive .kek-news-list > .wp-block-post {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
	padding: 0 0 18px;
	border-bottom: 1px solid #e3e3e3;
}

.kek-news-list__photo {
	margin: 0;
}

.kek-news-list__photo img {
	display: block;
	width: 100%;
}

.kek-news-list__text > * {
	margin: 0;
}

.kek-news-list__headline {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.kek-news-list__headline a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.kek-news-list__headline a:hover,
.kek-news-list__headline a:focus {
	color: var(--wp--preset--color--title);
	text-decoration: underline;
}

.kek-news-archive .wp-block-post-excerpt {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--muted);
}

.kek-news-archive .wp-block-post-excerpt__excerpt {
	margin: 0;
}

@media (max-width: 1000px) {
	.kek-latest__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.kek-latest {
		margin: 0 -10px 24px;
		padding: 28px 16px 26px;
	}

	.kek-latest__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.kek-news-archive .kek-news-list > .wp-block-post {
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 12px;
	}

	.kek-news-list__headline {
		font-size: var(--wp--preset--font-size--base);
	}
}

/* --------------------------------------------------- public holidays --- */
/* parts/public-holidays.html: pinned beside every page (under the news box) and in the
   home page news band. Was a news item on the old site. Compact: one line per holiday. */

.kek-holidays {
	margin: 20px 0 0;
	padding: 0 0 10px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	background: var(--wp--preset--color--surface);
}

.kek-holidays__head {
	margin: 0 0 6px;
	padding: 12px 20px;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--base);
	text-transform: uppercase;
	background-color: var(--wp--preset--color--news);
}

.kek-holidays__table,
.kek-holidays__note {
	margin: 0 15px;
}

.kek-holidays__table table {
	width: 100%;
	border-collapse: collapse;
}

.kek-holidays__table td {
	padding: 4px 6px;
	vertical-align: top;
	border: 0;
}

.kek-holidays__table tr:nth-child(odd) td {
	background: rgba(0, 58, 104, .06);   /* alternating row colours */
}

.kek-holidays__table td:first-child {
	padding-right: 8px;
	color: var(--wp--preset--color--contrast);
}

.kek-holidays__table td:last-child {
	text-align: right;
	white-space: nowrap;
	color: var(--wp--preset--color--muted);
}

.kek-holidays__note {
	margin-top: 6px;
	font-size: 11px;
	color: var(--wp--preset--color--muted);
}


/* ------------------------------------------------------------- footer --- */

.kek-footer {
	padding-top: 30px;
	padding-bottom: 0;
}

.kek-footer__cols {
	gap: 30px;
}

.kek-footer__head {
	margin: 10px 0 15px;
	padding-bottom: 10px;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--accent-light);
	text-transform: uppercase;
	border-bottom: 1px solid #808080;
}

.kek-quicklinks,
.kek-quicklinks .wp-block-navigation__container {
	display: block !important;
}

.kek-quicklinks .wp-block-navigation__container {
	columns: 3 120px;
	column-gap: 20px;
}

.kek-quicklinks .wp-block-navigation-item {
	break-inside: avoid;
	margin-bottom: 6px;
}

.kek-quicklinks .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small);
	color: #e9e9e9;
}

.kek-quicklinks .wp-block-navigation-item__content::before {
	content: "› ";
	color: var(--wp--preset--color--accent-light);
}

.kek-quicklinks .wp-block-navigation-item__content:hover,
.kek-quicklinks .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

.kek-map iframe {
	display: block;
	width: 100%;
	height: 230px;
	border: 0;
}

.kek-map-banner {
	margin: 0;
}

.kek-map-banner .kek-map iframe {
	height: 390px;
}

.kek-contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kek-contact li {
	position: relative;
	margin-bottom: 15px;
	padding-left: 24px;
}

.kek-contact li::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	width: 14px;
	height: 14px;
	background: var(--wp--preset--color--accent-light);
	mask: var(--kek-icon) no-repeat center / contain;
}

.kek-contact__address { --kek-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a5.5 5.5 0 0 0-5.5 5.5C2.5 9.6 8 16 8 16s5.5-6.4 5.5-10.5A5.5 5.5 0 0 0 8 0zm0 8a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.kek-contact__phone { --kek-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 1 6 3.4 4.8 5.6a10 10 0 0 0 5.6 5.6l2.2-1.2L15 12.4 13 15C6.4 14.6 1.4 9.6 1 3z'/%3E%3C/svg%3E"); }
.kek-contact__whatsapp { --kek-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a7 7 0 0 0-6.1 10.4L1 15l3.7-1A7 7 0 1 0 8 1zM5.8 4.5 7 5.7 6.4 6.8a5 5 0 0 0 2.8 2.8l1.1-.6 1.2 1.2-1 1.3C7.2 11.3 4.7 8.8 4.5 5.5z'/%3E%3C/svg%3E"); }
.kek-contact__fax { --kek-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h6l2 2v3H4zM1 7h14v6h-3v2H4v-2H1zm4 4v3h6v-3z'/%3E%3C/svg%3E"); }
.kek-contact__email { --kek-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 3h16v1.2L8 9 0 4.2zm0 2.6 8 4.8 8-4.8V13H0z'/%3E%3C/svg%3E"); }

.kek-contact a,
.kek-footer .kek-contact a {
	color: var(--wp--preset--color--footer-text);
}

.kek-copyright {
	gap: 0 0.4em;
	margin: 20px 0 0;
	padding: 20px 0;
	border-top: 1px solid #808080;
}

.kek-copyright p {
	margin: 0;
}

/* "Copyright … | Designed and Developed by …" on one line, as on the original;
   the bar is decoration only (empty alternative text for screen readers). */
.kek-credit::before {
	content: "| " / "";
}

.kek-copyright a {
	color: var(--wp--preset--color--footer-muted);
	text-decoration: underline;
}

.kek-copyright a:hover,
.kek-copyright a:focus {
	color: var(--wp--preset--color--base);
}

/* ----------------------------------------------------------- mobile ---- */

@media (max-width: 781px) {
	.kek-masthead__inner {
		flex-wrap: wrap !important;
	}

	.kek-logo img {
		width: 90px;
	}

	.kek-masthead__title {
		flex-basis: calc(100% - 110px);
		font-size: var(--wp--preset--font-size--medium);
	}

	.kek-social {
		flex-direction: row !important;
		margin-left: auto;
	}

	.kek-card {
		padding: 10px 10px 40px;
	}

	.kek-entry p {
		margin-left: 0;
	}

	.kek-map-banner .kek-map iframe {
		height: 280px;
	}

	/* the credit wraps onto its own line on phones: no leading bar */
	.kek-credit::before {
		content: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kek-carousel {
		scroll-behavior: auto;
	}
}