/* ============================================================
   Aside — modern design layer (2026)
   A clean, contemporary food-blog / photography-grid refresh
   over the existing markup. Loaded LAST so it wins.
   Accent: dusty rose. Keeps the layout simple.
   ============================================================ */

:root {
  --bg: #ffffff;
  --ink: #1d1f24;                    /* headings */
  --body: #5b626c;                   /* readable body text */
  --muted: #7b828d;
  --faint: #9aa1ac;
  --line: #ececef;
  --line-strong: #e0e2e7;
  --accent: #b16a70;                 /* dusty rose */
  --accent-dark: #8e555a;
  --accent-soft: #f3e9ea;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.06);
  --shadow-hover: 0 16px 38px rgba(16,24,40,.14);
  --sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base ---------- */
body {
  font-family: var(--sans);
  color: var(--body);
  background: var(--bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--accent-dark); text-decoration: none; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--sans); color: var(--ink);
  font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
}
.text-primary { color: var(--accent) !important; }
.bg-primary { background: var(--accent) !important; }

/* ---------- sidebar (aside) ---------- */
.probootstrap-aside {
  background: #ffffff;
  border-right: 1px solid var(--line);
  box-shadow: 1px 0 0 rgba(16,24,40,.02);
  scrollbar-width: thin;
}
.probootstrap-aside::-webkit-scrollbar { width: 6px; }
.probootstrap-aside::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.probootstrap-aside::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.probootstrap-aside::-webkit-scrollbar-track { background: transparent; }
.probootstrap-aside .probootstrap-site-logo { padding: 34px 30px 26px; }
.probootstrap-aside .probootstrap-site-logo .probootstrap-logo {
  color: var(--accent);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .04em;
  white-space: nowrap;
}
.probootstrap-aside .probootstrap-site-logo p {
  color: var(--faint);
  font-size: 13px;
  line-height: 1.6;
}
.probootstrap-aside .probootstrap-site-logo p a { color: var(--muted); }
.probootstrap-aside .probootstrap-site-logo p a:hover { color: var(--accent); }

/* nav links + animated accent underline */
.probootstrap-aside .probootstrap-nav ul li { margin-bottom: 6px; }
.probootstrap-aside .probootstrap-nav ul li a {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 5px 0;
}
.probootstrap-aside .probootstrap-nav ul li a:hover { color: var(--accent); }
.probootstrap-aside .probootstrap-nav ul li a:after { background: var(--accent); height: 2px; }
.probootstrap-aside .probootstrap-nav ul li a:hover:after { width: 26px; }
.probootstrap-aside .probootstrap-nav ul li.active a { color: var(--accent); }
.probootstrap-aside .probootstrap-nav ul li.active a:after { width: 100%; background: var(--accent); }

.probootstrap-aside .probootstrap-aside-footer { font-size: 13px; color: var(--faint); }
.probootstrap-aside .probootstrap-aside-footer p { color: var(--faint); }
.probootstrap-aside-social a { color: var(--faint); font-size: 18px; transition: color .18s ease; }
.probootstrap-aside-social a:hover { color: var(--accent); }

/* ---------- mobile top bar ---------- */
.probootstrap-main .probootstrap-bar { border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(16,24,40,.04); }
.probootstrap-main .probootstrap-bar .probootstrap-toggle { color: var(--ink); }
.probootstrap-main .probootstrap-bar .probootstrap-toggle:hover { color: var(--accent); }
.probootstrap-main .probootstrap-bar .probootstrap-main-site-logo a { color: var(--accent); letter-spacing: .04em; font-weight: 800; white-space: nowrap; }

