/* ==========================================================================
   Sky Ceylon — Site Frame

   Top bar, sticky header, logo slot, navigation (desktop row + mobile
   drawer) and the fixed mobile CTA bar.

   The desktop nav only appears at 1120px, which is the first width where the
   logo, seven labels and the quotation button all fit across the container
   without wrapping. WordPress collapses its own nav at 600px, so the 600-1119
   band is flipped back to the hamburger below.

   FluentSnippets group: Site Frame | type: css | run_at: wp_head
   load_as_file: yes | load_in_block_editor: yes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOP BAR
   Single line at every width it is shown at. Items are allowed to drop out
   (the location, then the strapline) rather than wrap onto a second row.
   -------------------------------------------------------------------------- */
.skyc-topbar {
  background-color: var(--wp--preset--color--primary-deep);
  color: var(--wp--custom--text-invert);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.4;
}
.skyc-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--24);
  min-height: 42px;
  flex-wrap: nowrap;
}
.skyc-topbar__list {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--24);
  flex-wrap: nowrap;
  margin-left: auto;
}
.skyc-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--8);
  color: var(--wp--custom--text-invert);
  text-decoration: none;
  white-space: nowrap;
}
.skyc-topbar__item .skyc-icon { color: var(--wp--preset--color--accent); }
.skyc-topbar a.skyc-topbar__item:hover { color: var(--wp--preset--color--base); }

/* The location is the first thing to go when the bar gets tight. */
.skyc-topbar__list li:last-child { display: none; }
@media (min-width: 820px) { .skyc-topbar__list li:last-child { display: block; } }

.skyc-topbar__tag {
  display: none;
  margin: 0;
  color: var(--wp--custom--muted-invert);
  letter-spacing: var(--wp--custom--tracking-wide);
  text-transform: uppercase;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight-medium);
  white-space: nowrap;
}
@media (min-width: 1120px) { .skyc-topbar__tag { display: block; } }
@media (max-width: 599px)  { .skyc-topbar { display: none; } }

/* --------------------------------------------------------------------------
   2. HEADER SHELL
   -------------------------------------------------------------------------- */
.skyc-header {
  position: sticky;
  top: 0;
  z-index: var(--wp--custom--z-header);
  background-color: var(--wp--preset--color--base);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

.skyc-header__inner {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--16);
  min-height: var(--wp--custom--header-height-sm);
  width: 100%;
  max-width: var(--wp--custom--container-max);
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
}
@media (min-width: 1120px) {
  .skyc-header__inner {
    min-height: var(--wp--custom--header-height);
    gap: var(--wp--preset--spacing--24);
  }
}

/* --------------------------------------------------------------------------
   3. LOGO SLOT
   The supplied logo file is a 1280x1022 JPEG with a wide white margin baked
   in, which left the mark looking small and floating. The box is sized
   generously and the margin is clipped off, then pulled back in with matching
   negative margins so the artwork optically aligns with the container edge.
   If a tighter-cropped logo file is uploaded later, delete the clip-path and
   the two margin lines and set --wp--custom--logo-height to taste.
   -------------------------------------------------------------------------- */
.skyc-header .wp-block-site-logo {
  --skyc-logo-h: var(--wp--custom--logo-height-sm);
  flex: none;
  margin: 0;
}
@media (min-width: 1120px) {
  .skyc-header .wp-block-site-logo { --skyc-logo-h: var(--wp--custom--logo-height); }
}
.skyc-header .wp-block-site-logo a { display: block; line-height: 0; }
.skyc-header .wp-block-site-logo img {
  --skyc-logo-w: calc(var(--skyc-logo-h) * 1.2524);
  display: block;
  flex: none;
  height: var(--skyc-logo-h);
  width: var(--skyc-logo-w);
  max-width: none;
  border-radius: 0;
  clip-path: inset(16.5% 13% 21.3% 15.2%);
  margin-block: calc(var(--skyc-logo-h) * -0.165) calc(var(--skyc-logo-h) * -0.213);
  margin-inline: calc(var(--skyc-logo-w) * -0.152) calc(var(--skyc-logo-w) * -0.13);
}

/* --------------------------------------------------------------------------
   4. NAVIGATION — shared
   -------------------------------------------------------------------------- */
