/* =========================================================
   SKY HIGH FRAMES STUDIO
   SHARED CONTENT, LANGUAGE, CTA AND FOOTER
   site-extras.css - v4
   ========================================================= */

:root {
  --site-blue: #0a2b45;
  --site-blue-dark: #071e31;
  --site-blue-deep: #041421;
  --cyan: #49c7ff;
  --cyan-bright: #79ddff;
  --gold: #e7a640;
  --text-soft: #c0ccd5;
}

.language-switcher {
  position: fixed;
  z-index: 100;
  top: 22px;
  right: 24px;

  display: inline-flex;
  align-items: center;
  gap: 3px;

  padding: 4px;

  border: 1px solid rgba(113, 215, 255, 0.28);
  border-radius: 999px;

  background: rgba(4, 20, 33, 0.80);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 0 16px rgba(73, 199, 255, 0.12);
}

.language-switcher button {
  min-width: 36px;
  min-height: 30px;
  padding: 5px 8px;

  border: 0;
  border-radius: 999px;

  color: rgba(255, 255, 255, 0.62);
  background: transparent;

  font: 600 11px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.10em;

  cursor: pointer;
}

.language-switcher button:hover,
.language-switcher button[aria-pressed="true"] {
  color: #ffffff;
  background: rgba(73, 199, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(121, 221, 255, 0.42);
  text-shadow: 0 0 8px rgba(121, 221, 255, 0.75);
}

.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 46px;
  padding: 13px 22px;

  border: 1px solid rgba(73, 199, 255, 0.68);
  border-radius: 999px;

  color: #ffffff;
  background: rgba(2, 17, 29, 0.90);

  font: 600 12px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: 0.13em;
  text-decoration: none;

  box-shadow:
    0 0 5px rgba(73, 199, 255, 0.40),
    0 0 18px rgba(73, 199, 255, 0.15);

  transition:
    transform 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.site-button:hover,
.site-button:focus-visible {
  transform: translateY(-2px);
  background: rgba(7, 37, 58, 0.96);
  border-color: var(--cyan-bright);
  box-shadow:
    0 0 8px rgba(73, 199, 255, 0.68),
    0 0 25px rgba(73, 199, 255, 0.22);
}

.site-button-secondary {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(5, 20, 32, 0.58);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
}

.page-cta {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto 64px;
  padding: 36px 32px;

  text-align: center;

  border: 1px solid rgba(73, 199, 255, 0.30);
  border-radius: 18px;

  background:
    linear-gradient(135deg, rgba(7, 34, 55, 0.94), rgba(3, 17, 29, 0.96));

  box-shadow:
    0 0 7px rgba(73, 199, 255, 0.32),
    0 0 28px rgba(73, 199, 255, 0.10);
}

.page-cta h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(25px, 3vw, 36px);
  font-weight: 300;
}

.page-cta p {
  max-width: 560px;
  margin: 12px auto 24px;
  color: rgba(238, 243, 247, 0.70);
  font-size: 16px;
  line-height: 1.6;
}

.site-footer {
  position: relative;
  z-index: 20;

  width: 100%;
  padding: 28px max(24px, 5vw) 22px;

  text-align: center;

  border-top: 1px solid rgba(73, 199, 255, 0.78);
  border-bottom: 1px solid rgba(73, 199, 255, 0.72);

  background:
    linear-gradient(180deg, rgba(3, 19, 34, 0.96), rgba(2, 13, 26, 0.99));

  box-shadow:
    inset 0 1px 0 rgba(121, 221, 255, 0.10),
    0 -2px 12px rgba(73, 199, 255, 0.10),
    0 2px 12px rgba(73, 199, 255, 0.10);
}

.site-footer-inner {
  width: min(920px, 100%);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-footer-social {
  order: 1;

  display: grid;
  grid-template-columns: repeat(6, 28px);
  align-items: center;
  justify-content: center;
  column-gap: clamp(22px, 3vw, 38px);
  row-gap: 8px;
}

.site-footer-label {
  display: none;
}

.site-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  color: rgba(238, 243, 247, 0.90);
  font-size: 0;
  text-decoration: none;

  transition:
    transform 0.2s ease,
    color 0.2s ease,
    filter 0.2s ease;
}

.site-footer-social a::before {
  content: "";

  width: 20px;
  height: 20px;

  background: currentColor;
  -webkit-mask: var(--social-icon) center / contain no-repeat;
  mask: var(--social-icon) center / contain no-repeat;
}

.site-footer-social a[href*="facebook.com"] {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.23.2 2.23.2v2.45h-1.25c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.99A10 10 0 0 0 22 12z'/%3E%3C/svg%3E");
  order: 1;
}

.site-footer-social a[href*="instagram.com"] {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3.8A4.2 4.2 0 1 1 7.8 12 4.2 4.2 0 0 1 12 7.8zm0 2A2.2 2.2 0 1 0 14.2 12 2.2 2.2 0 0 0 12 9.8zM17.7 6.3a1 1 0 1 1-1 1 1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
  order: 2;
}

