/* ------------------------------------------------
 * Poni Architects — brand layer on top of Azurio main.css
 * Load order: loader.css → plugins.css → main.css → poni.css
 *
 * Theming: Azurio keeps every colour as a pair (--x--light / --x--dark) and
 * maps them to --x through [color-scheme="light|dark"] on <html> (set before
 * first paint by the inline head script, toggled by #color-switcher).
 * Here we only re-point the source pairs to the Poni palette.
 * ------------------------------------------------ */

/* ------------------------------------------------*/
/* 01. Tokens */
/* ------------------------------------------------*/
:root {
  /* Geom everywhere (latin + greek). Earlier trials: "Commissioner", "Comfortaa" */
  --_font-default: "Geom", sans-serif;
  --_font-accent: "Geom", sans-serif;

  /* Poni blue (logo) and its darker, AA-safe partner */
  --poni-blue: #688cb3;
  --poni-blue-deep: #3D6590;

  /* Dark theme page background (Poni navy) */
  --base--dark: #19222B;
  --base-rgb--dark: 25, 34, 43;

  /* Light (Day) theme "opposite" surfaces (menu, CTA band, cursor, dark buttons): Poni navy instead of black */
  --base-opp--light: #19222B;
  --base-opp-rgb--light: 25, 34, 43;

  /* Accent = backgrounds with white text (6.06:1), same in both themes */
  --accent--light: var(--poni-blue-deep);
  --accent--dark: var(--poni-blue-deep);

  /* Highlight = accent-coloured text on the page background */
  --highlight--light: var(--poni-blue-deep); /* 5.07:1 on #EEEAE8 */
  --highlight--dark: var(--poni-blue);       /* 4.59:1 on #19222B */

  /* Text on accent backgrounds */
  --pt-t-accent-bright: #ffffff;
  --pt-t-accent-medium: #DAE3ED;
  --pt-t-accent-muted: #C2D2E3;

  /* Soft accent surfaces */
  --poni-soft--light: #dfe7f0;
  --poni-soft--dark: #1b2530;
}

@media (prefers-color-scheme: light) {
  :root { --poni-soft: var(--poni-soft--light); }
}
@media (prefers-color-scheme: dark) {
  :root { --poni-soft: var(--poni-soft--dark); }
}
[color-scheme=light] { --poni-soft: var(--poni-soft--light); }
[color-scheme=dark] { --poni-soft: var(--poni-soft--dark); }

body {
  background-color: var(--base);
}

/* ------------------------------------------------*/
/* 02. Logo (inline SVG, colours follow the theme) */
/* ------------------------------------------------*/
.poni-logo {
  display: block;
  width: auto;
  height: 3.2rem;
  overflow: visible;
}
/* All-white (monochrome) logo: mark and P/O/N/I follow the text colour like the wordmark.
   White on the dark theme; on the light theme it follows the dark text so it stays visible. */
.poni-logo__mark,
.poni-logo__accent {
  fill: currentColor;
}
.poni-logo__text {
  fill: currentColor;
}
@media only screen and (min-width: 768px) {
  .poni-logo {
    height: 4.4rem;
  }
  .poni-header-logo .poni-logo {
    height: 5.4rem; /* header logo a bit larger than Azurio's default */
  }
}
.poni-menu-logo .poni-logo {
  height: 3.6rem;
}
@media only screen and (min-width: 768px) {
  .poni-menu-logo .poni-logo {
    height: 4.4rem;
  }
}
.poni-mark {
  display: block;
  width: auto;
  height: 100%;
}

/* ------------------------------------------------*/
/* 03. Header language switch (EN / EL) */
/* ------------------------------------------------*/
.poni-lang {
  display: inline-flex;
  align-items: center;
  height: 3.6rem;
  margin-right: 1.2rem;
  font: normal 700 1.4rem/1 var(--_font-accent);
  text-transform: uppercase;
  color: var(--t-bright);
}
.poni-lang.permanent {
  color: var(--nl-white);
}
.poni-lang__item {
  display: inline-flex;
  padding: 0.4rem;
  color: inherit;
  opacity: 0.55;
  transition: opacity var(--_animspeed-medium);
}
.poni-lang__item.is-current {
  opacity: 1;
}
.poni-lang__item + .poni-lang__item::before {
  content: "/";
  margin-right: 0.8rem;
  opacity: 0.55;
}
a.poni-lang__item:hover {
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .poni-lang {
    height: 4rem;
    margin-right: 2.4rem;
    font-size: 1.8rem;
    letter-spacing: -0.05rem;
  }
}

/* ------------------------------------------------*/
/* 04. Accent touches */
/* ------------------------------------------------*/
.mxd-block-split__subtitle p span,
.poni-hero-eyebrow {
  color: var(--highlight);
}
.poni-hero-eyebrow {
  margin-bottom: 0.8rem;
  font: normal 600 1.3rem/1.4 var(--_font-default);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--poni-blue);
}
.poni-prose {
  margin-top: 2.4rem;
}
.mxd-block-split__info.poni-member__facts {
  margin-top: 4rem;
}

