/* ==========================================================================
   Sky Ceylon — Steps, Questions and Tabs

   FluentSnippets group: Steps & FAQ | type: css | run_at: wp_head
   load_as_file: yes | load_in_block_editor: yes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. STEPS
   -------------------------------------------------------------------------- */
.skyc-steps {
  display: grid;
  gap: var(--wp--preset--spacing--32);
}
@media (min-width: 820px) {
  .skyc-steps { grid-template-columns: repeat(3, 1fr); }
  .skyc-steps:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .skyc-steps:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
}

.skyc-step {
  display: grid;
  gap: var(--wp--preset--spacing--12);
  align-content: start;
}

.skyc-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--wp--custom--radius-circle);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight-bold);
}
.skyc-section--plum .skyc-step__num {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast);
}

.skyc-step__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--md);
  font-weight: var(--wp--custom--weight-bold);
  line-height: var(--wp--custom--leading-snug);
  color: var(--skyc-fg-strong, var(--wp--preset--color--contrast));
}
.skyc-step__text {
  margin: 0;
  color: var(--skyc-fg, var(--wp--preset--color--body));
  line-height: var(--wp--custom--leading-relaxed);
}

.skyc-steps + .skyc-panel { margin-top: var(--wp--preset--spacing--48); }

/* --------------------------------------------------------------------------
   2. QUESTIONS

   Built on <details>, so opening and closing is the browser's job. The marker
   is removed on both the standard and the WebKit selector, because only one
   of them takes in any given engine.
   -------------------------------------------------------------------------- */
.skyc-faq {
  display: grid;
  gap: var(--wp--preset--spacing--12);
  max-width: var(--wp--custom--container-narrow);
}

.skyc-faq__item {
  border: 1px solid var(--skyc-line, var(--wp--preset--color--line));
  border-radius: var(--wp--custom--radius-md);
  background: var(--skyc-card, var(--wp--preset--color--base));
  overflow: hidden;
}

.skyc-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--16);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--24);
  cursor: pointer;
  list-style: none;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight-semibold);
  line-height: var(--wp--custom--leading-snug);
  color: var(--skyc-fg-strong, var(--wp--preset--color--contrast));
}
.skyc-faq__q::-webkit-details-marker { display: none; }
.skyc-faq__q::marker { content: ""; }
.skyc-faq__q:hover { color: var(--wp--preset--color--primary); }
.skyc-section--plum .skyc-faq__q:hover { color: var(--wp--preset--color--accent); }

.skyc-faq__mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.1em;
  border-radius: var(--wp--custom--radius-circle);
  background: var(--wp--preset--color--surface-magenta);
  color: var(--wp--preset--color--primary);
  transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}
.skyc-faq__mark .skyc-icon { width: 1em; height: 1em; }
.skyc-faq__item[open] .skyc-faq__mark { transform: rotate(45deg); }
.skyc-section--plum .skyc-faq__mark {
  background: rgba(255, 255, 255, 0.10);
  color: var(--wp--preset--color--accent);
}

.skyc-faq__a {
  padding: 0 var(--wp--preset--spacing--24) var(--wp--preset--spacing--20);
  color: var(--skyc-fg, var(--wp--preset--color--body));
  line-height: var(--wp--custom--leading-relaxed);
}
.skyc-faq__a > p { margin: 0; }
.skyc-faq__a > p + p { margin-top: var(--wp--preset--spacing--12); }

.skyc-faq + .skyc-panel { margin-top: var(--wp--preset--spacing--40); }

/* --------------------------------------------------------------------------
   3. TABS

   The radios are the state. They are moved off screen rather than hidden with
   display:none, because a display:none radio cannot be focused and the tab
   strip would stop working under the keyboard.
   -------------------------------------------------------------------------- */
.skyc-tabs { position: relative; }

.skyc-tabs__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.skyc-tabs__strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--8);
  margin-bottom: var(--wp--preset--spacing--32);
}

.skyc-tabs__label {
  display: inline-flex;
  align-items: center;
  padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--20);
  border: 1px solid var(--skyc-line, var(--wp--preset--color--line));
  border-radius: var(--wp--custom--radius-pill);
  background: var(--wp--preset--color--base);
  cursor: pointer;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight-semibold);
  color: var(--wp--preset--color--body);
  transition: background var(--wp--custom--duration-base) var(--wp--custom--ease-out),
              color var(--wp--custom--duration-base) var(--wp--custom--ease-out),
              border-color var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}
