/* 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.55), rgba(244, 121, 32, 0.5)), 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: 0;
  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 card icons - align all on the same horizontal line */
.box-simple .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  height: 80px;
}
.box-simple .icon i {
  display: block;
  line-height: 1;
}
/* fa-spa's glyph has extra whitespace - adjust to align with other icons */
.box-simple .icon .fa-spa {
  margin-top: 2px;
}

/* Feature cards - make all same height with icons on same line */
/* Make feature rows flex so all columns are equal height */
@media (min-width: 768px) {
  .bar.background-white:not(:has(.box-image-text)) .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .bar.background-white:not(:has(.box-image-text)) .row > [class^="col-md-"] {
    display: flex;
    flex-direction: column;
  }
  .bar.background-white:not(:has(.box-image-text)) .box-simple {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
  }
  /* Cosmetic Offerings - keep centered since it's alone in its row */
  .bar.background-white .row-2:last-of-type > .col-md-3:only-child .box-simple {
    justify-content: center;
  }
}

/* Blog cards on homepage - ensure equal height and aligned continue reading buttons */
/* Make the row a flex container so all columns are equal height */
@media (min-width: 768px) {
  .bar.background-white > .container > .col-md-12 > .row {
    display: flex;
    flex-wrap: wrap;
  }
  .bar.background-white > .container > .col-md-12 > .row > .col-md-3 {
    display: flex;
    flex-direction: column;
  }
  .bar.background-white .box-image-text.blog {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .bar.background-white .box-image-text.blog .top {
    flex-shrink: 0;
  }
  .bar.background-white .box-image-text.blog .content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .bar.background-white .box-image-text.blog .intro {
    flex: 1 1 auto;
  }
  .bar.background-white .box-image-text.blog .read-more {
    margin-top: auto;
    flex-shrink: 0;
  }
}

/* What We Treat and Our Team pages - cards grid - make all same height */
@media (min-width: 768px) {
  #content .cards-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
  }
  #content .cards-grid > .col-md-6,
  #content .cards-grid > .col-sm-6 {
    float: none;
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }
  /* Cards grid - box-simple cards */
  #content .cards-grid .box-simple {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
    flex: 1 1 auto;
  }
  #content .cards-grid .box-simple h3 {
    margin-top: 0;
  }
  /* Wells (comparison section) */
  #content .row > .col-md-6 > .well {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

/* Our Team page - make image and text flow together */
#content .container > .row > .row > .col-md-5 {
  display: contents;
}
#content .container > .row > .row > .col-md-5 img {
  float: left;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  width: 35%;
  margin: 0 24px 20px 0;
}
#content .container > .row > .row > .col-md-7 {
  width: 100%;
  padding-left: 0;
}
#content .container > .row > .row > .col-md-7 p {
  margin-bottom: 18px;
  line-height: 1.8;
  color: #555555;
}
#content .container > .row > .row::after {
  content: "";
  display: table;
  clear: both;
}

/* Hide staff image on small screens to save space */
@media (max-width: 767px) {
  #content .container > .row > .row > .col-md-5 {
    display: none;
  }
  #content .container > .row > .row > .col-md-7 {
    width: 100%;
    padding-left: 0;
  }
}