/* ------------------------------------------------*/
/* 05. Hero image (Azurio hero #06 expects a video) */
/* ------------------------------------------------*/
img.mxd-hero-06__video,
.inner-headline__bg img.video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------*/
/* 06. Projects archive filter */
/* ------------------------------------------------*/
.poni-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 4rem;
}
.poni-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 4.4rem;
  padding: 0 2rem;
  border: 1px solid var(--st-medium);
  border-radius: 10rem;
  background: transparent;
  font: normal 600 1.5rem/1 var(--_font-default);
  color: var(--t-medium);
  cursor: pointer;
  transition: background-color var(--_animspeed-medium), color var(--_animspeed-medium), border-color var(--_animspeed-medium);
}
.poni-filter__chip sup {
  font-size: 1.1rem;
  top: -0.4em;
}
.poni-filter__chip:hover {
  color: var(--t-bright);
  border-color: var(--t-bright);
}
.poni-filter__chip.is-active {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--pt-t-accent-bright);
}
.poni-project[hidden] {
  display: none !important;
}

/* ------------------------------------------------*/
/* 07. Team member */
/* ------------------------------------------------*/
.poni-member {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.poni-member__photo {
  width: 20rem;
  max-width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.4rem;
}
.poni-member__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.poni-member__name {
  font-size: 4.2rem;
}
@media only screen and (min-width: 1200px) {
  .poni-member__name {
    font-size: 5.6rem;
  }
}

/* ------------------------------------------------*/
/* 08. Content placeholders (visible during client review) */
/* ------------------------------------------------*/
.poni-placeholder {
  display: inline;
  padding: 0.1em 0.4em;
  border: 1px dashed var(--highlight);
  border-radius: 0.3rem;
  background-color: var(--poni-soft);
  color: var(--t-medium);
  font-style: italic;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.poni-map {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24rem;
  padding: 2rem;
  border: 1px dashed var(--st-medium);
  border-radius: 0.4rem;
  text-align: center;
}

/* ------------------------------------------------*/
/* 09. Accessibility */
/* ------------------------------------------------*/
.poni-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.poni-skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10000;
  padding: 1.2rem 2rem;
  border-radius: 0.4rem;
  background-color: var(--accent);
  color: var(--pt-t-accent-bright);
  font: normal 600 1.6rem/1 var(--_font-default);
  transform: translateY(-200%);
}
.poni-skip-link:focus {
  transform: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--highlight) !important;
  outline-offset: 3px;
}
button:focus-visible {
  outline: 2px solid var(--highlight) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------*/
/* 10. Project titles: subtitle on its own line */
/* ------------------------------------------------*/
.mxd-project-item__name .project-name-s span {
  display: block;
  color: var(--t-medium);
}

/* ------------------------------------------------*/
/* 11. Links inside Azurio text blocks */
/* ------------------------------------------------*/
.mxd-team-grid__name a {
  color: inherit;
}
.services-card__tags a.tag {
  color: var(--t-medium);
  transition: color var(--_animspeed-medium);
}
.services-card__tags a.tag:hover {
  color: var(--t-bright);
}
@media only screen and (min-width: 1200px) {
  .poni-member {
    position: sticky;
    top: 12rem;
  }
}

/* ------------------------------------------------*/
/* 12. Small screens */
/* ------------------------------------------------*/
@media only screen and (max-width: 767px) {
  .mxd-header .poni-lang {
    display: none; /* the language switch lives in the menu on phones */
  }
  .poni-header-logo .poni-logo {
    height: 3.4rem;
  }
}
.poni-lang--menu {
  height: auto;
  margin: 0;
  font-size: 1.4rem;
  color: var(--t-opp-medium);
}

/* The studio e-mail is longer than Azurio's sample: scale the full-width line to fit */
.headline-email-text .fullwidth-text__content.small {
  font-size: 7.4cqw;
}

/* ------------------------------------------------*/
/* 13. Loader & page transition follow the theme */
/* ------------------------------------------------*/
.mxd-page-transition {
  background-color: var(--base);
}
.mxd-loader {
  font-family: var(--_font-default);
  color: var(--t-bright);
}

/* Menu logo sits on the photo: keep it white and lift it off bright skies */
.poni-menu-logo {
  color: var(--nl-white);
}
.poni-menu-logo .poni-logo__mark,
.poni-menu-logo .poni-logo__accent {
  fill: currentColor;
}
.poni-menu-logo .poni-logo {
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
}

/* Homepage "All projects" pixel arrow in Poni blue */
.mxd-object-link__object svg {
  fill: var(--highlight);
}

/* Footer "P.O.N.I" mark: Azurio's line-height (0.746) is tuned for its original font.
   With Geom's metrics the char masks (overflow: clip) cut off the dots and the bottom of the letters. */
.fw-mark__content,
.fw-mark__content span {
  line-height: 0.82;
}