/* Numerology.cz - static multilingual rebuild
   Visual language follows the source site (WordPress Twenty Twenty-One,
   background #d1e4de, black primary, system font stack).

   The shared shell - header, navigation and footer - is styled here for every
   page, so an old page and a Sefirot page wear the same chrome. Page bodies
   still differ: .sefirot pages restyle their content in sefirot.css. */

@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Karla:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --color-background: #d1e4de;
  --color-primary: #000;
  --color-secondary: #28303d;
  --color-border: rgba(0, 0, 0, 0.2);
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-shell: Karla, -apple-system, "Segoe UI", Roboto, sans-serif;
  --content-width: 610px;
  --wide-width: 1240px;
  --shell-width: 1180px;
  --gutter: 25px;

  /* Shell palette. Neutrals are biased toward the green ground rather than
     being flat greys, so the chrome reads as one family with the page. */
  --surface:    #e0ece8;
  --rule:       #aec6be;
  --ink:        #12181c;
  --ink-2:      #2c3a3a;
  --ink-3:      #56696a;
  --accent:      #bf5700;
  --on-dark:    #eef5f2;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-primary);
  font-family: var(--font-base);
  font-size: 1.25rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

/* A photograph inside an article. On a desktop it floats and the prose runs
   beside it; the selector carries .entry-content so it outranks the blanket
   margin on .entry-content > *, which is set further down the file. */
.entry-content .entry-figure {
  float: right;
  width: 340px;
  max-width: 42%;
  margin: 6px 0 26px 38px;
}

/* The float must not escape the article. */
.entry-content::after {
  content: "";
  display: block;
  clear: both;
}

.entry-figure img {
  display: block;
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 3px;
}

.entry-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-shell);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Too narrow to wrap text around: on a phone it becomes a plain block. */
@media only screen and (max-width: 620px) {
  .entry-content .entry-figure {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 26px 0;
  }
}

a { color: currentColor; text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-style: dashed; }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-background);
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
}
.skip-link:focus { left: 6px; top: 6px; }

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  max-width: var(--shell-width);
  margin: 0 auto;
  padding: 26px var(--gutter) 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-shell);
}

.site-branding { flex: 0 0 auto; }

/* The logo is sized by height so it is identical on every page, whatever the
   header around it does. Widths follow from the 921x648 source. */
.site-logo .site-mark {
  display: block;
  height: 211px;
  width: auto;
  max-width: 100%;
}

/* ---------- Primary navigation ---------- */

.primary-navigation {
  font-size: 15px;
  margin-top: 0;
}

.menu-button-container { display: none; }

/* The menu is two rows, each its own list. The block around them is as wide as
   the wider row (width: max-content), and each row fills it, so both rows share
   one width and one left edge - Home sits above the first item of row two. */
.menu-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 2px 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-wrapper li { position: relative; }

.menu-rows {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
}

/* Both rows are the width of the wider one, and both start at its left edge:
   the narrower row keeps its natural spacing rather than being stretched
   across the gap. */
.menu-row {
  width: 100%;
  justify-content: flex-start;
}

/* The first item is a house rather than the word "Home": a two-stroke outline
   in orange, drawn in the same line idiom as the logo's Tree. */
.menu-home {
  display: block;
  width: 19px;
  height: 19px;
  color: var(--accent);
}

.menu-wrapper > li > a:hover .menu-home { color: var(--ink); }

/* Top-level items keep their label and the +/- toggle on one line. */
.menu-wrapper > li {
  display: flex;
  align-items: center;
}

.menu-wrapper > li > a,
.menu-wrapper > li > .menu-label {
  display: flex;
  align-items: center;
  padding: 9px 13px;
  text-decoration: none;
  font-weight: 500;
  color: var(--ink-2);
}

.menu-wrapper > li.menu-item-has-children > a,
.menu-wrapper > li.menu-item-has-children > .menu-label { padding-right: 4px; }

.menu-wrapper > li > a:hover,
.menu-wrapper > li > .menu-label:hover { color: var(--ink); text-decoration: underline; }

/* The current page is marked with an orange rule under the label rather than a
   text underline, so it reads as a tab rather than as a link. */
.menu-wrapper .current-menu-item > a {
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--accent);
  font-weight: 600;
}

/* The booking call to action closes the menu as a button: it is the one nav
   item that asks for a decision, so it reads as a control, not another link.
   On its own page it keeps the button look instead of the orange underline. */
.menu-wrapper > li.menu-item-cta { margin-left: 8px; }

.menu-wrapper > li.menu-item-cta > a {
  padding: 9px 16px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: var(--on-dark);
  font-weight: 600;
  transition: opacity .18s;
}

.menu-wrapper > li.menu-item-cta > a:hover {
  color: var(--on-dark);
  text-decoration: none;
  opacity: .88;
}

.menu-wrapper > li.menu-item-cta.current-menu-item > a {
  color: var(--on-dark);
  box-shadow: none;
}

/* Sub menus */

