/**
 * TRB Kyoto visual system for Divi 5.
 *
 * Design direction: an editorial, booking-first cycling-tour site inspired by
 * the spatial rhythm of Tokyo Bike Trip. It deliberately does not copy the
 * reference site's logo, artwork, text, imagery, or HTML.
 */

:root {
  --trb-kyoto-base: #f7f2e8;
  --trb-paper: #ffffff;
  --trb-ink: #1e2528;
  --trb-kyoto-orange: #d96a31;
  --trb-kyoto-orange-dark: #b84e20;
  --trb-cyan: #00afc1;
  --trb-stone: #d8ddd6;
  --trb-moss: #6f7b5b;
  --trb-muted: #637077;
  --trb-white: #ffffff;
  --trb-shadow: 0 24px 56px rgba(20, 33, 40, 0.08);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  background: var(--trb-kyoto-base);
  color: var(--trb-ink);
}

body,
.et_pb_button,
.et_pb_module,
.et_pb_text,
.et_pb_menu__menu,
.et_pb_mobile_menu {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--trb-kyoto-orange);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Reusable Divi classes
   -------------------------------------------------------------------------- */

/* Hero: set the photograph in Divi. The pale editorial gradient keeps text
   readable while preserving the right side of the scene. */
.trb-kyoto-hero {
  align-items: center;
  display: flex;
  isolation: isolate;
  min-height: min(780px, calc(100svh - 80px));
  overflow: hidden;
  position: relative;
}

