/* ==========================================================================
   Core Training with Kinga — stylesheet
   Palette and type pulled from the original WordPress/Elementor site:
   primary blue #6EC1E4, button blue #66B4E9, secondary gray #54595F,
   body text gray #7A7A7A, font family Roboto.
   ========================================================================== */

:root {
  --color-primary: #6EC1E4;   /* headings */
  --color-button: #66B4E9;    /* buttons */
  --color-button-hover: #4FA3CC;
  --color-secondary: #54595F; /* nav / dark text */
  --color-text: #7A7A7A;      /* body copy */
  --color-emphasis: #d21f1f;  /* red call-outs (toned down slightly from pure #f00 for readability) */
  --color-border: #e7e7e7;
  --content-max-width: 1140px;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.65;
  background: #ffffff;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: #000;
  padding: 10px 16px;
  z-index: 100;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* ---------------------------------- Header ---------------------------------- */

.site-header {
  border-bottom: 1px solid var(--color-border);
}

.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 0;
  gap: 16px;
}

.site-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.site-title a {
  color: #2b2f33;
  text-decoration: none;
}

.site-navigation ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.site-navigation a {
  display: block;
  padding: 8px 16px;
  color: var(--color-secondary);
  font-weight: 500;
  border-radius: 4px;
}

.site-navigation a:hover,
.site-navigation a:focus-visible,
.site-navigation a[aria-current="page"] {
  color: var(--color-primary);
  text-decoration: none;
  background: rgba(110, 193, 228, 0.12);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--color-secondary);
}

@media (max-width: 700px) {
  .nav-toggle {
    display: inline-block;
  }

  .site-navigation {
    display: none;
    width: 100%;
    order: 3;
  }

  .site-navigation.is-open {
    display: block;
  }

  .site-navigation ul {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--color-border);
  }

  .site-navigation a {
    padding: 14px 4px;
    border-radius: 0;
  }
}

/* ---------------------------------- Main / page content ---------------------------------- */

main {
  padding: 48px 0 64px;
}

.page-title {
  color: var(--color-primary);
  font-size: 2.1rem;
  font-weight: 600;
  margin: 0 0 24px;
}

/* Home page hero: two-column layout, matches the original's 50/50 split */

.home-hero {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.home-hero .home-copy,
.home-hero .hero-photo {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 860px) {
  .home-hero {
    flex-direction: column;
  }

  .home-hero .hero-photo {
    order: -1;
  }
}

.hero-photo img {
  border-radius: 4px;
  width: 100%;
}

.home-copy h1 {
  color: var(--color-primary);
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 20px;
}

.home-copy h3 {
  color: #2b2f33;
  font-size: 1.3rem;
  margin: 0 0 8px;
}

.home-copy h4,
.home-copy h5,
.home-copy h6 {
  color: #2b2f33;
  margin: 0 0 12px;
}

.home-copy p {
  margin: 0 0 16px;
}

.callout {
  color: var(--color-emphasis);
  font-weight: 700;
}

.address-block {
  margin: 0 0 16px;
  line-height: 1.5;
}

.address-block .callout {
  display: block;
  margin-bottom: 4px;
}

.btn {
  display: inline-block;
  background: var(--color-button);
  color: #ffffff;
  font-weight: 600;
  font-size: 1.15rem;
  padding: 12px 28px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  margin: 8px 0 32px;
}

.btn:hover,
.btn:focus-visible {
  background: var(--color-button-hover);
  color: #ffffff;
  text-decoration: none;
}

.also-heading {
  font-size: 1.2rem;
  color: #2b2f33;
  margin: 8px 0 16px;
}

.livestream-promo {
  text-align: center;
  margin-top: 8px;
}

.livestream-promo img {
  margin: 0 auto 16px;
}

.livestream-promo .promo-link {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* ---------------------------------- Booking page ---------------------------------- */

.booking-intro {
  max-width: 640px;
  margin: 0 0 32px;
}

.widget-frame {
  border: 1px dashed #c9d6dc;
  background: #f7fbfd;
  border-radius: 6px;
  padding: 32px;
  min-height: 220px;
}

.widget-frame__placeholder h2 {
  color: var(--color-secondary);
  font-size: 1.15rem;
  margin: 0 0 12px;
}

.widget-frame__placeholder p {
  margin: 0 0 12px;
}

.widget-frame__placeholder code {
  background: #eef4f7;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.92em;
}

.fallback-note {
  margin-top: 28px;
  padding: 16px 20px;
  background: #f4f4f4;
  border-radius: 6px;
  font-size: 0.95rem;
}

/* ---------------------------------- SimplyBook.me widget isolation ---------------------------------- */
/* The widget is injected directly into the page (not an iframe), so without this,
   our own resets/heading/image/link styles above would bleed into its markup and
   can cause layout bugs (collapsed images, wrong spacing, etc). This restores
   normal browser defaults inside the widget's container so its own stylesheet
   is the only thing controlling its appearance. */
#sbw_knda7l,
#sbw_knda7l * {
  all: revert;
}

#sbw_knda7l iframe {
  max-height: 580px !important;
}

/* ---------------------------------- Generic page content ---------------------------------- */

.page-content h2 {
  color: #2b2f33;
  font-size: 1.3rem;
  margin: 32px 0 12px;
}

.page-content h2:first-child {
  margin-top: 0;
}

.page-content p,
.page-content li {
  margin: 0 0 14px;
}

.page-content ul {
  padding-left: 20px;
}

.livestream-schedule {
  background: #f7fbfd;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 20px 24px;
  margin: 20px 0 28px;
}

.livestream-schedule li {
  margin-bottom: 6px;
}

/* ---------------------------------- Footer ---------------------------------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 28px 0;
  text-align: center;
  color: #9a9a9a;
  font-size: 0.9rem;
}