/* ----------------------------------------------------------
   KHKAB Booking – Theme (TCM-inspired)
   Fonts: Cormorant Garamond (headings), Inter (body)
   Palette: jade, sage, sand, rice, ink + cinnabar accent
---------------------------------------------------------- */

/* Google Fonts fallback */
/* cormorant-garamond-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/cormorant-garamond-v21-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ---------------- Colors as CSS variables ---------------- */
:root{
  /* Core palette */
  --ink:        #182122;
  --jade-900:   #163632;
  --jade-800:   #1E4B45;
  --jade-700:   #2E6E66;
  --jade-600:   #3C8D7A;   /* primary */
  --jade-500:   #5EA394;
  --sage-300:   #BFCFC7;
  --sage-200:   #CFDAD4;
  --sand-100:   #EDE7DD;
  --rice-50:    #FAF7F1;
  --cloud-500:  #6C757D;
  --cinnabar:   #C2432D;   /* subtle accent */

  /* UI tokens */
  --bg-body:      var(--rice-50);
  --text-body:    var(--ink);
  --text-muted:   var(--cloud-500);
  --primary:      var(--jade-600);
  --primary-strong: var(--jade-700);
  --primary-deep: var(--jade-800);
  --primary-ghost: var(--sage-200);
  --border-soft:  rgba(0,0,0,.08);
  --card-bg:      #fff;
  --card-border:  rgba(0,0,0,.06);
  --focus-ring:   color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ---------------- Base & Typography ---------------- */
html, body{
  background: var(--bg-body);
  color: var(--text-body);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
}
h1,h2,h3,h4,.display-1,.display-2,.display-3{
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  color: var(--jade-900);
  letter-spacing: .2px;
}
h1,.display-3{ font-weight: 600; }
h2,h3{ font-weight: 500; }

small,.small,.text-muted{ color: var(--text-muted) !important; }

/* Links */
a{ color: var(--primary); }
a:hover{ color: var(--primary-strong); }

/* ---------------- Navbar ---------------- */
.navbar{
  background: var(--sand-100) !important;
  border-bottom: 1px solid var(--border-soft);
  /* se till att Bootstraps aktiva färg är svart */
  --bs-navbar-active-color: #111;
}
.navbar-brand{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  color: var(--jade-900) !important;
  letter-spacing: .2px;
}
.navbar .nav-link{
  color: var(--jade-800);
  font-weight: 500;
  padding: .5rem .75rem;
}
.navbar .nav-link:hover{ color: var(--primary-strong); }

/* Aktiv länk: svart + bold (ersätter tidigare primärfärg) */
.navbar .nav-link.active,
.navbar .nav-link.show,
.navbar .nav-link[aria-current="page"]{
  color: #111 !important;
  font-weight: 700 !important;
  position: relative;
  text-decoration: none;
}
/* Understreck för aktiv länk – i svart */
.navbar .nav-link.active::after,
.navbar .nav-link.show::after,
.navbar .nav-link[aria-current="page"]::after{
  content:"";
  position:absolute; left:.75rem; right:.75rem; bottom:.35rem;
  height:2px; background:#111;
  border-radius:2px;
}

/* ---------------- Buttons ---------------- */
.btn-primary{
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-strong);
  --bs-btn-hover-border-color: var(--primary-strong);
  --bs-btn-active-bg: var(--primary-deep);
  --bs-btn-active-border-color: var(--primary-deep);
  --bs-btn-disabled-bg: var(--primary-ghost);
  --bs-btn-disabled-border-color: var(--primary-ghost);
}
.btn-outline-primary{
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
}
.btn-link{ color: var(--primary); }
.btn-link:hover{ color: var(--primary-strong); }

/* ---------------- Cards ---------------- */
.card{
  border-radius: 16px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}
.card-header{
  border-bottom-color: var(--card-border);
  background: #fff;
}

/* ---------------- Forms ---------------- */
.form-control, .form-select{
  border-radius: 12px;
  border-color: var(--border-soft);
}
.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus{
  box-shadow: 0 0 0 .2rem var(--focus-ring);
  border-color: var(--primary);
}

/* ---------------- Tables ---------------- */
.table > :not(caption) > * > *{
  border-color: var(--card-border);
}
.table-striped > tbody > tr:nth-of-type(odd){
  --bs-table-accent-bg: color-mix(in srgb, var(--sand-100) 30%, transparent);
}

/* ---------------- Utilities ---------------- */
.badge.text-bg-success{ background-color: var(--jade-600) !important; }
.badge.text-bg-danger{ background-color: var(--cinnabar) !important; }

.border-soft{ border:1px solid var(--border-soft) !important; }
.text-accent{ color: var(--cinnabar) !important; }

.bi{ vertical-align: -.125em; }
.hr-soft{ height:1px; background: var(--card-border); border:0; margin: 1rem 0; }