.skyc-header .skyc-nav { position: static; }

.skyc-header .skyc-nav .wp-block-navigation__container {
  gap: var(--wp--preset--spacing--4);
}
.skyc-header .skyc-nav .wp-block-navigation-item__content {
  text-decoration: none;
}

/* --- desktop row (>= 1120px) --- */
@media (min-width: 1120px) {
  .skyc-header .skyc-nav { margin-inline: auto; }

  .skyc-header .skyc-nav .wp-block-navigation-item__content {
    position: relative;
    display: block;
    padding: var(--wp--preset--spacing--12);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--base);
    font-weight: var(--wp--custom--weight-medium);
    color: var(--wp--preset--color--contrast);
    white-space: nowrap;
    border-radius: var(--wp--custom--radius-sm);
  }
  .skyc-header .skyc-nav .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    left: var(--wp--preset--spacing--12);
    right: var(--wp--preset--spacing--12);
    bottom: var(--wp--preset--spacing--4);
    height: 2px;
    background-color: var(--wp--preset--color--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
  }
  .skyc-header .skyc-nav .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary);
  }
  .skyc-header .skyc-nav .wp-block-navigation-item__content:hover::after,
  .skyc-header .skyc-nav .current-menu-item > .wp-block-navigation-item__content::after {
    transform: scaleX(1);
  }
  .skyc-header .skyc-nav .current-menu-item > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--primary);
    font-weight: var(--wp--custom--weight-semibold);
  }
}

/* --------------------------------------------------------------------------
   5. NAVIGATION — keep the hamburger up to 1119px
   Core reveals the inline nav at 600px; these two rules move that to 1120px.
   Core's stylesheet prints after this one, so both selectors carry the
   .skyc-header prefix to win on specificity rather than order.
   -------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1119.98px) {
  .skyc-header .skyc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .skyc-header .skyc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

/* The hamburger: bordered pill with the word "Menu", as in the design. */
.skyc-header .skyc-nav .wp-block-navigation__responsive-container-open {
  align-items: center;
  gap: var(--wp--preset--spacing--8);
  margin-left: auto;
  padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius-sm);
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight-semibold);
}
.skyc-header .skyc-nav .wp-block-navigation__responsive-container-open svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.skyc-header .skyc-nav .wp-block-navigation__responsive-container-open::after {
  content: "Menu";
  color: var(--wp--preset--color--contrast);
}
/* While the drawer is open the hamburger would show through its own gap. */
.skyc-header .skyc-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   6. NAVIGATION — mobile drawer
   Full-height white panel, matching the design's drawer: hairline-separated
   links in the display face with gold arrows, then the quotation pill.
   -------------------------------------------------------------------------- */
.skyc-header .skyc-nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  padding: var(--wp--preset--spacing--24) var(--wp--custom--gutter) var(--wp--preset--spacing--40);
  align-items: stretch;
  overflow-y: auto;
}
.skyc-header .skyc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.skyc-header .skyc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
  width: 100%;
  max-width: var(--wp--custom--container-max);
  margin-inline: auto;
}
.skyc-header .skyc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%;
  align-items: stretch;
  padding-top: var(--wp--preset--spacing--32);
}
.skyc-header .skyc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  width: 100%;
  gap: 0;
  align-items: stretch;
}
.skyc-header .skyc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.skyc-header .skyc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--wp--preset--spacing--16) 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight-semibold);
  line-height: 1.25;
  color: var(--wp--preset--color--contrast);
}
.skyc-header .skyc-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--primary);
}
.skyc-header .skyc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  background-color: var(--wp--preset--color--accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15m0 0-5.6-5.6M19.5 12l-5.6 5.6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15m0 0-5.6-5.6M19.5 12l-5.6 5.6'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Close button — square outline, top right of the container's content box.
   The offsets are 0 on purpose: the overlay's own padding supplies the inset,
   so the X lines up with the logo edge at every width. */
.skyc-header .skyc-nav .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius-sm);
  color: var(--wp--preset--color--contrast);
}
.skyc-header .skyc-nav .wp-block-navigation__responsive-container-close svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   7. THE QUOTATION CTA
   Desktop: the gold pill in the header bar.
   Mobile: the same action as a full-width pill inside the drawer, edited by
   the owner as an ordinary menu item.
   -------------------------------------------------------------------------- */
