:root {
--primary-font: "Roboto", sans-serif;
--secondary-font: "Roboto", sans-serif;
--overlay-font: "Roboto Condensed", sans-serif;
--navigation-font: "Roboto Condensed", sans-serif;
--main-colour: #4a6fa5;
}
/*--------------------------------------
1. Box-sizing & smooth scroll
---------------------------------------*/
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-size: 100%; /* 16px base */
}
:where(*, *::before, *::after) {
box-sizing: inherit;
margin: 0;
padding: 0;
}
/*--------------------------------------
2. Body & base typography
---------------------------------------*/
body {
font-family: var(--primary-font);
font-optical-sizing: auto;
font-size: 1.0rem;
line-height: 1.5;
letter-spacing: 0.02em;
font-weight: 300;
color: #292929;
background-color: #ffffff;
text-rendering: optimizeLegibility;
min-height: 100svh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/*--------------------------------------
3. iOS & touch optimizations
---------------------------------------*/
:where(*) {
-webkit-tap-highlight-color: transparent;
}
/*--------------------------------------
4. Form resets
---------------------------------------*/
textarea,
button,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="email"],
input[type="search"] {
appearance: none;
border: none;
border-radius: 0;
background: none;
font: inherit;
line-height: inherit;
color: inherit;
padding: 0;
margin: 0;
outline: none;
box-shadow: none;
resize: vertical;
}
HEADER {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
HEADER .header {position:relative;}
HEADER .header img.static {width:100%;}
HEADER .header-section {position:relative;display:grid;width:100%;}
FOOTER {
width:100%;
margin:auto;
margin-top:0px;
line-height:142%;
color:#ffffff;
font-size:0.9rem;
background:#7a031e;
}
FOOTER * {color:#ffffff !important;line-height: 175%;}
FOOTER h2 {font-size:14pt;font-weight:600;text-transform: uppercase;}
BODY.home FOOTER {padding-top:0;}
FOOTER a {font-weight:400 !important;color:inherit;text-decoration:none;}
FOOTER SECTION.copyright {font-size:9pt;padding-top:10px;width:100%;margin:auto;padding: 10px 20px;text-align:center;background:#00294b;line-height: 100%;}
FOOTER p.copyright {margin-bottom:0 !important;}
FOOTER p.copyright a {text-decoration:none;}
FOOTER p.copyright a,FOOTER p.footer-links a {color:inherit;}
FOOTER p.footer-links {margin-bottom:0 !important;}
FOOTER SECTION.mumfordconnect {display:block;padding-bottom:10px;padding-top:15px;}
FOOTER SECTION.mumfordconnect img {width:100%;max-width:180px;}
FOOTER .section {margin-bottom:20px;}
FOOTER .section a {font-weight:300;}
FOOTER .footer-widget p {margin-bottom:10px;}
FOOTER SECTION:first-of-type {padding:20px 40px;}
FOOTER DIV.wp-block-columns {margin-bottom:0;}
FOOTER DIV.wp-block-image {margin-bottom:0;}
DIV.footer-top-graphic img {width:100%;vertical-align:bottom;}
SECTION {display:table;clear:both;width:100%;}
IMG.left {float:left;margin-right:20px;margin-bottom:20px;}
IMG.right {float:right;margin-left:20px;margin-bottom:20px;}
IMG.responsive {
max-width: 100%;
height: auto;
}
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption {
display:table !important;
font-size:12px !important;
padding:0px 0px 10px !important;
text-align:center !important;
}
.wp-caption IMG {vertical-align:top;width:100%;height:auto;padding-bottom:10px;}
.wp-caption-text {display:initial;caption-side:bottom;line-height:150%;width:100%;font-size:9pt;}
.wp-block-columns {
column-gap: 40px; /* adjust spacing */
}
.content {
width:100%;
max-width:1250px;
margin:auto;
line-height:inherit;
padding:40px;
font-weight:400;
}
.content ul {overflow:hidden;padding-left:20px;}
.content ul li ul {margin-top:10px;}
.content ol {overflow:hidden;padding-left:20px;}
.content ol li ol {margin-top:10px;}
h1 {
font-size: 2.0rem;
line-height: 1.23em;
font-weight: 700;
font-family: var(--overlay-font);
font-optical-sizing: auto;
color: #292929;
margin: 0 0 1.25rem 0; /* 20px */
position: relative;
display: inline-block;
text-transform:uppercase;
}
/* Base H2 styling */
h2 {
font-size: 1.633rem; /* 22px */
line-height: 1.4em;
font-weight: 400;
font-family: var(--secondary-font);
margin-top: 0;
margin-bottom: 20px;
overflow-wrap: break-word;
text-transform: uppercase;
position: relative;
}
/* Center the underline if H2 is centered */
h2.has-text-align-center::after {
margin-left: auto;
margin-right: auto;
}
h3 {
font-size: 0.8rem; /* 18px */
line-height: 1.2em;
font-weight: 400;
font-family: var(--secondary-font);
letter-spacing: 0.075em;
text-transform: uppercase;
margin-bottom:0.5rem;
}
h4 {
font-size: 0.6rem; /* 12px */
line-height: 1.4em;
font-weight: 400;
font-family: var(--secondary-font);
border-bottom: 1px solid #eaeaea;
padding-bottom: 0.25em;
margin-bottom: 0.5em;
}
.page-header h1 {margin:0;padding:0;}
a {color:#313131;text-decoration:underline;font-weight:inherit;text-decoration:underline;}
a:hover {text-decoration:underline;cursor:pointer;}
.long-link {
word-wrap: break-word; /* Old name, still widely supported */
overflow-wrap: anywhere; /* Modern property */
white-space: normal; /* Allow wrapping */
}
p {margin-top:0;margin-bottom:0.75em;}
p:last-of-type {margin-bottom:0;}
li {padding-bottom:10px}
.no-padding {margin:0;padding:0;}
.no-padding-top {margin-top:0 !important;padding-top:0 !important;}
.no-margin-top {margin-top:0 !important;}
.h2-padding {padding-left:40px;padding-right:40px;padding-top:40px;margin:0;}
#breadcrumbs {font-weight:normal;margin-top:0px;font-size:10pt;color:#7a7a7a;}
#breadcrumbs p {margin-bottom:5px !important;margin-top:0px;color:#7a7a7a;}
#breadcrumbs a {font-weight:normal;text-decoration:none;color:#7f7f7f;}
#breadcrumbs a:hover {text-decoration:underline}
p#breadcrumbs {margin-bottom:5px !important;}
.alignwide,
.alignfull {
margin: 32px calc(50% - 50vw) 0;
max-width: 100vw;
margin-top:0;
}
.is-layout-constrained.alignfull {margin: auto;
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
padding: 40px;}
.is-layout-constrained .wp-block-group__inner-container {width: 100%;max-width: 1170px !important;margin: auto;display: block;
flex-direction: column;
justify-content: center;}
.wp-block-media-text.acadia .wp-block-media-text__content {padding:7%;background:#eeeeee;min-height: 250px;}
.wp-block-media-text.acadia-padding .wp-block-media-text__content {padding:7%;min-height: 250px;}
.site-title {position:absolute;top:0;width:100%;left:0;z-index: 999;text-align:center;margin-top:50px;padding-left:20px;padding-right:20px;}
.site-title img {
max-width: 100%;
height: auto;
}
#header_image {width:100%;display:inline-flex;align-items: center;justify-content: center;height:300px;vertical-align:bottom;background-size:cover;}
#header_image img {width:100%;vertical-align:top;}
BODY.home #header_image {height:800px;}
* {
scrollbar-width: thin;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color:#a7a7a7;
box-shadow: 0 0 1px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
HEADER .logo.section {position:absolute;left:3%;top:10px;z-index:99999999;}
HEADER .logo-container .text {float:left;color:#6c6c6c;font-size:14pt;font-weight:400;margin-top:15px;}
HEADER .logo img {width:auto;width:100%;height:auto;max-width:175px;display:block;padding:0px;}
HEADER .logo a {color:inherit;}
HEADER .logo a:hover {text-decoration: none;}
HEADER .header-image {position:relative;}
.socialmediaicons {width:100%;max-width:1250px;padding-top:0px;padding-bottom:0px;margin:auto;display:flex;z-index:8;position:relative;justify-content: flex-end;padding-top:10px;}
.socialmediaicons h2 {font-size: 1.6rem;font-weight:100;line-height:125%;padding:0;margin:0;margin-bottom:10px;}
.socialmediaicons img {max-width:35px;margin-right:0px;filter:invert(0);}
.socialmediaicons.black img {filter:invert(100%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);}
.socialmediaicons.header {max-width:100%;}
FOOTER DIV.socialmediaicons {justify-content:flex-start;gap:10px;}
HR {border: 0;
height: 1px;
background: #000000;}
hr.thin {width: 100% !important;border:0;height:1px;background:#000000;}
DIV.backtotop {display:table;margin-top:10px;margin-bottom:5px;width:100%;text-align:right;}
DIV.backtotop a.scrollLink {font-size:9pt;}
DIV.backtotop a.scrollLink:before {content: "\02191";font-size:12pt;padding-right:5px;}
#searchform {display:block;margin-top:10px;}
#searchform INPUT {border:1px solid #a7a7a7;padding:5px;}
#searchsubmit {background:#0093d0;color:#ffffff;text-transform: uppercase;border:1px solid #0093d0 !important;}
.fa, .fas {transform: rotate(0.001deg);}
.fas.left {float:left;}
:target::before {
content: "";
display: block;
}
SECTION.content img ~ p {margin-top:10px;}
.socialmediaicons.header {text-align:right;z-index: 9999;margin:initial;width:auto;}
.socialmediaicons.header img {margin-right:0;margin-left:10px;filter: invert(1);}
.wp-element-button {border-radius:15px;}
.header-container {width:100%;max-height:890px;height:auto;overflow:hidden;position:relative;}
a.button {background:#4e3d42;transition:0.2s;}
a.button:hover {background:#000000;transition:0.2s;text-decoration:none;}
a.button-grey {background:#aab7a2;transition:0.2s;}
a.button-grey:hover {background:#000000;transition:0.2s;text-decoration:none;}
DIV.wp-block-button.button a {background:#4e3d42;transition:0.2s;}
DIV.wp-block-button.button a:hover {background:#000000;transition:0.2s;text-decoration:none;}
DIV.wp-block-button.button-grey a {background:#aab7a2;transition:0.2s;}
DIV.wp-block-button.button-grey a:hover {background:#000000;transition:0.2s;text-decoration:none;}
p.button a {color:inherit;text-decoration:none;background:#e3942b;color:#ffffff;padding:10px 20px;display:inline-block;border-radius:10px;padding: 6px 16px;font-weight:400;}
p.button a:hover {background:#3c3b36;transition:0.2s;}
DIV.overlaytext {
display: flex;
z-index: 99;
padding: 40px;
width: 100%;
align-items: center;
color: #142F35;
font-family: var(--overlay-font) !important;
font-size: 37pt;
font-weight: 700;
text-align: center;
justify-content: center;
flex-direction: column;
position:absolute;
}
DIV.overlaytext img {width:auto;max-width:100%;height:auto;}
DIV.overlaytext p {
font-size: 14pt;
line-height: 145%;
color: #ffffff;
font-weight: 600;
margin: 10px 10px;
text-transform: none;
}
DIV.overlaytext p.smaller {font-size: clamp(0.6rem, 1vw + 0.6rem, 1.5rem);}
DIV.overlaytext p.title {font-size:4.8vw;}
DIV.overlaytext a {color:inherit;text-decoration:none;background: #e9eff5;
transition: 0.2s;
border-radius: 25px;
color: #142F35;
padding: 13px 30px;font-size:14pt;font-weight:500;display:inline-block;margin-top: 10px;
letter-spacing: 0.075em;
text-transform: uppercase;
}
DIV.overlaytext a:hover {background:#142F35;transition:0.2s;color:#ffffff;}
DIV.overlaytext img.logo {max-width:200px;width:100%;}
DIV.overlaytext h1 {color:inherit;line-height: 120%;font-weight: 700;font-family: var(--overlay-font) !important;font-size: clamp(3rem, 7vw, 7rem);text-transform: uppercase;}
DIV.overlaytext h1::after {display:none;}
DIV.overlaytext h2 {color:inherit;line-height: 120%;font-weight: 600;text-transform:unset;font-size: clamp(0.5rem, 1vw + 0.5rem, 2.5rem);margin:0; font-family: var(--overlay-font) !important;}
DIV.overlaytext h2::after {display:none;}
DIV.dark-background {color:#ffffff !important;}
/*
#hamburger {height:36px;}
#hamburger #menu-btn {float:right;}
*/
#wpadminbar {z-index: 999999999 !important;}
.menu-container {order:1;position:relative !important;top:0 !important;}
div.wpforms-container {background:#f6f6f6;padding:40px;}
div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) {background-color:#1c3275 !important;}
div.wpforms-container-full input[type=submit], div.wpforms-container-full button[type=submit], div.wpforms-container-full .wpforms-page-button {border-radius:0;}
div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {background: none !important;border:0 !important;padding:0 !important;}
div.wpforms-container-full .wpforms-form label.wpforms-error {color:#ffffff !important;}
.wpforms-confirmation-container-full p {display:block !important;}
div.wpforms-container-full .wpforms-form .wpforms-field-label {font-weight:500 !important;}
.wpforms-submit {background:#264F70 !important;border-radius:25px !important;padding:13px 40px !important;text-transform: uppercase !important;letter-spacing: 0.075em !important;}
.wpforms-submit:hover {background:#8DAEBE !important;transition:0.2s !important;}
DIV.logo-container img {width:100%;height: auto;max-width:50px;}
DIV.logo-container {position: absolute;text-align: center;z-index: 333;margin:0;z-index:9999;top: 20px;right: 80%;}
DIV.logo-container.home {position:relative;padding:0;margin:0;margin-bottom:30px;top:unset;}
DIV.logo-container.home a {background:none;margin-top:0px;}
DIV.logo-container.home img {max-width:300px;}
figure.white img {filter: brightness(0) invert(1);}
.content li a {/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
}
ul li:last-of-type {padding-bottom:0 !important;}
.has-text-align-center {text-align:center !important;}
.is-content-justification-center {text-align:center;}
.wp-block-button {display:grid;}
.no-top-margin {margin-top:0;}
DIV.headergraphic {
overflow: hidden;
display: inline-flex;
position: relative;
width: 100%;
align-items: flex-start;
justify-content: center;
order:10;
}
DIV.wp-block-media-text.spacing DIV.wp-block-media-text__content {padding-top:40px;padding-bottom:40px;}
DIV.contact-form {border-radius: 40px;}
/* Target your Columns block */
.four-columns {
display: grid !important;
grid-template-columns: repeat(4, 1fr); /* default: 4 columns */
gap: 40px; /* spacing between columns */
}
/* Medium screens: 2 columns */
@media (max-width: 1150px) {
.four-columns {
grid-template-columns: repeat(2, 1fr);
}
}
/* Small screens: 1 column */
@media (max-width: 600px) {
.four-columns {
grid-template-columns: 1fr;
}
}
DIV.contact-info {display: inline-flex;width: 100%;margin-top:10px;position:absolute;}
DIV.contact-info * {color:#333;font-weight:400;}
DIV.contact-info DIV.contact-info-inner {max-width: 1250px;margin: auto;display: inline-flex;align-items: center;justify-content: flex-end;width: 100%;z-index:1;padding-bottom:10px;}
DIV.contact-info a {text-decoration:none;}
DIV.contact-info a:hover {text-decoration: underline;}
DIV.contact-info-items {border-bottom:1px solid #000000;display: inline-flex;gap: 20px;padding-bottom: 10px;margin-right: 16px;}
DIV.top-head {background-color:#5c94a5;width:100%;color:#ffffff;line-height:100%;display: inline-flex;justify-content: center;padding:10px 0;}
DIV.top-head DIV.branding-container {width:90%;justify-content: flex-end;max-width:1500px;}
DIV.top-head p {padding:0;margin:0;}
DIV.top-head-inner {display:inline-flex;gap:30px;}
li.book.menu-item {background: #ff7800;border-radius: 15px;}
li.book.menu-item a {color:#ffffff !important;}
/***************************************************************************/
.wp-block-group-is-layout-constrained {
max-width: 1250px;
padding: 40px;
width: 100%;
margin: auto;
}
.wp-block-button__link {background:#264F70;color:#ffffff;letter-spacing: 0.075em;}
.wp-block-columns {margin-bottom:0;}
.section-padding {padding:40px;box-sizing: border-box;overflow-x: hidden;}
.section-padding-20 {padding:20px;}
BUTTON.contact-button {
background: #264F70;
color: #ffffff;
border: 0;
padding: 14px 40px;
border-radius: 22px;
letter-spacing: 0.075em;
text-transform: uppercase;
}
BUTTON.contact-button:hover {cursor:pointer;}
a.contact-button {
background: #264F70;
color: #ffffff;
border: 0;
padding: 10px 40px;
border-radius: 22px;
letter-spacing: 0.075em;
text-transform: uppercase;
}
a.contact-button:hover {cursor:pointer;}
.custom-column-padding {
padding: 40px 40px;
box-sizing: border-box;
}
.grid-spacing {margin-bottom:40px;}
/* Remove space between columns */
.no-gap-columns {
gap: 0 !important;
display: flex; /* Ensure horizontal layout */
}
/* Style for the left column */
.column-left {
padding: 40px;
}
/* Style for the right column */
.column-right {
padding: 40px;
}
/*.testimonials {padding:26px;}*/
div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
text-align:center;
}
BODY.content-padding SECTION.content {padding:0 40px;}
DIV.blog h2 {margin-bottom:10px;}
.metaslider .msHtmlOverlay .layer .content {margin:auto !important; text-shadow: 3px 4px 7px rgba(0,0,0,1);}
.frontpage-slideshow {position:relative;max-height:650px;overflow:hidden;display: inline-flex;width:100%;flex-direction: column;align-items: center;justify-content: flex-start;text-align: center;vertical-align: top;z-index:1;}
.circle-icon-blue {background:#305cde !important;width:130px !important;height:130px !important;display: flex !important;margin: 0 auto !important;margin-bottom:20px !important;}
.circle-icon-blue img {display: block !important;
margin: 0 auto !important;padding:10px;}
.frontpage-slideshow .overlaytext {height:100%;color:#ffffff;}
@media (max-width: 500px){
.frontpage-slideshow .overlaytext {display:none;}
.slideshow-overlay {display:none;}
}
/* Add padding around text on mobile */
@media (max-width: 768px) {
.banner-text {
padding-left: 20px; /* space from left edge */
padding-right: 20px; /* space from right edge */
}
}
.slideshow-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4); /* black with 40% opacity */
pointer-events: none; /* allows clicks to go through to slideshow */
z-index: 2; /* on top of slides but under any text you want to add */
}
.top-header-container {
display: flex;
align-items: center;
justify-content: space-between; /* pushes left branding + right menu apart */
margin:auto;
width:100%;
z-index:9;
justify-content: center;
background:#4a6fa5;
}
.branding-container {
display: flex;
align-items: center;
gap: 10px; /* space between logo and site title */
width:100%;
max-width:1200px;
margin:auto;
}
.branding-container img {
height: 90px; /* adjust logo size */
width: auto;
vertical-align: bottom;
}
.site-title-header {
font-size: 1.3rem;
margin: 0;
}
.site-title-header a {
text-decoration: none;
color: inherit;
}
.rounded-box {border-radius:25px;color:#fee8b0;padding: 0 30px;font-size:1.5rem;line-height:2rem;}
.rounded-box h2 {font-weight:400;font-size: 2.633rem;line-height: 1.2em;}
.rounded-box .wp-element-button {background:#3b4b08 !important;}
.rounded-box .wp-element-button:hover {background:#000000 !important;transition:0.2s;}
.rounded-box a {color:#fee8b0 !important;}
.flex-control-nav {bottom:-50px !important;}
/*** Responsive CSS **********************************************************************************/
@media (min-width: 1200px){
/*
DIV.overlaytext h1 {font-size: 32pt;width: 75%;}
DIV.overlaytext h2 {font-size: 19pt;width: 75%;}
*/
}
@media (max-width: 500px){
.wp-caption {
/* Force the box to be 100% */
width: 100% !important;
}
#content .wp-caption a img {
/* Scale down if too big */
max-width: 99.03225806%; /* 614/620 */
height: auto;
}
.wp-caption IMG {padding-bottom:0;}
h1 {text-align:center;}
h1::after {margin: 8px auto 0;}
}
@media screen and (max-width: 1280px) {
HEADER .logo.section {margin-left:0px;}
DIV.overlaytext img.logo {max-width:18vw;width:100%;}
}
@media screen and (max-width: 1280px) {
DIV.overlaytext img {width:75%;}
}
@media screen and (max-width: 1200px) {
.socialmediaicons.header a:first-of-type img {margin-left:0;}
.socialmediaicons.header img {filter: invert(0);}
}
@media screen and (max-width: 1050px) {
HEADER .logo.section {text-align:center;float:none;margin-top:30px;}
HEADER .contact {display:none;}
HEADER .logo img {margin:auto;}
DIV.overlaytext {font-size: 4.5vw;}
}
body.mobile-view DIV.contact-info {position:relative;margin-top:0;background:#4e3d42;}
body.mobile-view DIV.contact-info * {color:#ffffff;}
body.mobile-view DIV.contact-info DIV.contact-info-inner {justify-content: center;padding: 10px;}
body.mobile-view DIV.contact-info-items {border-bottom:0;gap: 10px;padding-bottom: 0px;margin-right:0;flex-direction: column;justify-content: center;align-items: center;}
body.mobile-view DIV.logo-container {left:0;width:100%;z-index:6;background:#4e3d42;position:static;}
body.mobile-view DIV.logo-container img {
max-width: 125px;
/*background: white;
border-radius: 50%;
padding: 4px;*/
vertical-align: bottom;
margin: 6px;
filter: invert(0);
}
body.mobile-view .top-header-container {display:block;height:10px;}
body.mobile-view .branding-container {width:100%;justify-content: center;}
/*
@media screen and (max-width: 800px) {
DIV.contact-info {position:relative;margin-top:0;background:#4e3d42;}
DIV.contact-info * {color:#ffffff;}
DIV.contact-info DIV.contact-info-inner {justify-content: center;padding: 10px;}
DIV.contact-info-items {border-bottom:0;gap: 10px;padding-bottom: 0px;margin-right:0;flex-direction: column;justify-content: center;align-items: center;}
DIV.logo-container {left:0;width:100%;z-index:6;background:#4e3d42;position:static;}
DIV.logo-container img {
max-width: 125px;
background: white;
border-radius: 50%;
padding: 4px;
}
}
*/
@media screen and (max-width: 780px) {
FOOTER .footer-widget .wp-block-image .alignright {float:unset;margin:auto !important;}
FOOTER .footer-widget .wp-block-column {text-align:center;}
DIV.mobile-align-center * {text-align:center !important;margin-left:auto !important;margin-right:auto !important;}
FOOTER DIV.socialmediaicons {justify-content:center;}
DIV.keep-gap {gap:40px !important;}
.grid-spacing {margin-bottom:0px;}
.grid-spacing div.wp-block-column {margin-bottom:40px;}
FOOTER .has-text-align-right {text-align:center;}
}
@media screen and (max-width: 768px) {
.custom-column-padding {
padding: 20px 15px;
}
h2 {
display: block; /* allow centering */
text-align: center;
}
h2::after {
margin-left: auto;
margin-right: auto;
}
.no-gap-columns {flex-direction: column;}
}
@media screen and (max-width: 730px) {
.mobile-nav {z-index:99999999 !important;}
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.aligncenter, .wp-block-image.alignleft, .wp-block-image.alignright {
display: table;
float: none !important;
padding: 0;
margin: auto !important;
}
}
@media screen and (max-width: 650px) {
.contact-form {margin: 1.125rem 0 5.375rem 0;
background: #efefef;
padding: 1rem 2rem 1rem 2rem;
position: relative;
margin-bottom: 35px;
}
img ~ ul {width:100%;}
/* img.alignleft {clear:both;float:none;display:table;}*/
DIV.images_block {width:100%;}
DIV.contact {padding:20px;}
#header_image {height:200px;}
BODY.home #header_image {height:650px;background-position: center !important;}
}
@media screen and (max-width: 600px) {
HEADER .logo-container .text {float:none;text-align:center;}
.socialmediaicons img {margin-right:5px;margin-left:5px;}
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {margin-bottom:0px;}
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {padding:0;padding-top:20px;padding-bottom:20px;}
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content h1 {text-align:center;}
/*.wp-block-media-text.is-stacked-on-mobile {padding-top: 40px;}*/
DIV.wp-block-media-text.spacing DIV.wp-block-media-text__content {padding-top:20px;padding-bottom:20px;}
.is-layout-constrained .wp-block-group__inner-container {padding:40px 0;}
DIV.overlaytext a, DIV.overlaytext p {display:none;}
}
@media screen and (max-width: 550px) {
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.aligncenter, .wp-block-image.alignleft, .wp-block-image.alignright {
display: table;
float: none !important;
padding: 0;
margin: auto !important;
}
SECTION.content .socialmediaicons img {max-width:35px !important;display: inherit;
margin-right: 3px;
margin-left: 3px;}
}
@media screen and (max-width: 500px) {
h1.entry-title {text-align:center;width:100%;}
div.wpforms-container {padding:20px;}
DIV.overlaytext a {font-size:12pt;margin-top:25px;}
p.smaller {margin-bottom:0 !important;padding-bottom:0;}
DIV.logo-container.home {margin-bottom:15px;}
DIV.overlaytext {padding:30px;}
DIV.overlaytext h1 {font-size:18pt;margin-bottom:10px;}
DIV.overlaytext p {font-size:12pt;}
DIV.contact-info DIV.contact-info-inner {flex-direction: column;gap:5px;}
}
@media screen and (max-width: 480px) {
SECTION .feature img {margin-bottom:0 !important;}
HEADER .contact {position:relative;top:0;right:0;text-align:center;}
IMG.alignright,IMG.alignleft {margin:0;text-align:center;}
FOOTER {padding-bottom:0;}
.site-title-header {font-size: 1.0rem;}
.rounded-box {font-size:1.1rem;line-height:1.8rem;}
.rounded-box h2 {font-size: 2.13rem;line-height: 1.2em;}
}
/* ===============================
Latest Blogs Container
=============================== */
.latest-blogs {
display: flex;
flex-wrap: wrap;
gap: 30px;
list-style: none;
padding: 0 15px !important; /* space on sides for borders */
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
/* ===============================
Blog Card
=============================== */
.latest-blogs li {
flex: 1 1 0; /* flexible on desktop */
max-width: 32%; /* 3 cards per row */
box-sizing: border-box;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: transform 0.3s, box-shadow 0.3s;
}
/* Hover effect */
.latest-blogs li:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
/* ===============================
Image Wrapper & Image
=============================== */
.latest-blogs .wp-block-latest-posts__featured-image {
width: 100%;
height: 200px; /* fixed height */
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.latest-blogs .wp-block-latest-posts__featured-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
display: block;
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s ease;
}
/* Image zoom on hover */
.latest-blogs li:hover .wp-block-latest-posts__featured-image img {
transform: scale(1.05);
}
/* ===============================
Post Content Styling
=============================== */
.latest-blogs .wp-block-latest-posts__post-title {
font-size: 1.2rem;
font-weight: 600;
color: #222;
margin: 15px;
}
.latest-blogs .wp-block-latest-posts__post-date {
font-size: 0.85rem;
color: #666;
margin: 0 15px 10px 15px;
}
.latest-blogs .wp-block-latest-posts__post-excerpt {
font-size: 0.95rem;
color: #333;
margin: 0 15px 15px 15px;
line-height: 1.5;
flex-grow: 1; /* ensures uniform card height */
}
.latest-blogs .wp-block-latest-posts__read-more {
font-weight: 600;
color: #0073aa;
text-decoration: none;
margin-bottom: 15px;
}
.latest-blogs .wp-block-latest-posts__read-more:hover {
color: #005177;
}
.tagline {line-height:150%;}
/* ===============================
Responsive Layout
=============================== */
/* Mobile: 1 column stacked */
@media (max-width: 780px) {
.latest-blogs li {
flex: 0 0 100%;
max-width: 100%;
}
FOOTER SECTION:first-of-type {padding:0px;}
.copyright {padding:20px 0 !important;}
}
.next-event {position:absolute;bottom:20px;color:#ffffff;text-align: left;display: inline-flex;width: 100%;z-index:9;max-width:1400px;}
.next-event-container {padding:20px;color:#ffffff;text-align:left;}
.event-date-time {font-size:15pt;}
.event-title {font-size:20pt;font-weight:600;}
a.event-link {color:#ffffff;text-decoration:none;}
.top-header-container.top-bar {z-index:11;}
.top-header-container.top-bar .header-inner {padding:0;}
/* Mobile: 1 column stacked */
@media (max-width: 780px) {
.next-event {position:relative;bottom:0;background:#d3bf96;z-index:2;}
.event-date-time {font-size:12pt;}
.event-title {font-size:15pt;}
}
/* iPad / iOS Safari only */
@supports (-webkit-touch-callout: none) {
.wp-block-media-text__media {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.wp-block-media-text__media img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-object-fit: cover;
object-position: center center;
}
}
/* --- Apply your font site-wide for The Events Calendar --- */
.tribe-events,
.tribe-events * {
font-family: "Lustria", serif !important;
/* optional: adjust base font size if needed */
font-size: 1rem;
}
/* Optional: make headings use your font too */
.tribe-events h1,
.tribe-events h2,
.tribe-events h3,
.tribe-events h4,
.tribe-events h5,
.tribe-events h6 {
font-family: "Lustria", serif !important;
}
/* Blog CSS *****************************************************************************/
/* Grid layout */
.blog-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
/* Card */
.blog-card {
background: #fff;
border: 1px solid #eee;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
/* Card image wrapper */
.blog-card-image {
display: block;
width: 100%;
height: 220px; /* set consistent image height */
overflow: hidden; /* hide overflow for clean crop */
}
/* Featured image */
.blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover; /* fills area, crops if needed */
display: block;
}
/* Content */
.blog-card-content {
padding: 1rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* Title */
.blog-card-title {
font-size: 1.2rem;
margin: 0 0 0.5rem;
}
.blog-card-title a {
text-decoration: none;
color: inherit;
}
/* Meta */
.blog-card-meta {
font-size: 0.85rem;
color: #777;
margin-bottom: 0.5rem;
}
/* Excerpt */
.blog-card-excerpt {
font-size: 0.95rem;
flex-grow: 1;
}
/* Pagination spacing */
.nav-links {
margin-top: 3rem;
}
/* Responsive */
@media (max-width: 1024px) {
.blog-card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.blog-card-grid {
grid-template-columns: 1fr;
}
}
/* Allow long links to break onto multiple lines */
a {
white-space: normal; /* allow wrapping */
word-break: break-word; /* break long words/URLs */
overflow-wrap: anywhere; /* modern property to force breaks */
}
form.search {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
max-width: 800px;
font-size: initial;
font-weight: 400;
position: relative;
z-index:10;
}
form.search input {color:#222222;}
.search-field {
padding: 5px 10px;
font-size: 14px;
}
.search-submit {
background: none;
border: none;
cursor: pointer;
padding: 5px;
display: flex;
align-items: center;
}
.search-submit svg {
width: 18px;
height: 18px;
fill: #333; /* magnifying glass color */
}
.search-inner {
display: inline-flex;
background: #ffffff;
border-radius: 5px;
padding: 10px;
width: 100%;
max-width: 600px;
border:1px solid #dadada;
}
.search-inner label {
flex: 1; /* take all remaining space */
display: flex; /* make input fill label */
}
.search-inner input.search-field {
flex: 1; /* fill the label */
width: 100%; /* fallback */
box-sizing: border-box; /* include padding in width */
}
.feature-boxes {
align-items: center;
justify-content: center;
}
.feature-boxes h3 {font-size:11pt;margin: 0;}
a.feature-box {border:0;color:#003c4b;background:#ffffff;border-radius:5px;max-width:150px;text-decoration: none;}
.material-symbols-rounded {font-weight:400;font-size:60px;}
.feature-boxes {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
/* Make all boxes equal height */
.feature-box {
flex: 1 1 200px; /* base width, can shrink/grow */
display: flex; /* flex for internal alignment */
flex-direction: column; /* stack icon + title */
align-items: center; /* center horizontally */
text-align: center;
padding: 20px;
border: 1px solid #eee;
border-radius: 12px;
text-decoration: none;
color: #333;
transition: transform 0.2s, box-shadow 0.2s;
}
/* Force all boxes in a row to have equal height */
.feature-boxes {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: stretch; /* makes children equal height */
}
.feature-box .material-icons-outlined {
font-size: 48px;
margin-bottom: 10px;
color: #0073aa;
}
.feature-box h2 {font-weight:500;}
BODY.home .feture-boxes-container {
position: relative;
display: block;
order: 10;
z-index: 8;
padding: 0 20px;
}
BODY.home.mobile-view .feture-boxes-container {top:20px;}
body.mobile-view .feature-box {padding:10px;top: 20px;}
BODY.home.mobile-view a.feature-box {max-width:125px;}
BODY.home.mobile-view .feature-boxes h3 {font-size:10pt;}
.topcontactinfo {
display: flex;
flex-direction: column;
gap: 0;
width:100%;
}
.topcontactinfo p {margin:0;padding:0;}
BODY.mobile-view .topcontactinfo {display:none !important;}
.quick-link {
background: #1c2541;
color: #ffffff;
border: 0;
}
.quick-link .ql-icon {color:#ffffff;}
.quick-link:hover {text-decoration: none;background:#646566;border:0;}
@media (max-width: 500px){
.quick-link {width: 100%;max-width: none;}
}
.village-alerts-bar {
display: flex;
width: 100%;
color: white;
order:8;
}
.village-alerts-left {
background-color: #dc8600;
color: #2B1A00; /* readable on gold */
padding: 0 15px;
display: flex;
align-items: center;
padding: 10px 40px;
font-weight:500;
}
.village-alerts-left a {color:#2B1A00;}
.village-alerts-right {
background-color: #7a031e;
flex-grow: 1;
padding:10px;
font-size:17pt;
}
.sn-rotate-item a {font-weight:300;}
BODY.mobile-view .village-alerts-bar {flex-direction: column;text-align:center;}
BODY.mobile-view .village-alerts-left {justify-content: center;}
.sn-notice-rotation-advanced a {
display: inline-block;
white-space: nowrap; /* prevent wrapping */
overflow: hidden; /* hide overflow */
text-overflow: ellipsis; /* show "..." when too long */
max-width: 100%; /* ensure it respects container width */
}
@media (max-width: 480px) {
.sn-notice-rotation-advanced a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
table td, table th {
word-break: normal !important; /* Don't break words in the middle */
overflow-wrap: normal; /* Don't force wrap inside words */
}
/* Base table styling */
.wp-block-table {
width: 100%;
border-collapse: collapse;
}
.wp-block-table th,
.wp-block-table td {
padding: 8px;
border: 1px solid #ccc;
text-align: left;
word-break: normal;
overflow-wrap: normal;
}
/* Mobile-friendly: stack rows into cards */
@media (max-width: 768px) {
.wp-block-table thead {
display: none;
}
.wp-block-table tr {
display: block;
margin-bottom: 15px;
border: 1px solid #ddd;
}
.wp-block-table td {
display: flex;
justify-content: space-between;
padding: 10px;
border: none;
border-bottom: 1px solid #eee;
background: #f9f9f9;
}
.wp-block-table td::before {
content: attr(data-label);
font-weight: 600;
margin-right: 15px;
}
}
/* Optional: add a subtle background to each "card" */
@media (max-width: 768px) {
.wp-block-table td {
background: #f9f9f9;
}
/* Thicker border below the last cell of each row */
.wp-block-table tr td:last-child,
.wp-block-table tr th:last-child {
border-bottom: 3px solid #333; /* adjust thickness & color */
}
}
BODY.fire-department .top-header-container {background-color: rgb(119 24 5 / 100%);}
SECTION.firedepartment h1::after {background-color: #b32307;}
SECTION.firedepartment ~ FOOTER .overlay {background-color: rgb(119 24 5 / 90%);}
.news-date {font-size:9pt;line-height:140%;margin-bottom:10px;}
.all-news {text-align:center;}
ul.mcc-upcoming-events-list {padding-left:0 !important;}
.bp-documents ul {margin-bottom:20px;}
/* Container - full width */
.bp-documents {
width: 100%;
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Category headings */
.bp-documents h3 {
font-size: 1.6rem;
margin: 40px 0 15px;
padding-bottom: 8px;
border-bottom: 2px solid #e5e5e5;
color: #222;
}
/* List reset */
.bp-documents ul {
list-style: none;
padding: 0;
margin: 0;
}
/* Each document item */
.bp-documents li {
width: 100%;
background: #ffffff;
border: 1px solid #eaeaea;
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 12px;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Hover effect — no transform */
.bp-documents li:hover {
border-color: #d0d0d0;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.bp-documents li:last-of-type {
padding-bottom: 12px !important;
}
/* Document link */
.bp-documents li a {
display: block;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
color: #1a1a1a;
}
/* Hover link */
.bp-documents li a:hover {
color: #0073aa;
}
/* Mobile adjustments */
@media (max-width: 480px) {
.bp-documents li {
padding: 14px;
}
.bp-documents h3 {
font-size: 1.3rem;
}
}
#poi-map {z-index:1;}
/* Breadcrumbs **********************************************************/
.menu-breadcrumbs {
font-size: 14px;
margin-bottom: 20px;
}
.menu-breadcrumbs > *:last-child {
font-weight: bold;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
ul + p, p+ul {margin-top:20px;}
/* Search **********************************************************/
DIV.search-results-page {
max-width: 1150px;
margin: 0 auto;
}
#search-results {
max-width: 100%;
margin: 0 auto;
}
#search-results h2 {text-align:left;}
.search-header {
margin-bottom: 35px;
}
.search-header h1 {
display: block;
margin-bottom: 20px;
}
.search-header strong {
color: #264F70;
}
.search-header-form {
max-width: 700px;
}
DIV.search-results {
display: grid;
gap: 24px;
}
.search-card {
display: grid;
grid-template-columns: 220px 1fr;
gap: 0;
align-items: stretch;
background: #ffffff;
border: 1px solid #e5edf4;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.search-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 38px rgba(15, 23, 42, 0.1);
}
.search-card-image {
display: block;
width: 100%;
min-height: 190px;
background: #edf3f8;
overflow: hidden;
text-decoration: none;
}
.search-card-image img {
width: 100%;
height: 100%;
min-height: 190px;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.search-card:hover .search-card-image img {
transform: scale(1.04);
}
.search-card-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
}
.search-card-image-placeholder span {
width: 72px;
height: 72px;
border-radius: 50%;
background: #264F70;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
}
.search-card-content {
padding: 24px;
}
.search-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
font-size: 0.85rem;
color: #64748b;
}
.search-post-type {
background: #e8f0f7;
color: #264F70;
padding: 4px 10px;
border-radius: 999px;
font-weight: 600;
}
.search-title {
margin: 0 0 10px;
font-size: 1.35rem;
line-height: 1.3;
}
.search-title a {
color: #1f2933;
text-decoration: none;
}
.search-title a:hover {
color: #264F70;
text-decoration: underline;
}
.search-excerpt {
color: #334155;
line-height: 1.6;
margin-bottom: 18px;
}
.search-readmore {
display: inline-flex;
align-items: center;
justify-content: center;
background: #264F70;
color: #ffffff;
padding: 9px 18px;
border-radius: 999px;
text-decoration: none;
font-weight: 600;
}
.search-readmore:hover {
background: #00294b;
color: #ffffff;
text-decoration: none;
}
.search-pagination {
margin-top: 35px;
}
/*
.search-no-results {
background: #f8fafc;
padding: 32px;
border-radius: 18px;
border: 1px solid #e2e8f0;
}
.search-no-results h2 {
margin-bottom: 12px;
}
*/
@media (max-width: 750px) {
.search-card {
grid-template-columns: 1fr;
}
.search-card-image,
.search-card-image img {
min-height: 220px;
}
.search-card-content {
padding: 22px;
}
}
/* Modal overlay */
.search-modal {
display: none;
position: fixed;
inset: 0; /* top:0; right:0; bottom:0; left:0 */
background: rgba(0,0,0,0.6);
justify-content: center; /* horizontal centering */
align-items: flex-start; /* vertical alignment controlled below */
z-index: 9999;
padding-top: 15vh; /* 1/3 from top */
}
/* Modal content box */
.search-modal-content {
background: #fff;
padding: 2rem;
border-radius: 8px;
width: 90%;
max-width: 400px;
display: flex;
flex-direction: column;
gap: 0;
position: relative;
}
/* Close button */
.search-modal-close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
/* Show modal when active */
.search-modal.active {
display: flex;
}
.search-modal h2 {font-size:14pt;}
.menu-item-search .nav-search-toggle svg {
color: #ffffff; /* white */
width: 20px; /* optional size adjustment */
height: 24px;
vertical-align: middle;
}
#header_image .firefighters-header-logo img {
position: absolute;
left: 4%;
height: 90%;
width: auto;
top: 4%;
}
@media screen and (max-width: 480px) {
.fc-header-toolbar .fc-button-group:last-child {display:block !important;}
.fc-dayGridMonth-button, .fc-listMonth-button {display:none !important;}
}
/* ---------------------------------------------------------
Header: logo and menu in same row
Added to replace the old separate top-header menu bar
--------------------------------------------------------- */
.top-bar {
width: 100%;
background: #fff;
position: relative;
z-index: 20;
}
.top-bar-inner {
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
box-sizing: border-box;
}
.top-bar .branding-container {
flex: 0 0 auto;
width: auto;
max-width: none;
margin: 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
.top-bar .menu-container {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: flex-end;
}
.top-bar .main-nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0px;
margin: 0;
padding: 0;
list-style: none;
}
/* ---------------------------------------------------------
Top utility bar
Contains top-menu and Google Translate
--------------------------------------------------------- */
.utility-top-bar {
width: 100%;
background: #00294b;
color: #ffffff;
position: relative;
z-index: 3;
order: 0;
}
.utility-top-bar-inner {
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 8px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
box-sizing: border-box;
}
.top-menu-container {
flex: 1 1 auto;
min-width: 0;
}
.top-menu {
display: flex;
align-items: center;
justify-content: end;
gap: 18px;
list-style: none;
margin: 0;
padding: 0;
}
.top-menu li {
margin: 0;
padding: 0;
}
.top-menu a {
color: #ffffff;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
}
.top-menu a:hover {
text-decoration: underline;
}
.translate-container {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
}
/* Google Translate dropdown cleanup */
.translate-container select,
.goog-te-combo {
max-width: 180px;
padding: 4px 8px;
border-radius: 4px;
border: 0;
font-size: 0.85rem;
background: #ffffff;
color: #222222;
}
/* Hide Google Translate extra branding/banner bits where possible */
.goog-logo-link,
.goog-te-gadget span {
display: none !important;
}
.goog-te-gadget {
color: transparent !important;
font-size: 0 !important;
}
.goog-te-gadget .goog-te-combo {
margin: 0 !important;
}
@media (max-width: 700px) {
.utility-top-bar-inner {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
.top-menu {
justify-content: center;
flex-wrap: wrap;
gap: 10px 16px;
}
.translate-container {
justify-content: center;
}
}
/* Header search bar over slideshow */
.header-searchbar {
position: absolute;
z-index: 99;
left: 50%;
bottom: 60px;
transform: translateX(-50%);
width: calc(100% - 40px);
max-width: 600px;
}
.header-search-form {
width: 100%;
display: flex;
align-items: center;
background: #ffffff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}
.header-search-field {
flex: 1;
width: 100%;
padding: 14px 18px;
border: 0;
background: #ffffff;
color: #222222;
font-size: 1rem;
outline: none;
margin-left:25px !important;
}
.header-search-field::placeholder {
color: #666666;
}
.header-search-submit {
flex: 0 0 auto;
width: 54px;
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #7a031e;
color: #ffffff;
border: 0;
cursor: pointer;
}
.header-search-submit:hover {
background: #00294b;
transition:0.3s;
}
.header-search-submit svg {
display: block;
}
@media (max-width: 600px) {
.header-searchbar {
bottom: 25px;
max-width: none;
}
.header-search-field {
padding: 12px 15px;
font-size: 0.95rem;
}
.header-search-submit {
width: 48px;
height: 48px;
}
}
.sn-notice-rotation-advanced {text-align:center;min-height: 1.4em;}
.village-alerts-right {font-size:14pt;}
/* Modern WordPress File Block */
.wp-block-file {
--file-card-bg: #ffffff;
--file-card-border: #dbe6ee;
--file-card-text: #243746;
--file-card-muted: #607282;
--file-card-blue: #264f70;
--file-card-blue-hover: #1f425f;
--file-card-soft-blue: #f2f7fa;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin: 1.25rem 0;
padding: 1rem;
background: var(--file-card-bg);
border: 1px solid var(--file-card-border);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(38, 79, 112, 0.08);
}
/* File name link */
.wp-block-file > a:not(.wp-block-file__button) {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.65rem;
color: var(--file-card-text);
font-weight: 700;
font-size: 1rem;
line-height: 1.4;
text-decoration: none;
}
/* File icon */
.wp-block-file > a:not(.wp-block-file__button)::before {
content: "";
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 12px;
background-color: var(--file-card-soft-blue);
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 2h7l5 5v15H7V2Z' stroke='%23264f70' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M14 2v6h5' stroke='%23264f70' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9.5 13h5M9.5 17h5' stroke='%23264f70' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 24px 24px;
}
.wp-block-file > a:not(.wp-block-file__button):hover {
color: var(--file-card-blue);
text-decoration: underline;
text-underline-offset: 4px;
}
/* Download button */
.wp-block-file .wp-block-file__button {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0.7rem 1rem;
border-radius: 999px;
background: var(--file-card-blue);
color: #ffffff !important;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
box-shadow: 0 6px 16px rgba(38, 79, 112, 0.22);
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-file .wp-block-file__button:hover,
.wp-block-file .wp-block-file__button:focus {
background: var(--file-card-blue-hover);
color: #ffffff !important;
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(38, 79, 112, 0.28);
}
.wp-block-file .wp-block-file__button:focus-visible {
outline: 3px solid rgba(38, 79, 112, 0.3);
outline-offset: 3px;
}
/* Embedded PDF/file preview */
.wp-block-file object,
.wp-block-file iframe,
.wp-block-file embed {
flex-basis: 100%;
width: 100%;
max-width: 100%;
min-height: 420px;
margin-bottom: 0.75rem;
border: 1px solid var(--file-card-border);
border-radius: 14px;
background: #f8fbfd;
}
/* Mobile */
@media (max-width: 600px) {
.wp-block-file {
align-items: stretch;
padding: 0.9rem;
border-radius: 14px;
}
.wp-block-file > a:not(.wp-block-file__button) {
width: 100%;
font-size: 0.96rem;
}
.wp-block-file .wp-block-file__button {
width: 100%;
text-align: center;
}
.wp-block-file object,
.wp-block-file iframe,
.wp-block-file embed {
min-height: 320px;
}
}
/* Remove OneTap's off-screen toolbar shadow */
html body nav.onetap-accessibility.onetap-plugin-onetap,
html body nav.onetap-accessibility.onetap-plugin-onetap.onetap-toggle-close {
box-shadow: none !important;
-webkit-box-shadow: none !important;
filter: none !important;
}
/* ========================================================================
Mobile bottom utility dock
The bar is moved directly under by navigation.js on mobile so its
fixed positioning cannot be affected by the header/grid layout.
======================================================================== */
@media (max-width: 700px) {
body.mobile-utility-dock-active > .utility-top-bar {
display: block !important;
position: fixed !important;
top: auto !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 50px !important;
margin: 0 !important;
padding: 0 !important;
background: #00294b !important;
z-index: 999990 !important;
overflow: visible !important;
visibility: visible;
transform: translate3d(0, 0, 0) !important;
transition: transform 180ms ease, visibility 180ms ease;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.16);
}
body.mobile-utility-dock-active > .utility-top-bar.mobile-utility-bar-hidden,
body.mobile-utility-dock-active.menu-open > .utility-top-bar {
visibility: hidden;
pointer-events: none;
transform: translate3d(0, 100%, 0) !important;
}
body.mobile-utility-dock-active > .utility-top-bar > .utility-top-bar-inner {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: stretch !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 50px !important;
min-height: 50px !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
overflow: visible !important;
}
body.mobile-utility-dock-active > .utility-top-bar .top-menu-container {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
height: 50px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body.mobile-utility-dock-active > .utility-top-bar .top-menu {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
align-items: stretch !important;
width: 100% !important;
height: 50px !important;
min-height: 50px !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
list-style: none !important;
}
body.mobile-utility-dock-active > .utility-top-bar .top-menu > li {
display: block !important;
min-width: 0 !important;
height: 50px !important;
margin: 0 !important;
padding: 0 !important;
border-right: 1px solid rgba(255, 255, 255, 0.18);
}
body.mobile-utility-dock-active > .utility-top-bar .top-menu > li > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 50px !important;
min-height: 50px !important;
margin: 0 !important;
padding: 0 !important;
color: #ffffff !important;
font-size: clamp(0.80rem, 3.5vw, 0.90rem) !important;
font-weight: 400 !important;
line-height: 1 !important;
text-align: center !important;
text-decoration: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
body.mobile-utility-dock-active > .utility-top-bar .top-menu > li > a:hover,
body.mobile-utility-dock-active > .utility-top-bar .top-menu > li > a:focus-visible {
background: rgba(255, 255, 255, 0.10) !important;
text-decoration: underline !important;
}
/* Language cell. The existing translator trigger fills this cell while
its visual text/flag are hidden behind a clear globe icon. */
body.mobile-utility-dock-active > .utility-top-bar .translate-container {
position: relative !important;
flex: 0 0 52px !important;
width: 52px !important;
min-width: 52px !important;
max-width: 52px !important;
height: 50px !important;
min-height: 50px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
border-left: 0 !important;
}
body.mobile-utility-dock-active > .utility-top-bar .translate-container::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 23px;
height: 23px;
z-index: 1;
pointer-events: none;
transform: translate(-50%, -50%);
background-color: #ffffff;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9S14.5 18.5 12 21M12 3C9.5 5.5 8.2 8.5 8.2 12S9.5 18.5 12 21' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9S14.5 18.5 12 21M12 3C9.5 5.5 8.2 8.5 8.2 12S9.5 18.5 12 21' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.mobile-utility-dock-active > .utility-top-bar .translate-container:hover,
body.mobile-utility-dock-active > .utility-top-bar .translate-container:focus-within {
background: rgba(255, 255, 255, 0.10) !important;
}
body.mobile-utility-dock-active > .utility-top-bar .translate-container:focus-within {
outline: 3px solid #ffffff;
outline-offset: -3px;
}
/* Common wrapper created by Google Translate's native selector. */
body.mobile-utility-dock-active > .utility-top-bar .translate-container #google_translate_element,
body.mobile-utility-dock-active > .utility-top-bar .translate-container .goog-te-gadget,
body.mobile-utility-dock-active > .utility-top-bar .translate-container .gtranslate_wrapper {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
z-index: 2 !important;
}
/* Native Google/GTranslate select: invisible but still the click target. */
body.mobile-utility-dock-active > .utility-top-bar .translate-container select,
body.mobile-utility-dock-active > .utility-top-bar .translate-container select.goog-te-combo,
body.mobile-utility-dock-active > .utility-top-bar .translate-container select.gt_selector {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
opacity: 0 !important;
cursor: pointer !important;
z-index: 4 !important;
}
/* GTranslate custom switcher. It remains the real clickable control. */
body.mobile-utility-dock-active > .utility-top-bar .translate-container .gt_float_switcher,
body.mobile-utility-dock-active > .utility-top-bar .translate-container .gt_switcher,
body.mobile-utility-dock-active > .utility-top-bar .translate-container .switcher {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
transform: none !important;
z-index: 3 !important;
}
body.mobile-utility-dock-active > .utility-top-bar .translate-container .gt-selected,
body.mobile-utility-dock-active > .utility-top-bar .translate-container .gt_selected,
body.mobile-utility-dock-active > .utility-top-bar .translate-container .selected,
body.mobile-utility-dock-active > .utility-top-bar .translate-container .gt-current-lang {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
color: transparent !important;
background: transparent !important;
box-shadow: none !important;
cursor: pointer !important;
overflow: hidden !important;
}
body.mobile-utility-dock-active > .utility-top-bar .translate-container .gt-selected *,
body.mobile-utility-dock-active > .utility-top-bar .translate-container .gt_selected *,
body.mobile-utility-dock-active > .utility-top-bar .translate-container .selected *,
body.mobile-utility-dock-active > .utility-top-bar .translate-container .gt-current-lang * {
opacity: 0 !important;
}
/* The opened language list is readable and opens above the dock. */
body.mobile-utility-dock-active > .utility-top-bar .translate-container .gt_options,
body.mobile-utility-dock-active > .utility-top-bar .translate-container .gt_option,
body.mobile-utility-dock-active > .utility-top-bar .translate-container .option {
position: fixed !important;
top: auto !important;
right: 6px !important;
bottom: 50px !important;
left: auto !important;
width: min(280px, calc(100vw - 12px)) !important;
min-width: 190px !important;
max-width: calc(100vw - 12px) !important;
max-height: min(65vh, 360px) !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
color: #222222 !important;
background: #ffffff !important;
border: 1px solid rgba(0, 41, 75, 0.20) !important;
border-radius: 8px 8px 0 0 !important;
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.20) !important;
transform: none !important;
z-index: 10000000 !important;
}
body.mobile-utility-dock-active > .utility-top-bar .translate-container .gt_options *,
body.mobile-utility-dock-active > .utility-top-bar .translate-container .gt_option *,
body.mobile-utility-dock-active > .utility-top-bar .translate-container .option * {
opacity: 1 !important;
}
}
@media (prefers-reduced-motion: reduce) {
body.mobile-utility-dock-active > .utility-top-bar {
transition: none !important;
}
}
/* =========================================================
OneTap launcher — tablet and mobile
========================================================= */
@media (max-width: 1200px) {
html body .onetap-container-toggle {
position: fixed !important;
top: auto !important;
right: auto !important;
bottom: calc(10px + env(safe-area-inset-bottom)) !important;
left: 0px !important;
margin: 0 !important;
/*
* Start above the visible blue utility bar.
* Moving down 45px changes the visual position
* from 60px above the bottom to 15px.
*/
transform: translate3d(0, 0, 0) !important;
transition: transform 220ms ease !important;
will-change: transform;
z-index: 999989 !important;
}
html body.onetap-launcher-lowered .onetap-container-toggle,
html body.menu-open .onetap-container-toggle {
transform: translate3d(0, 45px, 0) !important;
}
}
@media (prefers-reduced-motion: reduce) {
html body .onetap-container-toggle {
transition: none !important;
}
}
/* ==========================================================================
My Custom Calendar: compact single event page
Add this to the active theme's style.css, replacing the previous
My Custom Calendar single-event CSS.
========================================================================== */
.mcc-event-page {
--mcc-event-primary: #123f60;
--mcc-event-primary-dark: #0b304b;
--mcc-event-accent: #58a8b7;
--mcc-event-accent-light: #eaf5f7;
--mcc-event-text: #243746;
--mcc-event-muted: #5f6f7b;
--mcc-event-border: #d9e2e8;
--mcc-event-background: #f5f8fa;
--mcc-event-white: #fff;
}
.mcc-single-event {
width: 100%;
margin: 1.5rem auto 3rem;
color: var(--mcc-event-text);
}
/* Compact title area: no separate date card. */
.mcc-single-event__header {
position: relative;
overflow: hidden;
padding: clamp(1.4rem, 3vw, 2.25rem);
border-radius: 12px;
background: linear-gradient(
135deg,
var(--mcc-event-primary-dark) 0%,
var(--mcc-event-primary) 78%,
#17617d 100%
);
color: var(--mcc-event-white);
box-shadow: 0 10px 26px rgba(10, 48, 75, 0.13);
}
.mcc-single-event__header::after {
position: absolute;
top: -95px;
right: -75px;
width: 225px;
height: 225px;
border: 38px solid rgba(255, 255, 255, 0.05);
border-radius: 50%;
content: "";
pointer-events: none;
}
.mcc-single-event__eyebrow,
.mcc-single-event__title,
.mcc-single-event__summary-date {
position: relative;
z-index: 1;
}
.mcc-single-event__eyebrow {
margin: 0 0 0.45rem;
color: #d8f1f5;
font-size: 0.76rem;
font-weight: 750;
letter-spacing: 0.11em;
line-height: 1.35;
text-transform: uppercase;
}
.mcc-single-event__title {
max-width: 950px;
margin: 0;
color: var(--mcc-event-white);
overflow-wrap: anywhere;
font-size: clamp(1.8rem, 4vw, 2.75rem);
font-weight: 750;
letter-spacing: -0.025em;
line-height: 1.1;
}
.mcc-single-event__summary-date {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0.8rem 0 0;
color: #eefbff;
font-size: 1rem;
font-weight: 600;
line-height: 1.45;
}
.mcc-single-event__summary-date svg {
flex: 0 0 auto;
}
/* Main area: restrained sidebar and a larger description column. */
.mcc-single-event__layout {
display: grid;
grid-template-columns: minmax(245px, 310px) minmax(0, 1fr);
gap: clamp(1.25rem, 2.5vw, 2rem);
align-items: start;
margin-top: 1.5rem;
}
.mcc-single-event__sidebar {
min-width: 0;
}
.mcc-single-event__featured-image {
margin: 0 0 0.85rem;
overflow: hidden;
border: 1px solid var(--mcc-event-border);
border-radius: 10px;
background: var(--mcc-event-background);
box-shadow: 0 6px 18px rgba(10, 48, 75, 0.07);
}
.mcc-single-event__featured-image img {
display: block;
width: 100%;
height: 190px;
object-fit: cover;
}
.mcc-single-event__details {
overflow: hidden;
border: 1px solid var(--mcc-event-border);
border-radius: 10px;
background: var(--mcc-event-white);
box-shadow: 0 6px 18px rgba(10, 48, 75, 0.06);
}
.mcc-single-event__details > h2 {
margin: 0;
padding: 0.8rem 1rem;
border: 0;
background: var(--mcc-event-primary);
color: var(--mcc-event-white);
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
}
.mcc-single-event__status {
margin: 0.8rem 1rem 0;
padding: 0.55rem 0.7rem;
border-left: 4px solid #b45309;
border-radius: 4px;
background: #fff7ed;
color: #7c2d12;
font-size: 0.84rem;
font-weight: 750;
}
.mcc-single-event__status--cancelled {
border-left-color: #b91c1c;
background: #fef2f2;
color: #991b1b;
}
.mcc-single-event__status--postponed {
border-left-color: #b45309;
background: #fff7ed;
color: #7c2d12;
}
.mcc-single-event__details-list {
margin: 0;
padding: 0;
}
.mcc-single-event__detail {
display: grid;
grid-template-columns: minmax(86px, 0.42fr) minmax(0, 1fr);
gap: 0.75rem;
padding: 0.8rem 1rem;
border-bottom: 1px solid var(--mcc-event-border);
}
.mcc-single-event__detail:last-child {
border-bottom: 0;
}
.mcc-single-event__detail dt {
display: flex;
align-items: flex-start;
gap: 0.4rem;
margin: 0;
color: var(--mcc-event-primary);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.045em;
line-height: 1.4;
text-transform: uppercase;
}
.mcc-single-event__detail dd {
min-width: 0;
margin: 0;
color: var(--mcc-event-text);
overflow-wrap: anywhere;
font-size: 0.93rem;
line-height: 1.45;
}
.mcc-single-event__detail a {
color: var(--mcc-event-primary);
font-weight: 650;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.mcc-single-event__detail-icon {
display: inline-flex;
flex: 0 0 16px;
align-items: center;
justify-content: center;
margin-top: 0.05rem;
}
.mcc-single-event__detail-icon svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.mcc-single-event__actions {
display: grid;
gap: 0.55rem;
padding: 0.85rem 1rem;
border-top: 1px solid var(--mcc-event-border);
background: var(--mcc-event-background);
}
.mcc-single-event__action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0.6rem 0.75rem;
border: 2px solid var(--mcc-event-primary);
border-radius: 6px;
color: var(--mcc-event-primary);
font-size: 0.9rem;
font-weight: 750;
line-height: 1.25;
text-align: center;
text-decoration: none;
transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.mcc-single-event__action--primary,
.mcc-single-event__action:hover,
.mcc-single-event__action:focus-visible {
background: var(--mcc-event-primary);
color: var(--mcc-event-white);
}
.mcc-single-event__action--primary:hover,
.mcc-single-event__action--primary:focus-visible {
background: var(--mcc-event-primary-dark);
border-color: var(--mcc-event-primary-dark);
}
.mcc-single-event__action:hover,
.mcc-single-event__action:focus-visible {
transform: translateY(-1px);
}
.mcc-single-event__action:focus-visible,
.mcc-single-event__back:focus-visible {
outline: 3px solid rgba(88, 168, 183, 0.45);
outline-offset: 3px;
}
.mcc-single-event__content {
min-width: 0;
padding: clamp(1.25rem, 2.5vw, 2rem);
border: 1px solid var(--mcc-event-border);
border-radius: 10px;
background: var(--mcc-event-white);
box-shadow: 0 6px 18px rgba(10, 48, 75, 0.055);
font-size: 1rem;
line-height: 1.7;
}
.mcc-single-event__content > :first-child {
margin-top: 0;
}
.mcc-single-event__content > :last-child {
margin-bottom: 0;
}
.mcc-single-event__content h2,
.mcc-single-event__content h3,
.mcc-single-event__content h4 {
color: var(--mcc-event-primary);
line-height: 1.25;
}
.mcc-single-event__content h2 {
margin-top: 1.75rem;
padding-bottom: 0.45rem;
border-bottom: 3px solid var(--mcc-event-accent-light);
font-size: clamp(1.35rem, 2.5vw, 1.8rem);
}
.mcc-single-event__content a {
color: var(--mcc-event-primary);
font-weight: 650;
text-decoration-color: var(--mcc-event-accent);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.mcc-single-event__content a:hover,
.mcc-single-event__content a:focus {
color: var(--mcc-event-primary-dark);
}
.mcc-single-event__content blockquote {
margin-right: 0;
margin-left: 0;
padding: 1rem 1.2rem;
border-left: 5px solid var(--mcc-event-accent);
border-radius: 0 7px 7px 0;
background: var(--mcc-event-accent-light);
}
.mcc-single-event__return {
display: flex;
align-items: center;
margin-top: 1.15rem;
padding-top: 0.9rem;
border-top: 1px solid var(--mcc-event-border);
}
.mcc-single-event__back {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--mcc-event-primary);
font-size: 0.94rem;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
text-underline-offset: 3px;
transition: color 180ms ease, gap 180ms ease;
}
.mcc-single-event__back-icon {
display: inline-block;
font-size: 1.1em;
line-height: 1;
transition: transform 180ms ease;
}
.mcc-single-event__back:hover,
.mcc-single-event__back:focus-visible {
color: var(--mcc-event-primary-dark);
text-decoration: underline;
}
.mcc-single-event__back:hover .mcc-single-event__back-icon,
.mcc-single-event__back:focus-visible .mcc-single-event__back-icon {
transform: translateX(-2px);
}
.mcc-single-event__back:focus-visible {
border-radius: 3px;
outline: 3px solid rgba(88, 168, 183, 0.4);
outline-offset: 4px;
}
@media (max-width: 860px) {
.mcc-single-event__layout {
grid-template-columns: minmax(220px, 285px) minmax(0, 1fr);
}
.mcc-single-event__detail {
grid-template-columns: 1fr;
gap: 0.25rem;
}
}
@media (max-width: 700px) {
.mcc-single-event__layout {
grid-template-columns: 1fr;
}
.mcc-single-event__sidebar--has-image {
display: grid;
grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
gap: 1rem;
align-items: start;
}
.mcc-single-event__featured-image {
margin: 0;
}
.mcc-single-event__featured-image img {
height: 100%;
min-height: 185px;
max-height: 250px;
}
}
@media (max-width: 520px) {
.mcc-single-event {
margin-top: 1rem;
}
.mcc-single-event__header {
padding: 1.3rem;
border-radius: 9px;
}
.mcc-single-event__title {
font-size: clamp(1.65rem, 8vw, 2.1rem);
}
.mcc-single-event__summary-date {
align-items: flex-start;
font-size: 0.95rem;
}
.mcc-single-event__summary-date svg {
margin-top: 0.1rem;
}
.mcc-single-event__sidebar--has-image {
display: block;
}
.mcc-single-event__featured-image {
margin-bottom: 0.8rem;
}
.mcc-single-event__featured-image img {
height: 180px;
min-height: 0;
}
.mcc-single-event__details,
.mcc-single-event__content,
.mcc-single-event__featured-image {
border-radius: 8px;
}
.mcc-single-event__detail {
grid-template-columns: 92px minmax(0, 1fr);
gap: 0.6rem;
padding: 0.75rem 0.9rem;
}
.mcc-single-event__content {
padding: 1.15rem;
}
.mcc-single-event__return {
margin-top: 1rem;
}
}
@media (prefers-reduced-motion: reduce) {
.mcc-single-event__action,
.mcc-single-event__back,
.mcc-single-event__back-icon {
transition: none;
}
}
/*
* Homepage header: slideshow/static-image compatibility fixes.
*/
/* Keep the header rows in their intended order. */
.header-section > .utility-top-bar {
order: 0;
}
.header-section > .top-bar,
.header-section > .mobile-menu-button {
order: 1;
}
.header-section > .village-alerts-bar {
order: 8;
}
.header-section > .headergraphic {
order: 10;
}
/* Prevent grid/flex children from widening the page. */
.header-section,
.header-section > *,
.headergraphic,
.frontpage-slideshow,
.frontpage-slideshow .homepage-header-media,
.frontpage-slideshow .header-searchbar {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.headergraphic {
width: 100%;
overflow: hidden;
}
.frontpage-slideshow {
position: relative;
display: block;
width: 100%;
max-height: 650px;
overflow: hidden;
text-align: center;
vertical-align: top;
z-index: 1;
}
/*
* Only this wrapper contains the image/slideshow, overlay and overlay text.
* The search bar remains a sibling so the overlay cannot cover it when the
* search is moved below the image on smaller screens.
*/
.frontpage-slideshow .homepage-header-media {
position: relative;
width: 100%;
max-height: 650px;
overflow: hidden;
}
/* Decorative dark layer, limited to the media wrapper. */
.frontpage-slideshow .slideshow-overlay {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
/* Keep the existing theme typography/alignment, but fix its stacking box. */
.frontpage-slideshow .overlaytext {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
z-index: 3;
}
/* Desktop search stays centred over the image/slideshow. */
.frontpage-slideshow .header-searchbar {
position: absolute;
left: 50%;
right: auto;
top: auto;
bottom: 60px;
z-index: 4;
width: calc(100% - 40px);
max-width: 600px;
margin: 0;
padding: 0;
transform: translateX(-50%);
}
.frontpage-slideshow .header-search-form {
width: 100%;
max-width: 100%;
}
/* -------------------------------------------------------------------------
* MetaSlider mode
* -------------------------------------------------------------------------
* Do not set height, display, position or overflow on FlexSlider's internal
* viewport, .slides list or slide elements. MetaSlider/FlexSlider needs
* to control those values itself.
*/
/*
.frontpage-slideshow.has-slideshow-header .homepage-header-media {
height: auto;
min-height: 0;
max-height: 650px;
}
*/
.frontpage-slideshow.has-slideshow-header .homepage-header-media {
width: 100%;
height: auto;
min-height: 0;
max-height: 650px;
aspect-ratio: 18 / 7;
overflow: hidden;
}
.frontpage-slideshow.has-slideshow-header .metaslider,
.frontpage-slideshow.has-slideshow-header .ml-slider,
.frontpage-slideshow.has-slideshow-header .flexslider {
width: 100% !important;
max-width: 100% !important;
min-width: 0;
margin: 0 !important;
box-sizing: border-box;
}
.frontpage-slideshow.has-slideshow-header .metaslider img,
.frontpage-slideshow.has-slideshow-header .slides img {
display: block;
max-width: 100% !important;
height: auto;
}
/* -------------------------------------------------------------------------
* Static-image mode
* ------------------------------------------------------------------------- */
.frontpage-slideshow.has-static-header-image .homepage-header-media {
aspect-ratio: 18 / 7;
max-height: 650px;
}
.frontpage-slideshow.has-static-header-image .mc-homepage-hero__picture,
.frontpage-slideshow.has-static-header-image .mc-homepage-hero__image {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
}
.frontpage-slideshow.has-static-header-image .mc-homepage-hero__image {
object-fit: cover;
object-position: center;
}
/* -------------------------------------------------------------------------
* Responsive layout
* -------------------------------------------------------------------------
* At 800px and below, move the search into normal flow directly below the
* slideshow/static image. The media wrapper retains the overlay boundary.
*/
@media (max-width: 800px) {
.headergraphic,
.frontpage-slideshow,
.frontpage-slideshow.has-static-header-image,
.frontpage-slideshow.has-slideshow-header {
width: 100%;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
.frontpage-slideshow .homepage-header-media,
.frontpage-slideshow.has-static-header-image .homepage-header-media,
.frontpage-slideshow.has-slideshow-header .homepage-header-media {
width: 100%;
height: auto;
min-height: 0;
max-height: none;
overflow: hidden;
}
.frontpage-slideshow.has-static-header-image .homepage-header-media {
aspect-ratio: 18 / 7;
}
/*
* MetaSlider remains in control of .flex-viewport, .slides and slide
* dimensions. Only its outer wrappers are constrained to the viewport.
*/
.frontpage-slideshow.has-slideshow-header .metaslider,
.frontpage-slideshow.has-slideshow-header .ml-slider,
.frontpage-slideshow.has-slideshow-header .flexslider {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.frontpage-slideshow.has-slideshow-header .metaslider img,
.frontpage-slideshow.has-slideshow-header .slides img {
max-width: 100% !important;
height: auto;
}
.frontpage-slideshow .header-searchbar {
position: relative !important;
inset: auto !important;
display: block;
clear: both;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
background: #ffffff;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden;
z-index: 4;
}
.frontpage-slideshow .header-search-form,
.frontpage-slideshow .header-search-form .search-inner {
display: flex !important;
align-items: stretch;
width: 100% !important;
max-width: 100% !important;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
background: #ffffff;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden;
box-sizing: border-box;
}
.frontpage-slideshow .header-search-form label {
display: flex;
flex: 1 1 auto;
width: auto;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
}
.frontpage-slideshow .header-search-field,
.frontpage-slideshow .header-searchbar input[type="search"] {
flex: 1 1 auto;
width: 100% !important;
min-width: 0;
max-width: 100%;
margin: 0 !important;
padding: 12px 15px !important;
border-radius: 0 !important;
box-shadow: none !important;
box-sizing: border-box;
}
.frontpage-slideshow .header-search-submit,
.frontpage-slideshow .header-searchbar button[type="submit"] {
flex: 0 0 54px;
width: 54px;
min-width: 54px;
min-height: 48px;
margin: 0 !important;
padding: 10px !important;
border-radius: 0 !important;
box-shadow: none !important;
box-sizing: border-box;
}
}
/* Preserve the theme's original small-phone behaviour. */
@media (max-width: 500px) {
.frontpage-slideshow .overlaytext,
.frontpage-slideshow .slideshow-overlay {
display: none;
}
}
.feature-box .fb-icon svg {fill:#1a3f49;}
.wp-block-table thead th {background:#00294b !important;border-color:#00294b !important;}