.trb-kyoto-hero::before {
  background: linear-gradient(90deg, rgba(247, 242, 232, 0.98) 0%, rgba(247, 242, 232, 0.95) 37%, rgba(247, 242, 232, 0.62) 55%, rgba(247, 242, 232, 0.08) 76%, rgba(247, 242, 232, 0) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.trb-kyoto-hero .et_pb_row,
.trb-kyoto-hero .et_pb_module {
  position: relative;
  z-index: 1;
}

.trb-kyoto-eyebrow,
.trb-kyoto-eyebrow * {
  color: var(--trb-kyoto-orange-dark) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

.trb-kyoto-h1,
.trb-kyoto-h1 h1,
.trb-kyoto-h1 h1 * {
  color: var(--trb-ink) !important;
  font-size: clamp(44px, 6.2vw, 82px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.065em !important;
  line-height: 0.94 !important;
  text-transform: uppercase !important;
}

.trb-kyoto-h2,
.trb-kyoto-h2 h2,
.trb-kyoto-h2 h2 * {
  color: var(--trb-ink) !important;
  font-size: clamp(32px, 4.25vw, 60px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.98 !important;
  text-transform: uppercase !important;
}

.trb-kyoto-body,
.trb-kyoto-body p,
.trb-kyoto-body * {
  color: var(--trb-ink) !important;
  font-size: 17px !important;
  line-height: 1.72 !important;
}

/* Retained for existing Hero modules. In the new light Hero it intentionally
   resolves to ink, so the user does not have to remove an existing class. */
.trb-kyoto-body--light,
.trb-kyoto-body--light p,
.trb-kyoto-body--light * {
  color: var(--trb-ink) !important;
}

.trb-kyoto-cta .et_pb_button,
.trb-kyoto-cta a,
.et_pb_button.trb-kyoto-cta,
a.trb-kyoto-cta {
  align-items: center;
  background: var(--trb-ink) !important;
  border: 1px solid var(--trb-ink) !important;
  border-radius: 999px !important;
  color: var(--trb-white) !important;
  display: inline-flex !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  justify-content: center;
  letter-spacing: 0.11em !important;
  line-height: 1.2 !important;
  min-height: 50px;
  padding: 15px 24px !important;
  text-transform: uppercase !important;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out !important;
}

.trb-kyoto-cta .et_pb_button:hover,
.trb-kyoto-cta a:hover,
.et_pb_button.trb-kyoto-cta:hover,
a.trb-kyoto-cta:hover {
  background: var(--trb-kyoto-orange) !important;
  border-color: var(--trb-kyoto-orange) !important;
  color: var(--trb-ink) !important;
  transform: translateY(-2px);
}

.trb-kyoto-cta--outline .et_pb_button,
.trb-kyoto-cta--outline a,
.et_pb_button.trb-kyoto-cta--outline,
a.trb-kyoto-cta--outline {
  background: transparent !important;
  border-color: var(--trb-ink) !important;
  color: var(--trb-ink) !important;
}

.trb-kyoto-status-band {
  background: var(--trb-kyoto-orange) !important;
  color: var(--trb-ink) !important;
  text-align: center;
}

.trb-kyoto-status-band p,
.trb-kyoto-status-band a {
  color: var(--trb-ink) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Add this class to The Kyoto Ride Row for an editorial image/text treatment. */
.trb-kyoto-editorial {
  border-bottom: 1px solid var(--trb-stone);
  border-top: 1px solid var(--trb-stone);
  padding-bottom: clamp(28px, 4vw, 56px) !important;
  padding-top: clamp(28px, 4vw, 56px) !important;
}

.trb-kyoto-editorial .et_pb_image img {
  border: 1px solid var(--trb-stone);
  display: block;
}

/* Tour cards remain easily comparable but lose the heavy shadow and hard box. */
.trb-kyoto-tour-card {
  background: var(--trb-paper);
  border: 1px solid var(--trb-stone);
  box-shadow: none;
  overflow: hidden;
}

.trb-kyoto-tour-card .et_pb_image img {
  aspect-ratio: 3 / 2;
  display: block;
  object-fit: cover;
  width: 100%;
}

.trb-kyoto-tour-card .et_pb_text,
.trb-kyoto-tour-card .et_pb_button_module_wrapper {
  padding-left: clamp(24px, 3.5vw, 48px);
  padding-right: clamp(24px, 3.5vw, 48px);
}

.trb-kyoto-tour-card .et_pb_text:first-child {
  padding-top: clamp(30px, 4vw, 56px);
}

.trb-kyoto-tour-card .et_pb_button_module_wrapper:last-child {
  padding-bottom: clamp(30px, 4vw, 56px);
}

.trb-kyoto-tour-meta,
.trb-kyoto-tour-meta * {
  color: var(--trb-muted) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.11em !important;
  line-height: 1.45 !important;
  text-transform: uppercase !important;
}

/* Existing Why TRB modules: transform old shadow cards into numbered strips. */
.trb-kyoto-value-card,
.trb-kyoto-value-strip {
  background: transparent !important;
  border-bottom: 1px solid var(--trb-stone) !important;
  border-top: 3px solid var(--trb-kyoto-orange) !important;
  box-shadow: none !important;
  min-height: 100%;
  padding: 28px 0 !important;
}

.trb-kyoto-value-card .et_pb_main_blurb_image,
.trb-kyoto-value-strip .et_pb_main_blurb_image {
  margin-bottom: 18px !important;
}

.trb-kyoto-value-card .et_pb_blurb_container h4,
.trb-kyoto-value-strip .et_pb_blurb_container h4 {
  color: var(--trb-ink) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.trb-kyoto-value-card .et_pb_blurb_description,
.trb-kyoto-value-strip .et_pb_blurb_description {
  color: var(--trb-muted) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* How It Works: apply trb-kyoto-steps to its 3-column Row and
   trb-kyoto-step to each Blurb Module. */
.trb-kyoto-steps {
  border-bottom: 1px solid var(--trb-stone);
  border-top: 1px solid var(--trb-stone);
}

.trb-kyoto-step {
  border-left: 1px solid var(--trb-stone);
  min-height: 100%;
  padding: 32px clamp(20px, 3vw, 40px) !important;
}

.trb-kyoto-step:first-child {
  border-left: 0;
}

.trb-kyoto-step .et_pb_main_blurb_image {
  margin-bottom: 18px !important;
}

.trb-kyoto-step .et_pb_blurb_container h4 {
  color: var(--trb-ink) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.trb-kyoto-step .et_pb_blurb_description {
  color: var(--trb-muted) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.trb-kyoto-gallery .et_pb_gallery_image img,
.trb-kyoto-gallery .et_pb_image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.trb-kyoto-faq .et_pb_toggle {
  background: transparent;
  border-color: var(--trb-stone);
  border-style: solid;
  border-width: 0 0 1px;
  padding: 24px 0;
}

.trb-kyoto-faq .et_pb_toggle_title {
  color: var(--trb-ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.trb-kyoto-faq .et_pb_toggle_open .et_pb_toggle_title::before,
.trb-kyoto-faq .et_pb_toggle_close .et_pb_toggle_title::before {
  color: var(--trb-kyoto-orange-dark);
}

.trb-kyoto-final-cta {
  background-color: var(--trb-ink) !important;
  color: var(--trb-white) !important;
  position: relative;
}

.trb-kyoto-final-cta .trb-kyoto-eyebrow,
.trb-kyoto-final-cta .trb-kyoto-eyebrow * {
  color: var(--trb-kyoto-orange) !important;
}

.trb-kyoto-final-cta .trb-kyoto-h2,
.trb-kyoto-final-cta .trb-kyoto-h2 h2,
.trb-kyoto-final-cta .trb-kyoto-h2 h2 *,
.trb-kyoto-final-cta .trb-kyoto-body,
.trb-kyoto-final-cta .trb-kyoto-body p,
.trb-kyoto-final-cta .trb-kyoto-body * {
  color: var(--trb-white) !important;
}

.trb-kyoto-final-cta .trb-kyoto-cta .et_pb_button,
.trb-kyoto-final-cta .trb-kyoto-cta a {
  background: var(--trb-kyoto-orange) !important;
  border-color: var(--trb-kyoto-orange) !important;
  color: var(--trb-ink) !important;
}

.trb-kyoto-reading-width {
  max-width: 760px !important;
}

/* --------------------------------------------------------------------------
   Child-theme global header and footer
   -------------------------------------------------------------------------- */

#top-header,
#main-header,
#main-footer {
  display: none !important;
}


.trb-global-footer {
  background: var(--trb-ink);
  color: var(--trb-white);
  padding: 80px 5% 28px;
}

.trb-global-footer__inner,
.trb-global-footer__meta {
  margin: 0 auto;
  max-width: 1280px;
}

.trb-global-footer__inner {
  align-items: end;
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
}

.trb-global-footer__eyebrow {
  color: var(--trb-kyoto-orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  margin: 0 0 12px;
}

.trb-global-footer h2 {
  color: var(--trb-white) !important;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.92;
  margin: 0 0 16px;
}

.trb-global-footer__brand > p:last-child {
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  max-width: 400px;
}

.trb-global-footer__nav {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trb-global-footer a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-decoration: none;
}

.trb-global-footer a:hover,
.trb-global-footer a:focus-visible {
  color: var(--trb-kyoto-orange);
}

.trb-global-footer__meta {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  justify-content: space-between;
  margin-top: 64px;
  padding-top: 20px;
}

.trb-global-footer__meta p,
.trb-global-footer__meta a {
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  letter-spacing: 0.07em;
  margin: 0;
}

.trb-global-footer__meta div {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

@media (max-width: 980px) {
  html {
    scroll-padding-top: 66px;
  }


  .trb-kyoto-hero {
    min-height: 680px;
  }

  .trb-kyoto-hero::before {
    background: linear-gradient(180deg, rgba(247, 242, 232, 0.94) 0%, rgba(247, 242, 232, 0.76) 52%, rgba(247, 242, 232, 0.18) 100%);
  }

  .trb-global-header__inner {
    grid-template-columns: 1fr auto;
    min-height: 66px;
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .trb-global-header__desktop-nav {
    display: none;
  }

  .trb-global-header__mobile-nav {
    display: block;
    position: relative;
  }

  .trb-global-header__mobile-nav summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    list-style: none;
    min-height: 40px;
    min-width: 40px;
  }

  .trb-global-header__mobile-nav summary::-webkit-details-marker {
    display: none;
  }

  .trb-global-header__mobile-nav summary > span[aria-hidden="true"] {
    background: var(--trb-ink);
    display: block;
    height: 2px;
    width: 24px;
  }

  .trb-global-header__mobile-nav nav {
    background: var(--trb-paper);
    border: 1px solid var(--trb-stone);
    box-shadow: var(--trb-shadow);
    display: grid;
    gap: 0;
    min-width: 270px;
    padding: 16px 20px 20px;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
  }

  .trb-global-header__mobile-nav nav a {
    border-bottom: 1px solid var(--trb-stone);
    color: var(--trb-ink);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.1em;
    padding: 15px 0;
  }

  .trb-global-header__mobile-nav nav a:last-child {
    border-bottom: 0;
  }

  .trb-global-header__mobile-cta {
    background: var(--trb-ink);
    border-radius: 999px;
    color: var(--trb-white) !important;
    justify-content: center;
    margin-top: 16px;
    padding: 14px !important;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .trb-kyoto-hero {
    min-height: 620px;
  }

  .trb-kyoto-hero .et_pb_row {
    width: 88%;
  }

  .trb-kyoto-cta .et_pb_button,
  .trb-kyoto-cta a,
  .et_pb_button.trb-kyoto-cta,
  a.trb-kyoto-cta {
    width: 100%;
  }

  .trb-kyoto-value-card,
  .trb-kyoto-value-strip {
    margin-bottom: 16px !important;
  }

  .trb-kyoto-step {
    border-left: 0;
    border-top: 1px solid var(--trb-stone);
  }

  .trb-kyoto-step:first-child {
    border-top: 0;
  }

  .trb-global-footer {
    padding-bottom: 88px;
    padding-top: 56px;
  }

  .trb-global-footer__inner {
    gap: 38px;
    grid-template-columns: 1fr;
  }

  .trb-global-footer__meta {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .trb-kyoto-cta .et_pb_button,
  .trb-kyoto-cta a,
  .et_pb_button.trb-kyoto-cta,
  a.trb-kyoto-cta {
    transition: none !important;
  }
}

/* v1.3.0 — official Kyoto logos and supplied photo hero */
.trb-global-footer__logo-image { display:block; width:min(100%, 340px); height:auto; margin:0 0 22px; }


/* =========================================
   TRB KYOTO — BRAND COLOR UPDATE
   Main: Cyan / Secondary: Yellow
   ========================================= */

:root {
  --trb-brand-cyan: #29B1E1;
  --trb-brand-cyan-dark: #087FA8;
  --trb-brand-yellow: #FFD400;

  /* Compatibility with existing styles */
  --trb-kyoto-orange: var(--trb-brand-cyan);
  --trb-kyoto-orange-dark: var(--trb-brand-cyan-dark);
  --trb-moss: var(--trb-brand-cyan);
  --trb-cyan: var(--trb-brand-cyan);
}

/* Focus indicators */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-color: var(--trb-brand-cyan);
}

/* Primary CTA — Yellow */
.trb-kyoto-cta .et_pb_button,
.trb-kyoto-cta a,
.et_pb_button.trb-kyoto-cta,
a.trb-kyoto-cta {
  background: var(--trb-brand-yellow) !important;
  border-color: var(--trb-brand-yellow) !important;
  color: #17242C !important;
}

/* CTA hover — Cyan */
.trb-kyoto-cta .et_pb_button:hover,
.trb-kyoto-cta a:hover,
.et_pb_button.trb-kyoto-cta:hover,
a.trb-kyoto-cta:hover {
  background: var(--trb-brand-cyan) !important;
  border-color: var(--trb-brand-cyan) !important;
  color: #17242C !important;
}

/* Announcement band */
.trb-kyoto-status-band {
  background: var(--trb-brand-cyan) !important;
}

/* Editorial accent */
.trb-kyoto-value-card,
.trb-kyoto-value-strip {
  border-top-color: var(--trb-brand-cyan) !important;
}

/* Dark section CTA */
.trb-kyoto-final-cta .trb-kyoto-cta .et_pb_button,
.trb-kyoto-final-cta .trb-kyoto-cta a {
  background: var(--trb-brand-yellow) !important;
  border-color: var(--trb-brand-yellow) !important;
  color: #17242C !important;
}

/* Footer accent */
.trb-global-footer__eyebrow,
.trb-global-footer a:hover,
.trb-global-footer a:focus-visible {
  color: var(--trb-brand-cyan);
}

/* Mobile menu CTA */
.trb-global-header__mobile-cta {
  background: var(--trb-brand-yellow) !important;
  color: #17242C !important;
}