.skyc-header .skyc-header__cta { display: none; }
@media (min-width: 1120px) {
  .skyc-header .skyc-header__cta { display: block; flex: none; }
}
.skyc-header .skyc-header__cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--8);
  padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--sm);
  box-shadow: var(--wp--custom--shadow-accent);
  white-space: nowrap;
}
.skyc-header .skyc-header__cta .wp-block-button__link::before,
.skyc-header .skyc-nav__cta .wp-block-navigation-item__content::before {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.6a8.4 8.4 0 0 1-12.4 7.4L3.5 20.5l1.5-4.6A8.4 8.4 0 1 1 20.5 11.6Z'/%3E%3Cpath d='M8.9 8.1c.2-.5.5-.5.8-.5h.6c.2 0 .4 0 .6.5l.7 1.6c.1.3 0 .5-.1.7l-.4.5c-.1.2-.2.3 0 .6a7 7 0 0 0 2.9 2.4c.3.1.4 0 .6-.1l.5-.6c.2-.2.4-.2.6-.1l1.6.8c.4.2.4.4.4.6a2 2 0 0 1-1.9 1.7c-1.1.1-2.9-.5-4.5-2a9.2 9.2 0 0 1-2.6-4c-.2-.9-.1-1.6.2-2.1Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.6a8.4 8.4 0 0 1-12.4 7.4L3.5 20.5l1.5-4.6A8.4 8.4 0 1 1 20.5 11.6Z'/%3E%3Cpath d='M8.9 8.1c.2-.5.5-.5.8-.5h.6c.2 0 .4 0 .6.5l.7 1.6c.1.3 0 .5-.1.7l-.4.5c-.1.2-.2.3 0 .6a7 7 0 0 0 2.9 2.4c.3.1.4 0 .6-.1l.5-.6c.2-.2.4-.2.6-.1l1.6.8c.4.2.4.4.4.6a2 2 0 0 1-1.9 1.7c-1.1.1-2.9-.5-4.5-2a9.2 9.2 0 0 1-2.6-4c-.2-.9-.1-1.6.2-2.1Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* The drawer-only quotation pill. */
.skyc-header .skyc-nav__cta { display: none; }
.skyc-header .skyc-nav .wp-block-navigation__responsive-container.is-menu-open .skyc-nav__cta {
  display: block;
  border-bottom: 0;
  margin-top: var(--wp--preset--spacing--32);
}
.skyc-header .skyc-nav .wp-block-navigation__responsive-container.is-menu-open .skyc-nav__cta .wp-block-navigation-item__content {
  justify-content: center;
  gap: var(--wp--preset--spacing--8);
  padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
  background-color: var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius-sm);
  box-shadow: var(--wp--custom--shadow-accent);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--custom--black);
}
.skyc-header .skyc-nav .wp-block-navigation__responsive-container.is-menu-open .skyc-nav__cta .wp-block-navigation-item__content::after {
  display: none;
}

/* --------------------------------------------------------------------------
   8. STICKY WHATSAPP BAR — phones only
   -------------------------------------------------------------------------- */
.skyc-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--wp--custom--z-sticky);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background-color: var(--wp--preset--color--line);
  box-shadow: 0 -6px 20px rgba(20, 8, 13, 0.12);
}
.skyc-sticky-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--8);
  padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--12);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight-semibold);
  text-decoration: none;
}
.skyc-sticky-cta__wa {
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--custom--black);
}
.skyc-sticky-cta__wa:hover { color: var(--wp--custom--black); }
.skyc-sticky-cta__call {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}
.skyc-sticky-cta__call:hover { color: var(--wp--preset--color--base); }

@media (min-width: 700px) { .skyc-sticky-cta { display: none; } }
@media (max-width: 699px) { body { padding-bottom: 60px; } }

/* The bar is fixed to the viewport, so inside the editor it would float over
   the canvas. Show it in place instead. */
.editor-styles-wrapper .skyc-sticky-cta {
  position: static;
  display: grid;
}