.menu-item-has-children > .sub-menu-toggle {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 6px;
  margin-left: -6px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.sub-menu-toggle .icon-minus { display: none; }
.sub-menu-toggle[aria-expanded="true"] .icon-minus { display: block; }
.sub-menu-toggle[aria-expanded="true"] .icon-plus { display: none; }

.sub-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 50;
  min-width: 260px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: 0 8px 24px rgba(18, 21, 28, 0.10);
  display: none;
}

.sub-menu.is-open { display: block; }

.sub-menu a {
  display: block;
  padding: 10px 18px;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.4;
}

.sub-menu a:hover { text-decoration: underline; }

/* ---------- Language switcher ---------- */

/* The switcher sits above the menu rather than inside it: both languages are
   visible at once, so changing language is one click and never hides behind a
   dropdown. .header-end stacks it over the nav at the right of the masthead. */
.header-end {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  /* Takes the width left beside the logo, and may shrink below its content:
     without both, the menu block's max-width: 100% resolves against a width
     derived from the menu itself, caps nothing, and a row too wide for the
     header (Czech labels are longer) overflows left behind the logo. */
  flex: 1 1 auto;
  min-width: 0;
}

/* Sized by its content and parked at the right, now that the column stretches. */
.lang-switch { align-self: flex-end; }

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface);
}

.lang-switch .lang-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: var(--font-shell);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-2);
  text-decoration: none;
}

.lang-switch .lang-opt + .lang-opt { border-left: 1px solid var(--rule); }

.lang-switch .lang-opt:hover {
  color: var(--ink);
  background: rgba(18, 24, 28, 0.05);
  text-decoration: none;
}

.lang-switch .lang-opt.is-current {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.lang-switch .lang-flag {
  display: block;
  width: 22px;
  height: 15px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(18, 24, 28, 0.12);
}

.lang-switch .lang-label { margin: 0; }

/* Narrow screens swap the full language name for its two-letter code. */
.lang-switch .lang-code { display: none; }

/* ---------- Content ---------- */

.site-content { padding: 0 var(--gutter); }

.site-main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 80px 0 40px;
}

/* The long-form pages sat in a 610px centred column, inset from the 1180px
   shell the header, footer and Sefirot pages share. They now use that shell and
   the text runs its full width. */
body:not(.sefirot) .site-main { max-width: var(--shell-width); }
/* The long-form pages run their copy the full width of the shell; the title
   holds to it too rather than turning over early. */
body:not(.sefirot) .entry-title { max-width: none; }

/* The challenge widget is a form, not prose: a row of inputs stretched over the
   full shell reads as broken, so it keeps a panel width. */
body:not(.sefirot) .entry-content > .tdc-app { max-width: 760px; }

.entry-title {
  font-size: 2.6rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 50px;
  max-width: var(--content-width);
}

.entry-content > * { margin-top: 0; margin-bottom: 30px; }
.entry-content > *:last-child { margin-bottom: 0; }

.entry-content h2 {
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-top: 60px;
  margin-bottom: 25px;
}

.entry-content h3 {
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 400;
  margin-top: 45px;
  margin-bottom: 20px;
}

.entry-content h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 35px;
  margin-bottom: 15px;
}

.entry-content p { margin-bottom: 30px; }

.entry-content ul,
.entry-content ol { padding-left: 1.3em; margin-bottom: 30px; }

.entry-content li { margin-bottom: 10px; }

.entry-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 50px auto;
  max-width: 100px;
}

.entry-content strong { font-weight: 700; }

/* ---------- 28-day challenge widget ---------- */

.tdc-app {
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.35);
  padding: 30px;
  margin-bottom: 30px;
}

.tdc-app h3 { margin-top: 0; }

.tdc-progress { font-size: 1rem; margin-bottom: 20px; }

.tdc-field { margin-bottom: 20px; }

.tdc-field label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.tdc-field input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.tdc-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.tdc-button,
.cn-button {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 22px;
  border: none;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  border-radius: 0;
}

.tdc-button:hover { opacity: 0.85; }

.tdc-history { margin-top: 25px; }

.tdc-history[hidden] { display: none; }

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

.site-footer {
  max-width: var(--shell-width);
  margin: 0 auto;
  padding: 40px var(--gutter) 60px;
}

.site-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-top: 1px solid var(--rule);
  padding-top: 35px;
  font-size: 1rem;
}

.site-footer .site-logo .site-mark { height: 127px; }

.powered-by { font-size: 0.95rem; }

.powered-by,
.privacy-policy a { color: var(--ink-3); }

/* Three legal links now, separated by a thin rule rather than by punctuation,
   so they stay legible when they wrap on a phone. */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.legal-links a + a {
  border-left: 1px solid var(--rule);
  padding-left: 16px;
}

.legal-links a[aria-current="page"] { color: var(--ink-2); }

/* ---------- Cookie notice ---------- */

#cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  background-color: rgba(50, 50, 58, 1);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.5;
}

#cookie-notice[hidden] { display: none; }

.cookie-notice-container {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 15px;
  text-align: center;
}

