/* Follow-up design pass: more brand color, less flat white space. Kept
   as its own file (loaded after custom.css) so this and any concurrent
   CORS/forms work don't touch the same stylesheet. */

/* Logo, bigger per request -- was 54px, then 72px, then 92px, then 112px.
   The theme's own .navbar-brand has a fixed height:62px (style.default.css)
   that clips any img taller than that, so height must be overridden here
   too -- upping max-height alone silently did nothing past ~62px. */
.navbar-brand img {
  max-height: 112px;
}
.navbar-brand {
  height: auto;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* The page-title band under the nav (every interior page) was a flat
   grayscale texture -- the single biggest "just white/gray" surface
   repeated on every page. Warmed it with the brand green. */
#heading-breadcrumbs {
  background: linear-gradient(135deg, rgba(31, 95, 59, 0.55), rgba(46, 139, 87, 0.5)), url('/images/hero-cinque-terre.jpg') center center / cover no-repeat;
  border-bottom: 3px solid var(--primary-accent);
  padding: 60px 0;
}
#heading-breadcrumbs h1 {
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Sidebar widget headers (Search, etc.) */
.panel.sidebar-menu > .panel-heading {
  background: var(--primary-accent);
  border-color: var(--primary-accent);
}
.panel.sidebar-menu > .panel-heading .panel-title {
  color: #ffffff;
}

/* .box-simple (the feature-card grid on the homepage and About page)
   is the theme's biggest miss: literally just an icon, heading, and
   paragraph floating in white space with zero card chrome. */
.box-simple {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 32px 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.box-simple:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
  transform: translateY(-3px);
}
.box-simple .icon {
  margin-bottom: 4px;
}

/* Feature cards - make all cards in a row the same height.
   Bootstrap 3 is float-based, but we can use flexbox on the row container
   to ensure all cards in a row have equal height. */
section.bar.background-white > .container > .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
section.bar.background-white > .container > .row > [class*='col-'] {
  display: flex;
  flex-direction: column;
  padding-left: 15px;
  padding-right: 15px;
}
section.bar.background-white > .container > .row > [class*='col-'] > .box-simple {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
  min-height: 260px;
}

/* Topbar phone number: the theme's global `a { color: var(--primary-accent) }`
   (brand green) reads at ~2.2:1 against #top's dark #555555 background --
   fails WCAG AA and is genuinely hard to read. White + bold fixes contrast
   and makes it the visual focal point of the bar, which a phone number
   people are meant to actually dial should be. */
#top a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
}
#top a:hover {
  color: var(--navbar-focus);
}