:root {
  --bideford-container-max: 100%;
  --bdca-page-bg: #d3d3d3;
  --bdca-site-bg: #fff;
  --bdca-showcase-bg: #3f3f3f;
  --bdca-utility-bg: #0dabdb;
  --bdca-footer-bg: #f5f5f5;
  --bs-body-color: #686868;
  --bs-link-color: #b3c4c9;
  --bs-link-hover-color: #5a729c;
  --bdca-header-bg: linear-gradient(to bottom, #2d2d2d 0%, #000 100%);
  --bdca-header-fg: #fff;
  --bdca-color-black: #000;
  --bdca-color-muted-link: #5b645b;
  --bdca-color-border-light: #ddd;
  --bdca-color-neutral-500: #808080;
  --bdca-utility-gradient-start: #639aa8;
  --bdca-utility-gradient-end: #4b757f;
  --bdca-shadow-utility-text: 1px 1px 1px #000;
  --bdca-social-facebook: #4867aa;
  --bdca-social-facebook-text: #2d4788;
  --bdca-social-twitter: #2caae1;
  --bdca-social-twitter-text: #1779a8;
  --bdca-social-google: #db4437;
  --bdca-social-google-text: #9f2f28;
}

@media (min-width: 768px) {
  :root {
    --bideford-container-max: 750px;
  }
}

@media (min-width: 992px) {
  :root {
    --bideford-container-max: 970px;
  }
}

@media (min-width: 1200px) {
  :root {
    --bideford-container-max: 1195px;
  }
}

body.site {
  background-color: var(--bdca-page-bg);
  color: var(--bs-body-color);
  font-family: 'PT Serif', 'ptserif', Verdana, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 24px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', 'playfairdisplay', Verdana, Helvetica, Arial, sans-serif;
  color: var(--bs-body-color);
}

h1 { font-size: 1.7em; line-height: 1.3; }
h2 { font-size: 1.6em; line-height: 1.3; }
h3 { font-size: 1.5em; line-height: 1.2; }
h4 { font-size: 1.4em; line-height: 1.2; }
h5 { font-size: 1.3em; line-height: 1.1; }
h6 { font-size: 1.2em; line-height: 1.1; }

a {
  color: var(--bs-link-color);
}

a:hover,
a:focus {
  color: var(--bs-link-hover-color);
}

.container-header,
.site-grid,
.container-footer {
  width: 100%;
  max-width: var(--bideford-container-max);
  margin-inline: auto;
  grid-gap: 0 !important;
}

#site-canvas {
  gap: 0;
}

#site-canvas > * {
  margin-top: 0;
  margin-bottom: 0;
}

.site-grid {
  background: var(--bdca-site-bg);
}

.container-banner {
  background: var(--bdca-showcase-bg);
  color: var(--bdca-header-fg);
  margin: 0;
}

#utility-nav-main.mod-menu {
  gap: 0;
  list-style: none;
  text-align: center;
  text-shadow: var(--bdca-shadow-utility-text);
  font-family: "Roboto", Verdana, Helvetica, Arial, sans-serif;
  background: linear-gradient(
    to bottom,
    var(--bdca-utility-gradient-start) 0%,
    var(--bdca-utility-gradient-end) 100%
  );
}
#utility-nav-main.mod-menu > .nav-item {
  flex: 0 0 auto;
  margin-bottom: 0;
}
#utility-nav-main.mod-menu > .nav-item > a {
  padding: 3px 15px;
  color: var(--bdca-color-muted-link);
  font-size: 16px !important;
  line-height: 22px;
  text-decoration: none;
  white-space: nowrap;
  transition: none !important;
}
#utility-nav-main.mod-menu > .nav-item > a:is(:hover, :focus-visible) {
  text-decoration: underline;
}

.container-below-top {
  color: var(--bdca-color-muted-link);
  background: var(--bdca-utility-gradient-start);
  background: linear-gradient(
    to bottom,
    var(--bdca-utility-gradient-start) 0%,
    var(--bdca-utility-gradient-end) 100%
  );
  border-bottom: 2px solid var(--bdca-color-border-light);
}

.container-below-top .mod-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 15px 15px;
  text-align: center;
  text-shadow: var(--bdca-shadow-utility-text);
  font-family: "Roboto", Verdana, Helvetica, Arial, sans-serif;
  list-style: none;
}