#cn-accept-cookie { background-color: #00a99d; padding: 8px 20px; font-size: 0.85rem; }

#cn-accept-cookie:hover { opacity: 0.9; }

/* ---------- Responsive ---------- */

@media only screen and (max-width: 900px) {
  body { font-size: 1.1rem; }

  /* The header stays a single line: logo left, language switcher and menu
     button right. The opened menu drops out of the flow as a panel below, so
     the header's height is only ever the logo's. */
  .site-header {
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 14px;
    padding-top: 20px;
  }

  .site-branding { flex: 0 1 auto; min-width: 0; }

  .lang-switch { align-self: center; }

  .header-end {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 12px;
    margin-top: 0;
  }

  .primary-navigation { width: auto; flex: 0 0 auto; }

  .menu-button-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
  }

  .primary-menu-container.is-open {
    position: absolute;
    top: 100%;
    left: var(--gutter);
    right: var(--gutter);
    z-index: 60;
    background: var(--surface);
    border: 1px solid var(--rule);
    box-shadow: 0 10px 26px rgba(18, 21, 28, 0.12);
    padding: 4px 18px 14px;
  }

  #primary-mobile-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    padding: 10px 0;
  }

  #primary-mobile-menu .dropdown-icon.close { display: none; }
  #primary-mobile-menu[aria-expanded="true"] .dropdown-icon.close { display: flex; align-items: center; gap: 6px; }
  #primary-mobile-menu[aria-expanded="true"] .dropdown-icon.open { display: none; }
  #primary-mobile-menu .dropdown-icon.open { display: flex; align-items: center; gap: 6px; }

  .primary-menu-container { display: none; }
  .primary-menu-container.is-open { display: block; }

  .menu-wrapper {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    margin-top: 0;
    padding-top: 6px;
  }

  .menu-wrapper > li > a,
  .menu-wrapper > li > .menu-label { padding: 12px 0; }

  /* Stacked on a phone: one column, natural width, no spreading. The two row
     lists stop generating boxes of their own (display: contents), so every
     item becomes a child of the same column and `order` can arrange them.
     The phone order is not the desktop one: the two services follow the
     dropdown, then About us and Contact us, and the button closes the menu.
     Row one holds home, method, dropdown, about, contact, button; row two the
     two service pages - hence the numbers below. */
  .menu-rows { width: auto; max-width: none; gap: 0; }
  .menu-row { justify-content: flex-start; display: contents; }

  .menu-row:first-child > li:nth-child(1) { order: 1; }
  .menu-row:first-child > li:nth-child(2) { order: 2; }
  .menu-row:first-child > li:nth-child(3) { order: 3; }
  .menu-row:last-child  > li:nth-child(1) { order: 4; }
  .menu-row:last-child  > li:nth-child(2) { order: 5; }
  .menu-row:first-child > li:nth-child(4) { order: 6; }
  .menu-row:first-child > li:nth-child(5) { order: 7; }
  .menu-row:first-child > li.menu-item-cta { order: 8; }

  .menu-wrapper > li.menu-item-cta { margin: 10px 0 4px; }
  .menu-wrapper > li.menu-item-cta > a {
    flex: 1;
    justify-content: center;
    padding: 12px 16px;
  }

  /* The list item is a flex row so the label and its +/- sit on one line.
     Let it wrap, and give the opened sub-menu the whole next line, or it
     lays out beside the label and overlaps the items around it. */
  .menu-wrapper > li { flex-wrap: wrap; }

  .sub-menu {
    position: static;
    flex-basis: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    min-width: 0;
    padding: 0 0 10px 20px;
  }

  /* Sized by max-height but allowed to shrink with the row, so the logo gives
     way on narrow screens instead of pushing the switcher onto a second line. */
  .site-logo .site-mark { height: auto; width: auto; max-height: 120px; max-width: 100%; }

  .site-main { padding-top: 50px; }

  .entry-title { font-size: 2rem; margin-bottom: 35px; }

  .entry-content h2 { font-size: 1.6rem; }
  .entry-content h3 { font-size: 1.3rem; }
}

@media only screen and (max-width: 620px) {
  .site-logo .site-mark { max-height: 92px; }

  /* Too small for the numerals to read: drop them and let the rings carry the
     mark, weighted up so the tree still holds at this size. */
  .site-mark .mark-num { display: none; }
  .site-mark circle { stroke-width: 3.4; }
  .site-mark line { stroke-width: 2.2; }
  .header-end { gap: 9px; }
  .lang-switch .lang-opt { padding: 7px 10px; font-size: 15px; gap: 6px; }
  .lang-switch .lang-label { display: none; }
  .lang-switch .lang-code { display: inline; }
}

@media only screen and (max-width: 480px) {
  .site-logo .site-mark { max-height: 74px; }

  /* Below this the flags cost more room than they earn: the codes carry it, and
     the space goes back to the logo. */
  .lang-switch .lang-flag { display: none; }
  .lang-switch .lang-opt { padding: 7px 11px; }
  .cookie-notice-container { flex-direction: column; }
}