/* =====================================================================
   MyMapcodes theme: layout and look
   Header, menus, page title band, content area, footer, text pages,
   blog lists, search results and the 404 page.
   Measurements copied from the live site under Mesmerize (14 Nov 2026).
   ===================================================================== */

/* ---------- screen-reader text and the skip link ---------- */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-weight: 700;
	height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000;
}

/* ---------- the page frame ---------- */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.gridContainer { box-sizing: border-box; max-width: 1232px; margin: 0 auto; padding-right: 15px; padding-left: 15px; }
.gridContainer .gridContainer { max-width: 100%; width: 100%; padding-right: 0; padding-left: 0; }
@media only screen and (min-width: 768px) { .gridContainer { width: 90%; } }

/* Flex rows of our own: switch off the base's invisible clearfix boxes inside them. */
.mmt-row::before, .mmt-row::after,
.mmt-footer-links ul::before, .mmt-footer-links ul::after,
#main_menu::before, #main_menu::after,
#main_menu ul::before, #main_menu ul::after,
.mmt-offcanvas ul::before, .mmt-offcanvas ul::after,
.mmt-404-actions::before, .mmt-404-actions::after { content: none; display: none; }

/* ---------- the navy band (logo bar, and the page title on inner pages) ---------- */
.mmt-band { position: relative; background: #081f44; flex: 0 0 auto; }
/* The homepage band was darkened by a 17% black layer in the old theme. */
.mmt-band--home::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; background: #000; opacity: 0.17; z-index: 0; }

.header-top { position: relative; width: 100%; z-index: 100; }
.navigation-bar {
	display: block; width: 100%; position: relative; z-index: 10000;
	padding-top: 1rem; padding-bottom: 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	-webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.navigation-wrapper { padding-left: 5%; padding-right: 5%; }
.mmt-row { display: flex; flex-wrap: wrap; align-items: center; margin-right: -15px; margin-left: -15px; }

/* Logo: the same sizing rules as before (30% of the bar on computers, 80% on phones, never taller than 70px). */
.logo_col { display: flex; align-items: center; text-align: left; padding: 0 15px; flex: 1 0 auto; max-width: 80%; }
@media only screen and (min-width: 768px) { .logo_col { flex: 0 0 auto; max-width: 30%; } }
.logo_col .custom-logo-link { display: inline-block; line-height: 0; text-decoration: none; }
.logo_col img { vertical-align: middle; width: auto; height: auto; max-width: 100%; max-height: 70px; }
/* 1.0.2: give the logo its width before the picture has downloaded. With width and height both "auto" the browser
   can't know the size until the file arrives, so the logo bar was about 23 px shorter at first and every tool below
   it jumped down when the logo appeared. The widths are the ones the img's "sizes" already asks for (300px on phones,
   352px on computers); the height follows from the width and height written on the img, and the 100% / 70px limits
   still apply. object-fit keeps a differently shaped logo from being stretched if it is ever replaced. */
.logo_col img { width: 300px; object-fit: contain; }
@media only screen and (min-width: 768px) { .logo_col img { width: 352px; } }
.logo_col img.logo.dark { display: none; }
.mmt-text-logo { color: #fff; font-family: Muli, sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 1.2; }

.main_menu_col { display: flex; align-items: center; justify-content: flex-end; text-align: left; padding: 0 15px; flex: 1 0 0; max-width: 100%; }

/* ---------- desktop menu (768px and wider) ---------- */
#mainmenu_container { display: none; }
@media (min-width: 768px) { #mainmenu_container { display: flex; margin: 0 -15px; } }
#main_menu { list-style: none; margin: 0; padding: 0 15px; display: flex; flex: 1 0 auto; flex-wrap: wrap; }
#main_menu li { display: block; position: relative; color: #fff; padding: 0.85rem; }
#main_menu li a { display: block; position: relative; text-decoration: none; white-space: nowrap; color: inherit; }
#main_menu > li > a { font-weight: 600; font-style: normal; font-size: 14px; line-height: 160%; letter-spacing: 1px; text-transform: uppercase; }
#main_menu > li:hover > a, #main_menu > li.is-open > a { color: #03a9f4; }
#main_menu > li:not(.current-menu-item):not(.current_page_item):hover > a,
#main_menu > li:not(.current-menu-item):not(.current_page_item).is-open > a { color: #d8d8d8; }
#main_menu > li.current-menu-item > a, #main_menu > li.current_page_item > a { border-bottom: 3px solid #03a9f4; }

/* The small triangles after menu items that open a list. */
.mmt-caret, #main_menu li.menu-item-has-children > a::after {
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'><path d='M0 0h8L4 5z'/></svg>") center / 7px 4px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'><path d='M0 0h8L4 5z'/></svg>") center / 7px 4px no-repeat;
	background-color: currentColor;
}
#main_menu > li.menu-item-has-children > a::after {
	content: ""; display: inline-block; width: 20px; height: 1em; opacity: 0.9;
	vertical-align: middle; margin-left: -0.2em; margin-top: -0.3em;
}
#main_menu > li.menu-item-has-children:hover > a::after,
#main_menu > li.menu-item-has-children.is-open > a::after { transform: rotate(180deg); }
#main_menu ul li.menu-item-has-children > a::after {
	content: ""; position: absolute; right: 1em; top: 0; bottom: 0; width: 20px; height: auto; opacity: 0.9;
	transform: rotate(-90deg);
}

/* Drop-down lists */
#main_menu ul {
	list-style: none; position: absolute; top: 100%; left: 0.85rem; z-index: 10;
	min-width: 200px; margin: 0; padding: 0;
	background-color: #fff; border-radius: 2px; box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.11);
	opacity: 0; visibility: hidden; height: 0; overflow: hidden;
}
#main_menu ul ul { left: 100%; top: 0; margin-left: 5px; }
#main_menu ul ul::before { content: " "; display: block; position: absolute; top: 0; left: -5px; width: 5px; height: 100%; }
#main_menu ul ul.mmt-open-left { left: auto; right: 100%; margin-left: 0; margin-right: 5px; }
#main_menu ul ul.mmt-open-left::before { left: auto; right: -5px; }
#main_menu ul li.mmt-left > a::after { transform: rotate(90deg); }
#main_menu li:hover > ul, #main_menu li:focus-within > ul, #main_menu li.is-open > ul {
	opacity: 1; visibility: visible; height: auto; overflow: visible;
}
#main_menu ul li { padding: 0; color: #6b7c93; font-size: 14px; font-weight: 600; line-height: 120%; }
#main_menu ul li::after {
	content: " "; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
	background-color: rgba(128, 128, 128, 0.2); mix-blend-mode: exclusion;
}
#main_menu ul li:last-of-type::after { display: none; }
#main_menu ul li:hover, #main_menu ul li.is-open { background-color: #f8f8f8; color: #000; }
#main_menu ul li a { padding: 0.75rem 1.5rem; }

