/* Kayiwa Craves — UX polish.
   White text on the bright brand orange (#0C7C79) is 3.4:1, under the 4.5:1
   minimum for normal text. These surfaces use the deeper brand orange instead
   (#0A6E6B, 4.9:1; hover #096360, 6.5:1). Decorative orange is unchanged. */

:root { --kc-btn: #0C7C79; --kc-btn-hover: #096360; }

.btn--primary,
.field button,
.skip,
.badge,
.cart-count { background: var(--kc-btn); }

.btn--primary:hover,
.btn--primary:focus-visible,
.field button:hover,
.field button:focus-visible { background: var(--kc-btn-hover); color: var(--white); }

.btn--ink:hover,
.btn--light:hover,
.btn--outline:hover,
.rail-next:hover { background: var(--kc-btn); border-color: var(--kc-btn); }

.chip[aria-pressed='true'],
.pb-band .chip[aria-pressed="true"],
.pager [aria-current],
.pb-copy.is-copied { background: var(--kc-btn); border-color: var(--kc-btn); }

/* Links inside long-form text: readable colour, and underlined so they are not
   identified by colour alone. */
.prose a:not(.btn) {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Reading size for guides and stories: 17px on larger screens, 16px on phones. */
.prose p:not(.pull),
.prose li { font-size: 17px; }

@media (max-width: 780px) {
  .prose p:not(.pull),
  .prose li,
  .split__text p:not(.pull) { font-size: 16px; }
}

/* Page banner photos. Elementor's `.elementor img { height: auto }` loads after
   the site stylesheet and has the same specificity, so the banner photo kept its
   natural height and spilled out below the header onto the page. Pin it to the
   banner box instead. */
.subhero .subhero__bg { overflow: hidden; }
.subhero .subhero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* WooCommerce forms inside the site shell (cart, checkout, my account). */
.kc-wc__inner { max-width: 1080px; margin: 0 auto; font-size: 15px; line-height: 1.6; color: var(--ink); }
.kc-wc h2, .kc-wc h3 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin: 8px 0 14px; }
.kc-wc label { font-size: 14px; font-weight: 600; }
.kc-wc input.input-text, .kc-wc select, .kc-wc textarea, .kc-wc .select2-selection { min-height: 46px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.kc-wc input.input-text:focus, .kc-wc select:focus, .kc-wc textarea:focus { outline: 2px solid var(--kc-btn); outline-offset: 1px; border-color: transparent; }
.kc-wc .button, .kc-wc button.button, .kc-wc a.button, .kc-wc #place_order { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 0; border-radius: var(--radius-btn); background: var(--kc-btn); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; }
.kc-wc .button:hover, .kc-wc #place_order:hover { background: var(--kc-btn-hover); color: #fff; }
.kc-wc #place_order { width: 100%; font-size: 16px; min-height: 54px; }
.kc-wc table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.kc-wc table.shop_table th, .kc-wc table.shop_table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.kc-wc table.shop_table thead th { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); background: var(--cream); }
.kc-wc .order-total td, .kc-wc .order-total th { font-size: 17px; font-weight: 800; }
.kc-wc .woocommerce-info, .kc-wc .woocommerce-message, .kc-wc .woocommerce-error { list-style: none; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--cream); color: var(--ink-2); }
.kc-wc .woocommerce-error { border-left-color: #B42318; }
.kc-wc #payment { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
.kc-wc a:not(.button) { color: var(--accent-ink); }
.kc-wc .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kc-wc .woocommerce-MyAccount-navigation a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px; text-decoration: none; }
.kc-wc .woocommerce-MyAccount-navigation .is-active a { background: var(--dark); border-color: var(--dark); color: #fff; }
@media (max-width: 780px) { .kc-wc table.shop_table th, .kc-wc table.shop_table td { padding: 10px; } }
/* Legal links: 44px touch targets on phones, without changing how they look. */
@media (max-width: 782px) {
  .footer__bottom nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
  }
  .footer__bottom nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
/* Sticky jump to the booking box on phones; hides once the box is on screen. */
.kc-jump {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--accent-ink, #0A6E6B);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(20, 32, 43, .28);
  transform: translate(-50%, 120%);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}
.kc-jump.is-on { transform: translate(-50%, 0); opacity: 1; }
.kc-jump:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 782px) { .kc-jump { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .kc-jump { transition: none; } }
/* --- Guide colour rhythm -------------------------------------------------
   The body of a guide was one unbroken white run with cool grey table rules
   that did not belong to the warm palette. Data blocks now sit on cream, so
   the page has a rhythm and the tables read as panels. */
.guide-body .datatable {
  border-color: var(--line, #D8E2E3);
  border-radius: var(--radius, 10px);
  overflow: hidden;
}
.guide-body .datatable th,
.guide-body .datatable td { border-color: var(--line, #D8E2E3); }
.guide-body .datatable thead th { background: var(--cream, #EAF2F2); }
.guide-body .datatable tbody tr:nth-child(even) { background: rgba(255, 243, 224, .5); }

/* The sticky rail reads as defined blocks rather than text floating in space. */
.aside .aside__block {
  background: var(--cream, #EAF2F2);
  border: 1px solid var(--line, #D8E2E3);
  border-radius: var(--radius, 10px);
  padding: 16px 18px;
}
.aside .aside__block + .aside__block { margin-top: 14px; }

/* Booking card in the rail. */
.rail-book { list-style: none; margin: 0; padding: 0; }
.rail-book li + li { border-top: 1px solid var(--line, #D8E2E3); }
.rail-book a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 8px 0;
  color: var(--ink, #14202B);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}
.rail-book a:hover { color: var(--accent-ink, #0A6E6B); text-decoration: underline; }
.rail-book a span { color: var(--ink-3, #5E6B75); font-weight: 500; }
.rail-book__note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3, #5E6B75); }
.rail-book__note a { color: var(--accent-ink, #0A6E6B); }
/* Read next: links a post to its country guide and nearest siblings. */
.kc-next {
  margin: 36px 0 0;
  padding: 22px 24px;
  background: var(--cream, #EAF2F2);
  border: 1px solid var(--line, #D8E2E3);
  border-radius: var(--radius, 10px);
}
.kc-next h2 {
  margin: 0 0 14px;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink, #0A6E6B);
}
.kc-next__guide {
  display: block;
  padding: 12px 0;
  border-top: 1px solid var(--line, #D8E2E3);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, #14202B);
  text-decoration: none;
}
.kc-next__guide span {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-3, #5E6B75);
}
.kc-next__guide:hover { color: var(--accent-ink, #0A6E6B); }
.kc-next__list { list-style: none; margin: 0; padding: 0; }
.kc-next__list li { border-top: 1px solid var(--line, #D8E2E3); }
.kc-next__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #14202B);
  text-decoration: none;
}
.kc-next__list a:hover { color: var(--accent-ink, #0A6E6B); text-decoration: underline; }
/* Shop: products are not on sale yet. State first, notify second. */
.kc-soon {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line, #D8E2E3);
  border-radius: 999px;
  background: var(--cream, #EAF2F2);
  color: var(--ink-3, #5E6B75);
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kc-notify {
  display: block;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink, #0A6E6B);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.kc-notify:hover { text-decoration: none; }
.kc-notify:focus-visible { outline: 2px solid var(--accent-ink, #0A6E6B); outline-offset: 3px; }
/* --- Single post layout ---------------------------------------------------
   The theme already gives .article a 1fr + 280px grid and ships a sticky
   .aside/.toc for the right track; guides use it, posts never did, so that
   track sat empty and the 550px measure looked stranded. Centring the column
   fixed the gutter but pulled the text off the x=63 spine the banner title
   and every guide share. Keep the native grid, fill the rail with contents,
   and let figures run wider than the measure for rhythm. */
@media (min-width: 700px) {
  body.kc-post article { min-width: 0; }
  /* Media is allowed past the measure; running text is not. The cap lives on
     .prose itself, so widening a figure means lifting it off .prose and
     putting the measure back on the text children instead. */
  body.kc-post .prose { max-width: none; }
  body.kc-post .prose > * { max-width: 760px; }
  body.kc-post .prose > figure.wp-block-image,
  body.kc-post .prose > .wp-block-table,
  body.kc-post .prose > .kc-next {
    max-width: 820px;
    width: 100%;
    margin-left: 0;
    transform: none;
  }
}
body.kc-post .prose p { line-height: 1.68; }
body.kc-post .prose h2 { margin-top: 2.2em; scroll-margin-top: 24px; }
body.kc-post .prose figure.wp-block-image { margin-top: 34px; margin-bottom: 34px; }
body.kc-post .prose figure.wp-block-image img { border-radius: var(--radius, 10px); }
body.kc-post .prose figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3, #5E6B75);
}
/* The contents rail marks the section being read. */
body.kc-post .toc a.is-current { color: var(--accent-ink, #0A6E6B); font-weight: 600; }
/* --- Single post: banner, byline, lede (kc-post-polish) -------------------
   The banner photograph and the figure under the title were the same image, so
   every post opened with its own picture twice. The figure is gone; these rules
   give what remains a clear order: banner, then a meta row, then the text. */
body.kc-post .subhero__body { max-width: 860px; }
body.kc-post .subhero__body h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; max-width: 22ch; }
body.kc-post .subhero__body p { max-width: 58ch; }
/* The avatar had no dimensions and the row was not a flex container, so the
   portrait collapsed to zero width and the byline read as stray grey text. */
body.kc-post .prose .byline { display: flex; align-items: center; gap: 12px; font-size: 13.5px;
  padding-bottom: 18px; margin: 0 0 30px; border-bottom: 1px solid var(--line, #D8E2E3); }
body.kc-post .prose .byline strong { color: var(--ink, #14202B); font-weight: 600; }
body.kc-post .byline__avatar { flex: 0 0 auto; }
body.kc-post .byline__avatar img { width: 38px; height: 38px; max-width: none; border-radius: 50%;
  object-fit: cover; display: block; }
/* Opening paragraph carries the reader in, so it is set a size above the body. */
body.kc-post .prose > p:first-of-type { font-size: 19px; line-height: 1.6; color: var(--ink, #14202B); }
@media (max-width: 780px) { body.kc-post .prose > p:first-of-type { font-size: 17.5px; } }
@media (max-width: 1120px) {
  /* The grid collapses here, which would drop the contents list beneath the
     article it is meant to introduce. Nothing useful, so it goes. */
  body.kc-post .kc-toc { display: none; }
}

/* PALETTE-20261026 */