.container-below-top .mod-menu > .nav-item {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.container-below-top .mod-menu > .nav-item > a {
  display: block;
  text-decoration: none;
  padding: 5px 15px;
  border-radius: 3px;
  white-space: nowrap;
  color: var(--bdca-color-muted-link);
  font-size: 16px;
  line-height: 16px;
}

.container-below-top .mod-menu > .nav-item > a:is(:hover, :focus-visible) {
  color: var(--bdca-color-muted-link);
  text-decoration: underline;
}

.container-below-top .mod-menu > .nav-item > a:visited {
  color: var(--bdca-color-muted-link);
  text-decoration: none;
}

.container-below-top .mod-menu > .nav-item.active > a {
  text-shadow: 1px 1px 3px #8ed6e8;
}

.container-footer > .grid-child,
.site-grid > [class^="container-"]:not(.full-width),
.site-grid > [class*=" container-"]:not(.full-width) {
  width: 100%;
  /* max-width: var(--bideford-container-max); */
  margin: auto;
  padding: 1.5rem;
  margin-top: 5px;
}

.container-header a.social-link,
.container-footer a.social-link {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 3px;
  border: 0;
  border-radius: 3px;
  background-color: var(--bdca-color-neutral-500);
  color: var(--bdca-color-muted-link) !important;
  font-size: 19.5px;
  text-decoration: none;
  line-height: 30px;
  transition:
    background-color 0.5s ease,
    border-color 0.5s ease,
    color 0.5s ease;
}

.container-header a.social-link > .p-2,
.container-footer a.social-link > .p-2 {
  padding: 0 !important;
  font-size: 1em;
}

.container-header a.social-facebook:hover,
.container-header a.social-facebook:focus-visible,
.container-footer a.social-facebook:hover,
.container-footer a.social-facebook:focus-visible {
  background-color: var(--bdca-social-facebook);
}

.container-header a.social-twitter:hover,
.container-header a.social-twitter:focus-visible,
.container-footer a.social-twitter:hover,
.container-footer a.social-twitter:focus-visible {
  background-color: var(--bdca-social-twitter);
}

.container-header a.social-google:hover,
.container-header a.social-google:focus-visible,
.container-footer a.social-google:hover,
.container-footer a.social-google:focus-visible {
  background-color: var(--bdca-social-google);
}


#seblod_form #button_submit {
  background: linear-gradient(to bottom, #5a8d9b 0%,#69a5b2 12%,#5a8d9b 50%,#4b757f 96%,#436770 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a8d9b', endColorstr='#436770',GradientType=0 );
  border: 1px solid #274850;
  text-shadow: 1px 1px 2px #274850;
  vertical-align: middle;
  text-align: center;
  border-radius: 3px;
  color: #ffffff;
  font-family: 'roboto', Verdana, Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: all 0.2s ease-in;
}

/* ==========================================================================
   Contact Us Page – Full-width 75/25 grid layout
   Scope: body.contact-page (Page Class Suffix on menu item 126)
   ========================================================================== */

@media (min-width: 992px) {
  body.contact-page .site-grid {
    grid-template-columns: [full-start] 75% [sidebar-start] 25% [full-end];
    grid-template-areas:
      "banner  banner"
      "top-a   top-a"
      "top-b   top-b"
      "comp    side-r"
      "bot-a   bot-a"
      "bot-b   bot-b";
  }

  body.contact-page .site-grid > .container-component {
    grid-area: comp;
    max-width: none;
  }

  body.contact-page .site-grid > .container-sidebar-right {
    grid-area: side-r;
    max-width: none;
  }
}

/* ==========================================================================
   About Us Page – Edge-to-edge component layout
   Scope: body.about-us (Page Class Suffix on About Us menu item)
   ========================================================================== */

body.about-us .site-grid .container-component {
  margin: 2px 0 0 0;
  padding: 0;
}

body.about-us .site-grid .container-component > div.moduletable {
  margin-top: 1px;
}
body.about-us .site-grid .container-component > div.moduletable,
body.about-us .site-grid .container-component > main {
  padding: 0;
}

/* -- About Us: Article area (main content) ------------------------------ */

body.about-us .site-grid .container-component > main {
  padding: 15px;               /* J3: .rt-component-block padding */
  margin: 10px;                /* J3: .rt-component-block margin */
}

body.about-us .com-content-article h3 {
  font-family: 'PT Serif', ptserif, Verdana, Helvetica, Arial, sans-serif;
  font-size: 17.25px;         /* J3: 17.25px */
  font-weight: 400;
  color: #686868;             /* J3: rgb(104, 104, 104) */
  margin: 10px 0;             /* J3: 10px 0px */
}

body.about-us .com-content-article p {
  font-family: 'PT Serif', ptserif, Verdana, Helvetica, Arial, sans-serif;
  font-size: 15px;            /* J3: 15px */
  font-weight: 400;
  color: #686868;             /* J3: rgb(104, 104, 104) */
  margin: 0 0 15px;           /* J3: 0px 0px 15px */
}

/* -- About Us: "Learn More" readon button ------------------------------- */

body.about-us .com-content-article a.readon {
  display: inline-block;
  font-family: 'Roboto', roboto, Verdana, Helvetica, Arial, sans-serif;
  font-size: 12px;            /* J3: 12px */
  font-weight: 700;           /* J3: bold */
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: #5b645b;             /* J3: rgb(91, 100, 91) */
  padding: 10px 15px;         /* J3: 10px 15px */
  border: 1px solid #274850;  /* J3: 1px solid rgb(39, 72, 80) */
  border-radius: 3px;         /* J3: 3px */
  background: linear-gradient(to bottom, #5a8d9b 0%, #69a5b2 12%, #5a8d9b 50%, #4b757f 96%, #436770 100%);
  box-shadow: none;
  transition: all 0.2s ease-in;
}

body.about-us .com-content-article a.readon:hover,
body.about-us .com-content-article a.readon:focus-visible {
  color: #fff;
  text-decoration: none;
}

#mod-custom155 {
  color: fff;
}