/* Odisal Sections: Site Footer. Logo, links and social icons on one line, then the company details. */
.osx-footer {
  --_link: var(--osx-footer-link, color-mix(in srgb, var(--osx-text) 85%, var(--osx-muted)));
  --_on: var(--osx-footer-on, var(--osx-accent));
  --_small: var(--osx-footer-small, color-mix(in srgb, var(--osx-muted) 85%, transparent));
}
.osx-footer-base { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 40px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.12); }

.osx .osx-footer-logo { display: block; width: var(--osx-footer-logo, 190px); color: var(--osx-text); text-decoration: none; }
.osx .osx-footer-logo:not(.osx-crop) img { width: 100%; height: auto; }
.osx-footer-name { font: 400 22px/1.1 var(--osx-head); }
/* A logo file cropped to its artwork (the crop controls) */
.osx .osx-crop { display: block; aspect-ratio: var(--osx-crop-ratio, 2.514); overflow: hidden; }
.osx .osx-crop img { width: var(--osx-crop-w, 141.5%); max-width: none; height: auto; margin: var(--osx-crop-y, -19.5%) 0 0 var(--osx-crop-x, -20.3%); }

.osx-footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; }
.osx-footer-nav a { text-decoration: none; font-size: 15px; color: var(--_link); }

.osx-footer-social { display: flex; gap: 10px; }
.osx-footer-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--osx-text); text-decoration: none; transition: transform 160ms var(--osx-ease-out), background-color 200ms ease, color 200ms ease; }
.osx-footer-social a:active { transform: scale(0.97); }
.osx-footer-social :is(svg, i) { width: 16px; height: 16px; font-size: 16px; line-height: 1; fill: currentColor; transition: fill 200ms ease, color 200ms ease; }

.osx-footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 22px; font-size: 12px; color: var(--_small); }
.osx-footer-legal a { color: inherit; }
/* above a theme's a:hover colour (the desktop hover colours below still win: same strength, later) */
.osx .osx-footer-nav a:where(:hover, :active, :focus) { color: var(--_link); }
.osx .osx-footer-legal a:where(:hover, :active, :focus) { color: inherit; }
.osx .osx-footer-social a:where(:hover, :active, :focus) { color: var(--osx-text); }

@media (hover: hover) and (pointer: fine) {
  .osx-footer-nav a { background: linear-gradient(var(--_on), var(--_on)) left bottom / 0 1px no-repeat; transition: background-size 250ms var(--osx-ease-out), color 200ms ease; }
  .osx-footer-nav a:hover { background-size: 100% 1px; color: var(--_on); }
  .osx-footer-social a:hover { background: var(--_on); color: var(--osx-dark); }
  .osx-footer-legal a:hover { color: var(--_on); }
}

@media (max-width: 980px) {
  .osx-footer-base { grid-template-columns: auto auto; justify-content: space-between; }
  .osx-footer-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .osx-footer-base { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; }
  .osx-footer-nav { grid-row: auto; justify-content: center; gap: 8px 22px; }
  .osx-footer-legal { flex-direction: column; align-items: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .osx-footer-nav a, .osx-footer-social a { transition: none; }
  .osx-footer-social a:active { transform: none; }
}