/* Keyboard focus is visible on the theme's own links and buttons (the base removes outlines everywhere else). */
#main_menu a:focus-visible, .mmt-menu-button:focus-visible, .mmt-offcanvas a:focus-visible, .mmt-offcanvas button:focus-visible,
.custom-logo-link:focus-visible, .mmt-footer a:focus-visible, .mmt-button:focus-visible, .mmt-post a:focus-visible {
	outline: 2px solid #ff5f1f; outline-offset: 2px;
}

/* ---------- phone menu button ---------- */
.mmt-menu-button {
	display: inline-flex; align-items: center; justify-content: center; position: relative;
	width: 2.5rem; height: 2.5rem; padding: 0; margin: 0; border: 0; border-radius: 50%;
	background: transparent; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mmt-menu-button::before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; border-radius: 50%; background: #000; opacity: 0.1; transition: opacity 0.2s linear; }
.mmt-menu-button:hover::before { opacity: 0.3; }
.mmt-menu-button svg { position: relative; z-index: 1; width: 1.1rem; height: 1.1rem; display: block; fill: currentColor; }
@media (min-width: 768px) { .mmt-menu-button { display: none; } }

/* Phones: once the page scrolls, the logo bar stays at the top in white (as before). */
@media (max-width: 767px) {
	.navigation-bar.is-stuck {
		position: fixed; top: 0; left: 0; right: 0; background-color: #fff; border-bottom: none;
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.33); transform: translateZ(0);
	}
	.navigation-bar.is-stuck .logo_col img.logo.dark { display: inline; }
	.navigation-bar.is-stuck .logo_col img.custom-logo { display: none; }
	.navigation-bar.is-stuck .mmt-text-logo { color: #000; }
	.navigation-bar.is-stuck .mmt-menu-button { color: #000; }
}

/* ---------- phone menu panel ---------- */
.mmt-offcanvas-backdrop {
	position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99998;
	background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s linear;
}
.mmt-offcanvas-backdrop.is-visible { opacity: 1; }
.mmt-offcanvas {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 99999;
	width: min(300px, calc(100vw - 100px)); background-color: #222b34; color: #fff;
	overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
	transform: translateX(100%); transition: transform 0.3s linear; text-align: left;
}
.mmt-offcanvas.is-open { transform: translateX(0); }
.mmt-offcanvas[hidden], .mmt-offcanvas-backdrop[hidden] { display: none; }
.admin-bar .mmt-offcanvas { top: 46px; }
@media (min-width: 783px) { .admin-bar .mmt-offcanvas { top: 32px; } }
.mmt-offcanvas-top { padding: 2rem 0; text-align: center; }
.mmt-offcanvas-top a { display: block; text-decoration: none; color: #fff; font-size: 1.5rem; }
.mmt-offcanvas-top img { display: block; max-width: 80%; height: auto; margin: auto; }
.mmt-offcanvas-close { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; background: transparent; color: #fff; font-size: 26px; line-height: 40px; cursor: pointer; opacity: 0.7; }
.mmt-offcanvas-close:hover { opacity: 1; }
.mmt-offcanvas ul { list-style: none; margin: 0; padding: 0; }
.mmt-offcanvas li { position: relative; color: #fff; border-bottom: 1px solid rgba(128, 128, 128, 0.2); font-size: 0.8rem; transition: background-color 0.1s linear; }
.mmt-offcanvas li a { display: block; position: relative; color: inherit; text-decoration: none; padding: 0.75rem 0 0.75rem 2.5rem; font-size: 0.875rem; line-height: 1; }
.mmt-offcanvas li.mmt-has-toggle > a { padding-right: 3.5em; }
.mmt-offcanvas li a:hover { background-color: rgba(255, 255, 255, 0.1); }
.mmt-offcanvas li.current-menu-item > a, .mmt-offcanvas li.current_page_item > a { background-color: rgba(255, 255, 255, 0.05); }
.mmt-offcanvas li ul { display: none; background-color: rgba(255, 255, 255, 0.2); }
.mmt-offcanvas li.is-open > ul { display: block; }
.mmt-offcanvas li li { border-bottom: 1px solid rgba(128, 128, 128, 0.2); }
.mmt-offcanvas li li:last-child { border-bottom: 0; }
.mmt-offcanvas li > ul > li > a { padding-left: 3.75rem; }
.mmt-offcanvas li > ul > li > ul > li > a { padding-left: 5rem; }
.mmt-offcanvas li.is-open { border-bottom: 0; }
.mmt-offcanvas li.is-open > a, .mmt-offcanvas li.is-open > a:hover { background-color: #fff; color: #2395f6; border-left: 3px solid #2395f6; }
.mmt-submenu-toggle {
	position: absolute; top: 0; right: 0; width: 3.5em; height: 2.5em; min-height: 33px; margin: 0; padding: 0;
	border: 0; background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mmt-submenu-toggle .mmt-caret { display: block; width: 12px; height: 12px; transform: rotate(-90deg); transition: transform 0.3s linear; }
.mmt-offcanvas li.is-open > .mmt-submenu-toggle { color: #2395f6; }
.mmt-offcanvas li.is-open > .mmt-submenu-toggle .mmt-caret { transform: rotate(0deg); }
html.mmt-menu-open, html.mmt-menu-open body { overflow: hidden; }

/* ---------- page title band (inner pages) ---------- */
.header { position: relative; z-index: 0; }
.inner-header-description { position: relative; z-index: 50; text-align: center; }
h1.hero-title {
	color: #fff; margin-bottom: 1.25rem; font-size: 3.5rem; font-weight: 300;
	line-height: 1.14; letter-spacing: 0.9px; overflow-wrap: break-word;
}

/* ---------- content area ---------- */
/* z-index 1 copies Mesmerize (.site > .page-content). .site is a flexbox, so this works without "position":
   it keeps the tools' own layers (z-index 1000 and so on) inside layer 1, under the logo bar (100) and its drop-downs.
   No "position" here: the tools measure from the viewport, as before. */
.site > .page-content { z-index: 1; }
.page-content { flex: 1 0 auto; background-color: #f5fafd; padding-top: 6rem; padding-bottom: 6rem; }
@media (max-width: 768px) { .page-content { padding-top: 3rem; padding-bottom: 3rem; } }
.page-content .content { background-color: #f5fafd; }

/* Images and embeds placed in posts with the block editor */
.mmt-entry .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.mmt-entry .alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.mmt-entry .alignright { float: right; margin: 0 0 1rem 1.5rem; }
.mmt-entry .wp-caption, .mmt-entry figure { max-width: 100%; }
.mmt-entry::after { content: ""; display: table; clear: both; }

/* ---------- footer ---------- */
.footer { background-color: #fff; color: #8e9dae; margin-bottom: -1px; flex: 0 0 auto; }
.footer-simple .footer-content { padding-top: 32px; padding-bottom: 32px; border-top: 1px solid #e8e8e8; text-align: center; }
.mmt-footer-links ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 6px; }
.mmt-footer-links li { display: flex; align-items: center; }
.mmt-footer-links li + li::before { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: #c3cdd8; margin: 0 14px; }
.mmt-footer-links a { color: #082c66; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 600; line-height: 1.6; text-decoration: none; }
.mmt-footer-links a:hover { color: #082c66; text-decoration: underline; text-underline-offset: 3px; }
.footer .copyright { margin: 0; font-size: 14px; line-height: 1.6; color: #5b6776; }

/* ---------- blog lists, search results, single posts ---------- */
.mmt-narrow { max-width: 760px; margin-left: auto; margin-right: auto; text-align: left; }
.mmt-post { background: #fff; border: 1px solid #e3eaf1; border-radius: 10px; padding: 26px 28px; margin-bottom: 20px; }
.mmt-post-title { font-size: 1.5rem; line-height: 1.3; font-weight: 700; margin-bottom: 6px; }
.mmt-post-title a { color: #3c424f; text-decoration: none; }
.mmt-post-title a:hover { color: #082c66; text-decoration: underline; text-underline-offset: 3px; }
.mmt-post-date { display: block; font-size: 13px; color: #6b7a8c; margin-bottom: 12px; }
.mmt-post p { margin-bottom: 12px; }
.mmt-read-more { font-weight: 600; color: #082c66; text-decoration: none; }
.mmt-read-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.mmt-single .mmt-post-date { margin-bottom: 20px; }
.mmt-single .wp-post-image { display: block; margin: 0 0 24px; border-radius: 8px; }
.mmt-single .mmt-entry p, .mmt-single .mmt-entry li { line-height: 1.7; }
.mmt-post-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; font-weight: 600; }
.mmt-post-nav a { color: #082c66; text-decoration: none; }
.mmt-post-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mmt-pagination { margin-top: 24px; text-align: center; }
.mmt-pagination .page-numbers { display: inline-block; min-width: 36px; padding: 6px 10px; margin: 0 2px; border-radius: 8px; color: #082c66; text-decoration: none; font-weight: 600; }
.mmt-pagination .page-numbers.current { background: #082c66; color: #fff; }
.mmt-nothing { text-align: center; }
.mmt-nothing p { margin-bottom: 18px; }
.mmt-search-form { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; }
.mmt-search-form input[type="search"] { flex: 1 1 auto; height: 48px; border: 1px solid #cfd8e3; border-radius: 10px; font-size: 16px; }
.mmt-search-form button { flex: 0 0 auto; height: 48px; padding: 0 20px; border: 0; border-radius: 10px; background: #082c66; color: #fff; font-family: Muli, sans-serif; font-weight: 800; font-size: 15px; cursor: pointer; }

/* ---------- 404 page ---------- */
.mmt-404 { max-width: 560px; margin: 0 auto; text-align: center; }
.mmt-404-card { background: #fff; border: 1px solid #e3eaf1; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(8, 44, 102, 0.08); }
/* The navy map with the dropping orange pin comes from the site's shared sparkle styles (scripts/shared); these two lines keep a plain navy panel if that file is ever missing. */
.mmt-404-map { position: relative; height: 150px; background-color: #082c66; }
.mmt-404-map .mmsp-stage { left: 50%; top: 66%; }
.mmt-404-body { padding: 28px 28px 32px; }
.mmt-404 h2 { font-size: 1.75rem; line-height: 1.25; font-weight: 800; color: #082c66; margin-bottom: 10px; }
.mmt-404 p { font-size: 16px; line-height: 1.55; color: #5f6e80; margin-bottom: 26px; }
.mmt-404-actions { display: flex; flex-direction: column; gap: 10px; }
.mmt-button {
	display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 18px;
	border-radius: 14px; font-family: Muli, sans-serif; font-size: 17px; font-weight: 800; text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.mmt-button-primary { background: #ff5f1f; color: #fff; box-shadow: 0 6px 18px rgba(255, 95, 31, 0.3); }
.mmt-button-primary:hover { background: #f05414; color: #fff; }
.mmt-button-secondary { background: #fff; color: #082c66; border: 2px solid #082c66; }
.mmt-button-secondary:hover { background: #f2f6fb; color: #082c66; }
.mmt-404-contact { display: inline-block; margin-top: 18px; font-weight: 600; color: #082c66; text-decoration: none; }
.mmt-404-contact:hover { color: #082c66; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 480px) { .mmt-404-actions { flex-direction: row; } .mmt-404-actions .mmt-button { flex: 1 1 0; } }

/* Carried over from the old theme's Additional CSS (it was stored with Mesmerize and would be lost on a switch). */
.grecaptcha-badge { visibility: hidden; }