.site-footer-social a[href*="tiktok.com"] {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2h3a5.8 5.8 0 0 0 5 4.7v3a8.8 8.8 0 0 1-5-1.6V16a6 6 0 1 1-6-6c.34 0 .67.03 1 .08v3.05A3 3 0 1 0 14 16V2z'/%3E%3C/svg%3E");
  order: 3;
}

.site-footer-social a[href*="pinterest.com"] {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-3.65 19.31c-.09-1.65-.02-3.63.41-5.47l1.29-5.46s-.32-.65-.32-1.61c0-1.51.88-2.64 1.97-2.64.93 0 1.38.7 1.38 1.53 0 .93-.59 2.32-.9 3.61-.26 1.08.54 1.96 1.61 1.96 1.93 0 3.41-2.03 3.41-4.97 0-2.6-1.87-4.42-4.54-4.42-3.09 0-4.9 2.32-4.9 4.72 0 .94.36 1.94.81 2.49.09.11.1.2.08.31l-.3 1.22c-.05.2-.16.24-.37.14-1.39-.65-2.26-2.68-2.26-4.31 0-3.51 2.55-6.73 7.35-6.73 3.86 0 6.86 2.75 6.86 6.42 0 3.83-2.42 6.92-5.77 6.92-1.13 0-2.19-.59-2.55-1.28l-.69 2.64c-.25.97-.93 2.18-1.38 2.92.78.24 1.6.37 2.45.37A10 10 0 0 0 12 2z'/%3E%3C/svg%3E");
  order: 4;
}

.site-footer-social a[href*="youtube.com"] {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4L15.8 12z'/%3E%3C/svg%3E");
  order: 5;
}

.site-footer-social a[href*="x.com"] {
  --social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z'/%3E%3C/svg%3E");
  order: 6;
}

.site-footer-social::after {
  content: "✦";
  order: 7;
  grid-column: 1 / -1;
  justify-self: center;

  width: min(720px, calc(100vw - 48px));
  margin-top: 8px;

  color: #d9f5ff;
  font-size: 19px;
  line-height: 24px;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(73, 199, 255, 0.76) 10%,
    rgba(73, 199, 255, 0.76) 46.5%,
    transparent 46.5%,
    transparent 53.5%,
    rgba(73, 199, 255, 0.76) 53.5%,
    rgba(73, 199, 255, 0.76) 90%,
    transparent 100%
  ) center / 100% 1px no-repeat;

  text-shadow:
    0 0 6px rgba(121, 221, 255, 0.95),
    0 0 15px rgba(73, 199, 255, 0.72);
}

.site-footer-social a:hover,
.site-footer-social a:focus-visible {
  transform: translateY(-2px);
  color: var(--cyan-bright);
  filter: drop-shadow(0 0 7px rgba(121, 221, 255, 0.75));
}

.site-footer-divider {
  width: min(720px, 100%);
  margin: 18px auto 12px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}

.site-footer-divider::before,
.site-footer-divider::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(73, 199, 255, 0.76));
}

.site-footer-divider::after {
  background: linear-gradient(90deg, rgba(73, 199, 255, 0.76), transparent);
}

.site-footer-star {
  color: #d9f5ff;
  font-size: 19px;
  line-height: 1;
  text-shadow:
    0 0 6px rgba(121, 221, 255, 0.95),
    0 0 15px rgba(73, 199, 255, 0.72);
}

.site-footer-utility {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.site-footer-utility a,
.site-footer-utility span {
  color: rgba(238, 243, 247, 0.58);
  font-size: 12px;
  line-height: 1.5;
  text-decoration: none;
}

.site-footer-utility a {
  transition:
    color 0.2s ease,
    text-shadow 0.2s ease;
}

.site-footer-utility a:hover,
.site-footer-utility a:focus-visible {
  color: var(--cyan-bright);
  text-shadow: 0 0 8px rgba(121, 221, 255, 0.42);
}

.site-footer-copyright {
  margin: 11px 0 0;
  color: rgba(238, 243, 247, 0.54);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.site-footer-legal {
  order: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;

  margin-top: 5px;
}

.site-footer-legal a,
.site-footer-legal span {
  color: rgba(238, 243, 247, 0.54);
  font-size: 10px;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
}

.site-footer-legal a:hover,
.site-footer-legal a:focus-visible {
  color: var(--cyan-bright);
  text-shadow: 0 0 8px rgba(121, 221, 255, 0.42);
}

@media (max-width: 1100px) {
  .language-switcher {
    top: auto;
    right: 14px;
    bottom: 14px;
  }
}

@media (max-width: 760px) {
  .site-button {
    min-height: 44px;
    font-size: 11px;
  }

  .page-cta {
    margin-bottom: 48px;
    padding: 30px 22px;
  }

  .site-footer {
    padding-right: 18px;
    padding-left: 18px;
  }

  .site-footer-social {
    grid-template-columns: repeat(6, 26px);
    column-gap: 16px;
    row-gap: 8px;
  }

  .site-footer-social a {
    width: 26px;
    height: 26px;
  }

  .site-footer-social a::before {
    width: 18px;
    height: 18px;
  }

  .site-footer-divider {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-button {
    transition: none;
  }
}