/* ---------- photography grid tiles ---------- */
.probootstrap-main .card-columns .card {
  background: #f0f1f3;
  border: 0;
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow .25s ease, transform .25s ease;
}
.probootstrap-main .card-columns .card a { display: block; border-radius: var(--radius); overflow: hidden; }
.probootstrap-main .card-columns .card a .card-img-top {
  border-radius: var(--radius) !important;
  display: block;
  width: 100%;
  transition: transform .55s cubic-bezier(.2,.6,.2,1);
}
/* replace the dated shrink + white-inset hover with a clean zoom + lift */
.probootstrap-main .card-columns .card:hover,
.probootstrap-main .card-columns .card:focus {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.probootstrap-main .card-columns .card:hover a .card-img-top,
.probootstrap-main .card-columns .card:focus a .card-img-top { transform: scale(1.06); }
/* neutralise the old translucent-white framing overlay, use a soft dark gradient instead */
.probootstrap-main .card-columns .card a:before {
  background: linear-gradient(to top, rgba(15,17,22,.30), rgba(15,17,22,0) 55%) !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  border-radius: var(--radius);
}
.probootstrap-main .card-columns .card:hover a:before,
.probootstrap-main .card-columns .card:focus a:before { visibility: visible; opacity: 1; }

/* ---------- inner-page typography ---------- */
.probootstrap-main .container-fluid h1 { font-size: 40px; margin-bottom: 22px; }
.probootstrap-main .container-fluid h2, .probootstrap-main .container-fluid h2.h1 { font-size: 32px; }
.probootstrap-main .container-fluid p { color: var(--body); }
.probootstrap-main .container-fluid a:not(.btn) { color: var(--accent); }
.probootstrap-main .container-fluid a:not(.btn):hover { color: var(--accent-dark); }
@media (max-width: 768px) {
  .probootstrap-main .container-fluid h1 { font-size: 30px; }
  .probootstrap-main .container-fluid h2, .probootstrap-main .container-fluid h2.h1 { font-size: 25px; }
}

/* hero / lead image on inner pages: rounded + soft shadow */
.probootstrap-main p.mb-5 > img.img-fluid {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- services: feature cards ---------- */
.probootstrap-media {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.probootstrap-media:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.probootstrap-media .probootstrap-icon,
.media .probootstrap-icon span { color: var(--accent); }
.probootstrap-media .probootstrap-icon span { color: var(--accent); }
.probootstrap-media .media-body h5 { color: var(--ink); font-weight: 700; margin-bottom: 10px; }
.probootstrap-media .media-body p { color: var(--body); font-size: 15.5px; line-height: 1.7; }

/* ---------- team / related gallery (owl → scroll-snap row) ---------- */
.owl-carousel { gap: 24px; padding-bottom: 16px; }
.owl-carousel > .item { flex: 0 0 auto; width: min(320px, 82%); }
.owl-carousel .item {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.owl-carousel .item:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.owl-carousel .item > img.img-fluid { width: 100%; display: block; }
.owl-carousel .item .border {
  border: 0 !important;
  border-top: 0 !important;
  padding: 22px !important;
}
.owl-carousel .item .border h4 { color: var(--ink); font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.owl-carousel .item .border p { color: var(--body); font-size: 15px; line-height: 1.65; margin-bottom: 0; }
.owl-carousel::-webkit-scrollbar { height: 8px; }
.owl-carousel::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

/* ---------- contact form ---------- */
.probootstrap-form .form-group { margin-bottom: 20px; }
.probootstrap-form label { color: var(--ink); font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.form-control {
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm);
  height: 52px;
  font-size: 16px;
  color: var(--ink) !important;
  background: #fff !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-control:focus, .form-control:active {
  border: 1px solid var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea.form-control { min-height: 150px; height: auto; }

/* ---------- buttons ---------- */
.btn {
  border-radius: 999px;
  padding: 15px 32px;
  font-size: 13px;
  letter-spacing: .08em;
  font-weight: 700;
}
.btn.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active {
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  color: #fff !important;
}
input[type="submit"].btn.btn-primary { -webkit-appearance: none; appearance: none; }

/* ---------- section rhythm ---------- */
.probootstrap-section { padding: 5em 0 3em; }
@media (max-width: 768px) { .probootstrap-section { padding: 3em 0 1.5em; } }

/* ---------- mobile footer strip ---------- */
.probootstrap-main > .container-fluid.d-md-none {
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding-top: 22px;
}
.probootstrap-main > .container-fluid.d-md-none p { color: var(--faint); font-size: 13px; }