/* ==========================================================================
   Sky Ceylon — Footer

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

.skyc-footer {
  padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--primary-deep);
  color: var(--wp--custom--muted-invert);
}
.skyc-footer a { color: inherit; }
.skyc-footer a:hover { color: var(--wp--preset--color--accent); }

/* --------------------------------------------------------------------------
   1. THE FOUR COLUMNS

   A grid rather than core columns, because the design drops to two columns
   before it drops to one and core stacks all four at the same breakpoint.
   -------------------------------------------------------------------------- */
.skyc-footer__grid {
  display: grid;
  gap: var(--wp--preset--spacing--40);
}
@media (min-width: 640px) {
  .skyc-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .skyc-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
}

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

.skyc-footer__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight-bold);
  letter-spacing: var(--wp--custom--tracking-wide);
  color: var(--wp--custom--heading-invert);
}

.skyc-footer__list {
  display: grid;
  gap: var(--wp--preset--spacing--8);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--wp--preset--font-size--sm);
}
.skyc-footer__list a { text-decoration: none; }
.skyc-footer__list a:hover { text-decoration: underline; }

.skyc-footer__about {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading-relaxed);
}

/* The logo is the same square photograph the header trims, so it takes the
   same crop here rather than showing the printed border around it. */
.skyc-footer .wp-block-site-logo img {
  clip-path: inset(16.5% 13% 21.3% 15.2%);
  height: auto;
  max-width: 11rem;
}

/* --------------------------------------------------------------------------
   2. CONTACT LINES
   -------------------------------------------------------------------------- */
.skyc-fcontact {
  display: grid;
  gap: var(--wp--preset--spacing--16);
  font-style: normal;
}
.skyc-fcontact__item {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--wp--preset--spacing--12);
  align-items: start;
}
.skyc-fcontact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--wp--custom--radius-circle);
  background: rgba(255, 255, 255, 0.10);
  color: var(--wp--preset--color--accent);
}
.skyc-fcontact__label {
  display: block;
  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--custom--muted-invert);
}
.skyc-fcontact__value {
  display: block;
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading-snug);
  color: var(--wp--custom--text-invert);
  overflow-wrap: anywhere;
}
.skyc-fcontact__value a { text-decoration: none; }
.skyc-fcontact__value a:hover { text-decoration: underline; }

.skyc-fhours {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--wp--preset--spacing--12);
  margin-top: var(--wp--preset--spacing--20);
  padding-top: var(--wp--preset--spacing--20);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.skyc-fhours__icon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.15rem;
  color: var(--wp--preset--color--accent);
}
.skyc-fhours strong {
  display: block;
  margin-bottom: var(--wp--preset--spacing--4);
  color: var(--wp--custom--heading-invert);
}
.skyc-fhours p {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading-relaxed);
}

/* --------------------------------------------------------------------------
   3. SERVICES LINE AND THE BOTTOM BAR
   -------------------------------------------------------------------------- */
.skyc-footer__services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12);
  margin-top: var(--wp--preset--spacing--48);
  padding-top: var(--wp--preset--spacing--32);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.skyc-footer__services p,
.skyc-footer__services li {
  margin: 0;
  padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--12);
  border-radius: var(--wp--custom--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking-wide);
  color: var(--wp--custom--text-invert);
}
.skyc-footer__services ul {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skyc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--24);
  margin-top: var(--wp--preset--spacing--32);
  padding-top: var(--wp--preset--spacing--24);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--wp--preset--font-size--xs);
}
.skyc-footer__bottom p { margin: 0; }

/* The sticky bar covers the foot of the screen on phones, so the footer needs
   to end above it or its last line is never reachable. */
@media (max-width: 767px) {
  .skyc-footer { padding-bottom: calc(var(--wp--preset--spacing--40) + 4.5rem); }
}