/*
Theme Name:   Divi Bar Harbor
Template:     Divi
Version:      1.0.0
Description:  Divi child theme for barharbor.info
Author:       Matt Baya
*/
/* ?? Bar Harbor: Downeast nautical ?????????????????????????????????? */
:root {
  --bh-navy:    #16324a;  /* deep harbour water */
  --bh-slate:   #24506b;  /* weathered hull */
  --bh-fog:     #eef2f4;  /* morning fog off the bay */
  --bh-rope:    #c9a227;  /* brass and manila */
  --bh-buoy:    #a8322d;  /* lobster buoy red */
  --bh-spruce:  #2f4f43;  /* Acadia spruce */
  --bh-sand:    #f7f4ee;  /* granite and sand */
}

body { background: var(--bh-sand); color: #1c2b36; }

/* Headlines in a newspaper serif; the body stays as the theme sets it. */
h1, h2, h3, h4, .et_pb_post_title, .entry-title, .post-title {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif !important;
  color: var(--bh-navy) !important;
  letter-spacing: -0.01em;
}

/* Masthead: deep water, with a brass rule beneath it. */
#main-header, .et-l--header, header.et-l--header, #top-header {
  background: linear-gradient(180deg, var(--bh-navy) 0%, var(--bh-slate) 100%) !important;
  border-bottom: 3px solid var(--bh-rope) !important;
  box-shadow: 0 2px 12px rgba(22,50,74,.25);
}
#main-header a, #top-header a, #et-top-navigation a, .et_pb_menu a { color: var(--bh-fog) !important; }
#main-header a:hover, #et-top-navigation a:hover { color: var(--bh-rope) !important; }

.site-title, .logo_container a, h1.logo { color: #fff !important; }
.site-description, #top-header .et-social-icons { color: var(--bh-fog) !important; }

/* Links: buoy red, which reads as editorial rather than corporate blue. */
a { color: var(--bh-buoy); }
a:hover { color: var(--bh-slate); }

/* Article cards: pale, with a rope-coloured edge. */
article, .et_pb_post, .post, .type-post {
  background: #fff;
  border: 1px solid #dfe5e9;
  border-left: 4px solid var(--bh-rope);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(22,50,74,.06);
}

/* A thin signal-flag stripe across the top of the page. */
body::before {
  content: "";
  display: block;
  height: 4px;
  background: repeating-linear-gradient(90deg,
    var(--bh-navy) 0 40px, var(--bh-buoy) 40px 80px,
    var(--bh-fog) 80px 120px, var(--bh-spruce) 120px 160px);
}

/* Buttons: brass on navy. */
.et_pb_button, button, input[type="submit"], .newshare-login-btn {
  background: var(--bh-navy) !important;
  border: 1px solid var(--bh-rope) !important;
  color: var(--bh-fog) !important;
  border-radius: 2px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82em;
}
.et_pb_button:hover, button:hover, .newshare-login-btn:hover {
  background: var(--bh-rope) !important; color: var(--bh-navy) !important;
}

/* Pull quotes as if set in a broadsheet. */
blockquote {
  border-left: 3px solid var(--bh-buoy);
  background: var(--bh-fog);
  font-style: italic;
  color: var(--bh-navy);
}

/* The Newshare access gate should look like part of the paper, not an add-on. */
.newshare-access-gate, .newshare-payment-declined, .newshare-purchase-notice {
  background: var(--bh-fog);
  border: 1px solid #d6dee4;
  border-top: 3px solid var(--bh-rope);
  border-radius: 2px;
  padding: 1.25em 1.5em;
}
.newshare-purchase-notice { border-top-color: var(--bh-spruce); }

footer, #main-footer {
  background: var(--bh-navy) !important;
  color: var(--bh-fog) !important;
  border-top: 3px solid var(--bh-rope);
}
footer a, #main-footer a { color: var(--bh-rope) !important; }
/* ?? Masthead: replace the theme's stock logo with the paper's name ?? */
.logo_container img, #logo, .et_pb_menu__logo img { display: none !important; }

.logo_container::after {
  content: "BAR HARBOR";
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #fff;
  white-space: nowrap;
  display: block;
  line-height: 1.05;
}
.logo_container::before {
  content: "MOUNT DESERT ISLAND · DOWNEAST MAINE";
  position: absolute;
  bottom: -2px; left: 0;
  font-family: Georgia, serif;
  font-size: 9.5px;
  letter-spacing: .22em;
  color: #c9a227;
  white-space: nowrap;
}
.logo_container { position: relative; display: flex !important; align-items: center; }

/* The category bar reads better as small caps against the navy. */
#et-top-navigation .nav li a, .et-menu li a {
  font-family: Georgia, serif !important;
  font-size: 12.5px !important;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Trending strip: quieter, so the masthead carries the page. */
#top-header { background: #10263a !important; font-size: 12px; }
/* ?? Masthead spacing: stop the nav overlapping the wordmark ???????? */
.logo_container {
  min-width: 340px !important;
  padding-right: 2.5rem !important;
  flex: 0 0 auto !important;
}
#logo, .logo_container img { width: 0 !important; }

.logo_container::after { font-size: 26px; }
.logo_container::before { bottom: -4px; }

/* Let the menu take the remaining width and sit to the right. */
#et-top-navigation {
  padding-top: 18px !important;
  float: right !important;
}
#top-menu li a { padding-bottom: 12px !important; }

/* Give the header a little more vertical room so the strapline is not
   clipped against the brass rule. */
#main-header { padding-top: 6px; padding-bottom: 6px; }

@media (max-width: 980px) {
  .logo_container { min-width: 0 !important; }
  .logo_container::after { font-size: 21px; }
  .logo_container::before { font-size: 8px; letter-spacing: .15em; }
}
/* ── Header layout: masthead on its own line, nav beneath ─────────────
   Divi lays the logo and menu out side by side, and the CSS-drawn wordmark
   has no intrinsic width, so the menu was overlapping it. Stacking them is
   both the reliable fix and the arrangement a newspaper actually uses. */
#main-header .container {
  display: block !important;
  width: 92% !important;
  max-width: 1200px;
}

.logo_container {
  position: relative !important;
  float: none !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 14px 0 20px !important;
  text-align: center;
  border-bottom: 1px solid rgba(201,162,39,.35);
}
.logo_container::after {
  font-size: 40px !important;
  letter-spacing: .16em;
}
.logo_container::before {
  position: static !important;
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: .28em;
}

#et-top-navigation {
  float: none !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: center;
}
#top-menu { float: none !important; display: inline-block !important; }
#top-menu li { float: none !important; display: inline-block !important; }
#top-menu li a { padding: 12px 14px !important; }

#main-header { padding: 0 !important; }
#et_top_search { display: none; }

@media (max-width: 980px) {
  .logo_container::after { font-size: 26px !important; }
  .logo_container::before { font-size: 8px; letter-spacing: .18em; }
}