/* ---- Sidebar spacing ---- */
.sidebar-row { --bs-gutter-x: 2rem; }
@media (min-width: 992px){ .sidebar-row { --bs-gutter-x: 3rem; } }

/* ---- Sidecards (Nyheter/Omdömen) ---- */
.sidecard { border-radius: 12px; }
.sidecard .card-header{
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem 1rem; background:transparent;
}
.icon-badge{
  flex:0 0 auto; width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center;
  background:#e7f1ee; color:#1f7a63;
}
.sidecard-title{ font-weight:700; letter-spacing:.02em; color:#0b3b36; }

/* ---------------- Service list ---------------- */
.service-card .card-body{ gap: .5rem; }
.service-card .price-amt{ white-space: nowrap; }

/* pill badge for duration */
.duration-pill{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:9999px;
  background:#e7f1ee;
  color:#0b3b36;
  font-weight:600;
  font-size:.95rem;
}

/* CTA layout */
.service-cta{ display:flex; align-items:center; gap:.75rem; }
@media (max-width: 991.98px){
  .service-card .card-body{ flex-wrap:wrap; }
  .service-cta{
    margin-top:.75rem; width:100%;
    display:flex; justify-content:space-between;
  }
}

/* ---------------- Week view ---------------- */

/* Nav-knappar mindre & tightare */
.week-nav .btn{
  padding:.25rem .5rem;
  line-height:1.2;
}
.week-nav .btn svg{ width:16px; height:16px; }

/* Scroller för tabellen */
.week-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.scroll-hint{ color: var(--text-muted); }

/* Smalare kolumner på små skärmar */
.table-week th, .table-week td{ vertical-align: top; }
@media (max-width: 767.98px){
  .table-week th, .table-week td{
    min-width: 92px;
    padding: .35rem .35rem;
    font-size: .95rem;
  }
  .time-btn{ padding:.25rem .5rem; font-size:.95rem; }
}

/* Slot-knappar */
.time-btn.btn{ border-radius:12px; }

/* ---------------- Footer ---------------- */
.site-footer{
  background: var(--sand-100);
  border-top: 1px solid var(--border-soft);
}

/* ---------------- Reduce motion ---------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ===== Week grid: lite mer mellanrum + lite större knappar ===== */
.table-week{ table-layout: fixed; }
.table-week th,
.table-week td{ padding: .28rem .22rem; }
.table-week th .fw-semibold{ font-size: .94rem; line-height: 1.15; }
.table-week th .small{ font-size: .72rem; opacity: .85; }
.table-week .btn-outline-primary.btn-sm{
  width: 100%;
  padding: .22rem .36rem;
  font-size: .82rem;
  line-height: 1.15;
  border-radius: .6rem;
  white-space: nowrap;
  min-width: 0;
}
.table-week td.text-start > .text-muted{
  display: block;
  text-align: center;
}

/* ===== Week grid: mobile finlir ===== */
@media (max-width: 575.98px){
  .table-week th,
  .table-week td{ padding: .26rem .16rem; }

  .table-week .btn-outline-primary.btn-sm{
    font-size: .80rem;
    line-height: 1.2;
    padding: .22rem .40rem;
    border-radius: .6rem;
    width: 100%;
    white-space: nowrap;
  }

  .week-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .week-scroll[data-can-scroll-right="true"]{
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
  }
}

/* ==== Booking: flyttad veckorubrik och tajtare tidsknappar ==== */
.week-header .btn.btn-sm{ padding: .35rem .6rem; }
.week-scroll{
  overflow-x: visible !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}
.table-week th,
.table-week td{ padding: .35rem .25rem; }
.table-week .btn-outline-primary.btn-sm{
  font-size: .80rem;
  line-height: 1.2;
  padding: .78rem .30rem;
  border-radius: .6rem;
  white-space: nowrap;
}

/* liten, mjuk badge för varaktighet */
.badge.bg-soft-jade{
  background: #e7f1ee;
  color: #0b3b36;
  font-weight: 600;
  padding: .35rem .6rem;
  border-radius: 999px;
}

/* Centrerar bilder på mobil och nollar ev. float från WP/tema */
@media (max-width: 767.98px) {
  .entry-content figure { text-align: center !important; }
  .entry-content img.alignright,
  .entry-content img.alignleft,
  .entry-content figure img,
  .entry-content .figure .figure-img {
    float: none !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.bg-body-tertiary { background-color: #EDE7DD !important; }

/* -------- KHK nav: säkerställ färger/typo -------- */
.khk-nav .nav-link,
.khk-nav .nav-link:visited{
  color: var(--jade-800);
  text-decoration: none;
  font-weight: 600;
}
.khk-nav .nav-link:hover,
.khk-nav .nav-link:focus{ color:#111; }

/* (valfritt) svart underline för aktiv länk om du vill visa strecket */
.khk-nav .nav-link.active::after,
.khk-nav .nav-link.show::after,
.khk-nav .nav-link[aria-current="page"]::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-8px;
  height:3px; background:#111; border-radius:2px;
}