.skyc-tabs__label:hover {
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
}

/* Selected tab */
.skyc-tabs__radio[data-tab="1"]:checked ~ .skyc-tabs__strip .skyc-tabs__label[data-tab="1"],
.skyc-tabs__radio[data-tab="2"]:checked ~ .skyc-tabs__strip .skyc-tabs__label[data-tab="2"],
.skyc-tabs__radio[data-tab="3"]:checked ~ .skyc-tabs__strip .skyc-tabs__label[data-tab="3"],
.skyc-tabs__radio[data-tab="4"]:checked ~ .skyc-tabs__strip .skyc-tabs__label[data-tab="4"] {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

/* Keyboard focus has to be drawn on the label, since the radio is off screen */
.skyc-tabs__radio:focus-visible + .skyc-tabs__strip .skyc-tabs__label,
.skyc-tabs__radio[data-tab="1"]:focus-visible ~ .skyc-tabs__strip .skyc-tabs__label[data-tab="1"],
.skyc-tabs__radio[data-tab="2"]:focus-visible ~ .skyc-tabs__strip .skyc-tabs__label[data-tab="2"],
.skyc-tabs__radio[data-tab="3"]:focus-visible ~ .skyc-tabs__strip .skyc-tabs__label[data-tab="3"],
.skyc-tabs__radio[data-tab="4"]:focus-visible ~ .skyc-tabs__strip .skyc-tabs__label[data-tab="4"] {
  outline: 3px solid var(--wp--custom--focus);
  outline-offset: 2px;
}

.skyc-tabs__panel { display: none; }
.skyc-tabs__radio[data-tab="1"]:checked ~ .skyc-tabs__panels .skyc-tabs__panel[data-tab="1"],
.skyc-tabs__radio[data-tab="2"]:checked ~ .skyc-tabs__panels .skyc-tabs__panel[data-tab="2"],
.skyc-tabs__radio[data-tab="3"]:checked ~ .skyc-tabs__panels .skyc-tabs__panel[data-tab="3"],
.skyc-tabs__radio[data-tab="4"]:checked ~ .skyc-tabs__panels .skyc-tabs__panel[data-tab="4"] {
  display: block;
}

.skyc-tabs__panel .skyc-split__copy > * + * { margin-top: var(--wp--preset--spacing--24); }

.skyc-tabs__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight-bold);
  line-height: var(--wp--custom--leading-tight);
  color: var(--wp--preset--color--contrast);
}
.skyc-tabs__text {
  margin: 0;
  color: var(--wp--preset--color--body);
  line-height: var(--wp--custom--leading-relaxed);
}
.skyc-tabs__note {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
}

/* --- itinerary --- */
.skyc-itin {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--wp--preset--color--line);
}
.skyc-itin__row {
  display: grid;
  gap: var(--wp--preset--spacing--4);
  padding: var(--wp--preset--spacing--12) 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.skyc-itin__label {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight-bold);
  letter-spacing: var(--wp--custom--tracking-wider);
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}
.skyc-itin__text {
  color: var(--wp--preset--color--body);
  line-height: var(--wp--custom--leading-normal);
}
@media (min-width: 560px) {
  .skyc-itin__row {
    grid-template-columns: minmax(7rem, 26%) 1fr;
    gap: var(--wp--preset--spacing--16);
    align-items: baseline;
  }
}

/* --------------------------------------------------------------------------
   4. EDITOR

   All panels are shown stacked in the editor, so the owner can see and reach
   the content of every tab without the front-end switching getting in the way.
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .skyc-tabs__panel {
  display: block;
  padding-top: var(--wp--preset--spacing--24);
  border-top: 1px dashed var(--wp--preset--color--line-strong);
}
.editor-styles-wrapper .skyc-tabs__panel:first-child { border-top: 0; padding-top: 0; }
.editor-styles-wrapper .skyc-tabs__panels {
  display: grid;
  gap: var(--wp--preset--spacing--24);
}