/* Follow-up design pass: more brand color, less flat white space,
   nicer blog presentation. 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. */
.navbar-brand img {
  max-height: 72px;
}
.navbar-brand {
  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. Now uses a pre-blurred practice photo (see
   custom.css for why it's blurred at the file level, not via CSS
   filter) with the brand-orange tint preserved on top. */
#heading-breadcrumbs {
  background: linear-gradient(135deg, rgba(122, 61, 15, 0.6), rgba(244, 121, 32, 0.55)), url('/images/breadcrumb-amsterdam-canal.jpg') center center / cover no-repeat;
  border-bottom: 3px solid var(--primary-accent);
  padding: 70px 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;
}

/* Blog list entries: plain stacked rows on white -> real cards, with
   a colored accent bar so the list reads as a series of distinct
   posts rather than one long undifferentiated page. */
#blog-listing-medium section.post {
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-left: 4px solid var(--primary-accent);
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
#blog-listing-medium section.post:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
}
#blog-listing-medium .image img {
  border-radius: 6px;
}

/* Individual post page: give the banner image (added via the
   _default/single.html override) some presence instead of a bare
   image floating above plain text. */
#blog-post .post-banner {
  margin-bottom: 24px;
}
#blog-post .post-banner img {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  width: 100%;
}

/* Recent-posts cards on the homepage already have banner images and
   an accent hover per the theme -- just add a touch more definition
   so they don't sit totally flush against white. */
.box-image-text.blog {
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* .box-simple (the condition-card grid on the homepage and What We
   Treat) is the theme's biggest miss: literally just an icon,
   heading, and paragraph floating in white space with zero card
   chrome -- no background, border, or shadow, unlike the blog cards
   right below it on the same page. That inconsistency is a big part
   of the site's most prominent content block feeling unfinished. */
.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;
}

/* fa-spa's glyph (Cosmetic Offerings) has extra whitespace baked into
   the bottom of its own icon box, unlike the other feature icons here --
   it renders visibly above-center inside the circle instead of in the
   middle. Nudging just this glyph down re-centers it without touching
   the shared .icon circle sizing every other feature icon relies on. */
.box-simple .icon .fa-spa {
  position: relative;
  top: 10px;
}