/**
 * FifoConsult Custom WordPress Theme
 *
 * CSS module: BODY 05 / Institutional Close.
 *
 * Module:
 * FifoConsult - Institutional Close / Footer Preview System.
 *
 * This stylesheet controls the final BODY storytelling section rendered by
 * template-parts/body-institutional-close.php. It builds the fixed internal
 * footer frame, background imagery, shade layers, sector preview image, menu
 * labels, institutional copy, footer logo, address block and responsive scale
 * rules for the closing FifoConsult presentation layer.
 *
 * Main visual responsibilities:
 * - define the BODY 05 frame dimensions and shared visual tokens
 * - position the background, shade, upper/lower frame and preview image layers
 * - style the primary footer preview areas and sector labels
 * - style the active content title, lead, signature logo, address and copyright
 * - preserve the visual isolation of BODY 05 from BODY 04 and earlier modules
 * - provide responsive scaling without changing the PHP markup contract
 *
 * Interaction boundary:
 * JavaScript in assets/js/main.js toggles BODY 05 open/active states and swaps
 * preview content. This CSS must preserve the class and data-attribute styling
 * hooks used by that controller.
 *
 * Related PHP:
 * template-parts/body-institutional-close.php
 *
 * Related JavaScript:
 * assets/js/main.js
 *
 * Visual assets:
 * assets/img/body/institutional-close/
 * assets/img/fifoconsult-footer-logo.png
 *
 * Concept, visual direction, structure, interface design and implementation:
 * Dragan Oljaca / FifoConsult
 *
 * Website: https://www.fifoconsult.com
 * Author: Dragan Oljaca
 * Brand: FifoConsult
 *
 * All rights reserved.
 */

.fc-body-institutional-close {
  --fc-close-frame-w: 1920px;
  --fc-close-frame-h: 1070px;
  --fc-close-upper-x: 0;
  --fc-close-upper-y: 0;
  --fc-close-upper-w: 1920px;
  --fc-close-upper-h: 860px;
  --fc-close-lower-x: 0;
  --fc-close-lower-y: 860px;
  --fc-close-lower-w: 1920px;
  --fc-close-lower-h: 210px;
  --fc-close-left-w: 1177px;
  --fc-close-c1-x: 0;
  --fc-close-c1-w: 335px;
  --fc-close-c2-x: 335px;
  --fc-close-c2-w: 271px;
  --fc-close-c3-x: 606px;
  --fc-close-c3-w: 570px;
  --fc-close-c4-x: 1177px;
  --fc-close-c4-w: 743px;
  --fc-close-c4-h: 1080px;
  --fc-close-gold: rgba(216, 173, 66, 0.96);
  --fc-close-muted: rgba(214, 214, 214, 0.64);
  --fc-close-white: rgba(238, 238, 238, 0.88);
  --fc-close-scale: 1;

  position: relative;
  width: 100%;
  padding-top: 0;
  overflow: hidden;
  background: #030303;
  color: var(--fc-close-white);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.fc-body-institutional-close__viewport {
  position: relative;
  width: calc(var(--fc-close-frame-w) * var(--fc-close-scale));
  height: calc(var(--fc-close-frame-h) * var(--fc-close-scale));
  margin: 0 auto;
  overflow: hidden;
}

.fc-body-institutional-close__frame {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--fc-close-frame-w);
  height: var(--fc-close-frame-h);
  overflow: hidden;
  isolation: isolate;
  background: #030303;
  transform-origin: top center;
  transform: translateX(-50%) scale(var(--fc-close-scale));
}

.fc-body-institutional-close__upper {
  position: absolute;
  left: var(--fc-close-upper-x);
  top: var(--fc-close-upper-y);
  width: var(--fc-close-upper-w);
  height: var(--fc-close-upper-h);
  z-index: 1;
  pointer-events: none;
}

.fc-body-institutional-close__lower {
  position: absolute;
  left: var(--fc-close-lower-x);
  top: var(--fc-close-lower-y);
  width: var(--fc-close-lower-w);
  height: var(--fc-close-lower-h);
  z-index: 1;
  pointer-events: none;
}

.fc-body-institutional-close__background {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: var(--fc-close-frame-w);
  height: var(--fc-close-c4-h);
  pointer-events: none;
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.48) 0%,
      rgba(0, 0, 0, 0.18) 38%,
      rgba(0, 0, 0, 0.08) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.08) 68%,
      rgba(0, 0, 0, 0.58) 100%
    ),
    url("../img/body/institutional-close/footer-background.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 1920px 1080px;
}

.fc-body-institutional-close__shade {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: var(--fc-close-frame-w);
  height: var(--fc-close-c4-h);
  pointer-events: none;
  background:
    radial-gradient(
      circle at 69% 49%,
      rgba(216, 173, 66, 0.11),
      transparent 28%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.52) 0%,
      rgba(0, 0, 0, 0.12) 48%,
      rgba(0, 0, 0, 0.1) 100%
    );
}

.fc-body-institutional-close__visual {
  position: absolute;
  left: var(--fc-close-c4-x);
  top: 0;
  z-index: 3;
  width: var(--fc-close-c4-w);
  height: var(--fc-close-c4-h);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 4800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 4800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fc-body-institutional-close__visual img {
  display: block;
  width: 743px;
  height: 1080px;
  object-fit: none;
  transform-origin: center center;
}

#fcBodyInstitutionalClose.is-open .fc-body-institutional-close__visual img {
  animation: fcBody05RightImageBreath 11s ease-in-out 4800ms infinite;
  will-change: transform;
}

@keyframes fcBody05RightImageBreath {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.008);
  }
}

.fc-body-institutional-close__primary-nav,
.fc-body-institutional-close__sector-nav {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: var(--fc-close-left-w);
  height: var(--fc-close-upper-h);
}

.fc-body-institutional-close__primary-item,
.fc-body-institutional-close__sector-item {
  position: absolute;
  display: block;
  width: max-content;
  max-width: 260px;
  color: var(--fc-close-muted);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.72);
}

.fc-body-institutional-close__sector-item {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  text-align: inherit;
  transition:
    color 420ms ease,
    opacity 420ms ease;
}

#fcBodyInstitutionalClose:not(.is-open)
  .fc-body-institutional-close__primary-item--menu {
  cursor: pointer;
  transition:
    color 520ms ease,
    opacity 520ms ease,
    text-shadow 520ms ease;
}

#fcBodyInstitutionalClose:not(.is-open)
  .fc-body-institutional-close__primary-item--menu:hover,
#fcBodyInstitutionalClose:not(.is-open)
  .fc-body-institutional-close__primary-item--menu:focus-visible {
  color: var(--fc-close-gold);
  opacity: 1;
  text-shadow: 0 0 14px rgba(218, 190, 120, 0.28);
  outline: none;
}

.fc-body-institutional-close__primary-item.is-active,
.fc-body-institutional-close__sector-item.is-active,
.fc-body-institutional-close__lead strong,
.fc-body-institutional-close__title em {
  color: var(--fc-close-gold);
}

#fcBodyInstitutionalClose[data-fc-close-state="access-details"]
  .fc-body-institutional-close__title
  em,
#fcBodyInstitutionalClose[data-fc-close-state="workflow-logic"]
  .fc-body-institutional-close__title
  em,
#fcBodyInstitutionalClose[data-fc-close-state="smart-ui"]
  .fc-body-institutional-close__title
  em,
#fcBodyInstitutionalClose[data-fc-close-state="method"]
  .fc-body-institutional-close__title
  em {
  color: #a884ff;
}

#fcBodyInstitutionalClose[data-fc-close-state="academy-access"]
  .fc-body-institutional-close__title
  em,
#fcBodyInstitutionalClose[data-fc-close-state="learning-workflow"]
  .fc-body-institutional-close__title
  em,
#fcBodyInstitutionalClose[data-fc-close-state="smart-practice"]
  .fc-body-institutional-close__title
  em,
#fcBodyInstitutionalClose[data-fc-close-state="creative-method"]
  .fc-body-institutional-close__title
  em {
  color: #d7f26a;
}

.fc-body-institutional-close__primary-item--menu {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  text-align: inherit;
  left: 105px;
  top: 210px;
}

#fcBodyInstitutionalClose.is-open
  .fc-body-institutional-close__primary-item--menu {
  color: var(--fc-close-muted);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.72);
  transition:
    color 1200ms cubic-bezier(0.22, 1, 0.36, 1) 4800ms,
    text-shadow 1200ms cubic-bezier(0.22, 1, 0.36, 1) 4800ms;
}

.fc-body-institutional-close__primary-item--client {
  left: 105px;
  top: 465px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 4800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 4800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fc-body-institutional-close__primary-item--academy {
  left: 105px;
  top: 725px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 4800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 4800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fc-body-institutional-close__sector-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 4800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 4800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fc-body-institutional-close__sector-item--about {
  left: 397px;
  top: 130px;
}

.fc-body-institutional-close__sector-item--product-design {
  left: 397px;
  top: 180px;
}

.fc-body-institutional-close__sector-item--products {
  left: 397px;
  top: 230px;
}

.fc-body-institutional-close__sector-item--brand {
  left: 397px;
  top: 280px;
}

.fc-body-institutional-close__sector-item--access-details {
  left: 397px;
  top: 385px;
}

.fc-body-institutional-close__sector-item--workflow-logic {
  left: 397px;
  top: 435px;
}

.fc-body-institutional-close__sector-item--smart-ui {
  left: 397px;
  top: 485px;
}

.fc-body-institutional-close__sector-item--method {
  left: 397px;
  top: 535px;
}

.fc-body-institutional-close__sector-item--academy-access {
  left: 397px;
  top: 650px;
}

.fc-body-institutional-close__sector-item--learning-workflow {
  left: 397px;
  top: 700px;
}

.fc-body-institutional-close__sector-item--smart-practice {
  left: 397px;
  top: 750px;
}

.fc-body-institutional-close__sector-item--creative-method {
  left: 397px;
  top: 800px;
}

#fcBodyInstitutionalClose.is-open
  .fc-body-institutional-close__sector-item:hover,
#fcBodyInstitutionalClose.is-open
  .fc-body-institutional-close__sector-item:focus-visible {
  color: var(--fc-close-gold);
  text-shadow: none;
  outline: none;
}

.fc-body-institutional-close__content {
  position: absolute;
  left: 635px;
  top: 355px;
  z-index: 4;
  width: 500px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 4800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 4800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fc-body-institutional-close__title {
  position: absolute;
  left: 0;
  top: 0;
  width: 500px;
  margin: 0;
  color: var(--fc-close-white);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.68);
}

.fc-body-institutional-close__title em {
  font-style: normal;
  font-weight: 700;
  text-transform: none;
}

#fcBodyInstitutionalClose[data-fc-close-state="about"]
  .fc-body-institutional-close__title
  em {
  font-style: italic;
}

.fc-body-institutional-close__title span {
  font-weight: 700;
}

.fc-body-institutional-close__lead {
  position: absolute;
  left: 0;
  top: 75px;
  width: 500px;
  margin: 0;
  color: rgba(231, 231, 231, 0.78);
  font-size: 19px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.72);
}

.fc-body-institutional-close__lead strong {
  font-weight: 400;
}

.fc-body-institutional-close__lead .fc-gold-link {
  color: var(--fc-close-gold);
  text-decoration: none;
  transition:
    color 420ms ease,
    opacity 420ms ease;
}

.fc-body-institutional-close__lead .fc-gold-link:hover,
.fc-body-institutional-close__lead .fc-gold-link:focus-visible {
  color: rgba(245, 214, 126, 1);
  text-decoration: none;
  outline: none;
}

.fc-body-institutional-close__signature-brand {
  position: absolute;
  left: 105px;
  top: 920px;
  z-index: 4;
  width: 210px;
  height: 80px;
}

.fc-body-institutional-close__signature-logo {
  display: block;
  width: 210px;
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.68));
}

.fc-body-institutional-close__institution {
  position: absolute;
  left: 397px;
  top: 930px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  width: 700px;
  margin: 0;
  color: rgba(229, 229, 229, 0.68);
  font-style: normal;
  text-align: left;
}

.fc-body-institutional-close__institution span {
  display: inline-block;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.68);
}

.fc-body-institutional-close__institution span:nth-child(1),
.fc-body-institutional-close__institution span:nth-child(2),
.fc-body-institutional-close__institution span:nth-child(3) {
  font-style: italic;
}

.fc-body-institutional-close__institution span:nth-child(4) {
  flex-basis: 176px;
}

.fc-body-institutional-close__institution .fc-body-institutional-close__phone {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.fc-body-institutional-close__inquiry-trigger {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fc-close-gold);
  opacity: 0.66;
  cursor: pointer;
  transform: rotate(-6deg) skewX(-7deg);
  transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(154, 125, 63, 0.06));
  transition:
    opacity 360ms ease,
    filter 360ms ease,
    transform 360ms ease;
}

.fc-body-institutional-close__inquiry-trigger svg {
  width: 32px;
  height: 32px;
  display: block;
  pointer-events: none;
}

.fc-body-institutional-close__inquiry-trigger:hover {
  opacity: 1;
  transform: translateX(2px) rotate(-3deg) skewX(-4deg);
  filter: drop-shadow(0 0 10px rgba(154, 125, 63, 0.22));
}

.fc-body-institutional-close__inquiry-trigger:focus-visible {
  outline: 1px solid rgba(154, 125, 63, 0.78);
  outline-offset: 4px;
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(154, 125, 63, 0.22));
}

.fc-body-institutional-close__copyright {
  position: absolute;
  left: 1515px;
  top: 950px;
  z-index: 4;
  width: 330px;
  margin: 0;
  color: rgba(229, 229, 229, 0.58);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
  text-align: right;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.68);
  opacity: 1;
  transition: opacity 1600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fc-body-institutional-close.is-open .fc-body-institutional-close__visual,
.fc-body-institutional-close.is-open .fc-body-institutional-close__sector-nav,
.fc-body-institutional-close.is-open .fc-body-institutional-close__content,
.fc-body-institutional-close.is-open
  .fc-body-institutional-close__primary-item--client,
.fc-body-institutional-close.is-open
  .fc-body-institutional-close__primary-item--academy {
  opacity: 1;
  transform: translateY(0);
}

#fcBodyInstitutionalClose.is-open .fc-body-institutional-close__copyright {
  opacity: 0;
  pointer-events: none;
}

.fc-body-institutional-close.is-open .fc-body-institutional-close__sector-nav,
.fc-body-institutional-close.is-open .fc-body-institutional-close__content,
.fc-body-institutional-close.is-open
  .fc-body-institutional-close__primary-item--client,
.fc-body-institutional-close.is-open
  .fc-body-institutional-close__primary-item--academy {
  pointer-events: auto;
}

.fc-body-institutional-close.is-preview-switching
  .fc-body-institutional-close__visual,
.fc-body-institutional-close.is-preview-switching
  .fc-body-institutional-close__content {
  opacity: 0;
  transition: opacity 420ms ease;
}

@media (max-width: 1800px) {
  .fc-body-institutional-close {
    --fc-close-scale: 0.9375;
  }
}

@media (max-width: 1700px) {
  .fc-body-institutional-close {
    --fc-close-scale: 0.885;
  }
}

@media (max-width: 1600px) {
  .fc-body-institutional-close {
    --fc-close-scale: 0.833;
  }
}

@media (max-width: 1500px) {
  .fc-body-institutional-close {
    --fc-close-scale: 0.781;
  }
}

@media (max-width: 1400px) {
  .fc-body-institutional-close {
    --fc-close-scale: 0.729;
  }
}

@media (max-width: 1300px) {
  .fc-body-institutional-close {
    --fc-close-scale: 0.677;
  }
}

@media (max-width: 1200px) {
  .fc-body-institutional-close {
    --fc-close-scale: 0.625;
  }
}

@supports (transform: scale(calc(100vw / 1920px))) {
  .fc-body-institutional-close {
    --fc-close-scale: min(1, calc(100vw / 1920px));
  }
}

@media (min-width: 1921px) {
  .fc-body-institutional-close {
    background-image: url("../img/body/institutional-close/footer-background-wide.png");
    background-position: center top;
    background-repeat: no-repeat;

    /*
     * Wide background master: 3840 × 1080.
     *
     * Fit by the real CSS viewport width instead of fixing the image
     * to 1080 CSS pixels in height. This preserves the complete
     * Photoshop composition and prevents left/right cropping on
     * high-resolution monitors that use Windows display scaling.
     */
    background-size: 100% auto;
  }

  .fc-body-institutional-close__background {
    background-image: none;
  }

  .fc-body-institutional-close__shade {
    background: none;
    opacity: 0;
  }

  .fc-body-institutional-close__frame {
    background: transparent;
  }
}

.fc-header {
  transition: opacity 520ms ease;
}

body.fc-body05-active .fc-header {
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   BODY 05 / INSTITUTIONAL CLOSE — TYPOGRAPHY COLOR HARMONIZATION
   Uses the approved Mega Menu / TEXT reader palette.
   Typography colors only — no layout, preview images, animation,
   timing, responsive scaling, Header behavior or JavaScript changes.
   ========================================================= */

.fc-body-institutional-close {
  --fc-close-gold: #9a7d3f;
  --fc-close-muted: #706957;
  --fc-close-white: #887b60;
}

/* Primary groups and all sector links */

.fc-body-institutional-close__primary-item,
.fc-body-institutional-close__sector-item {
  color: #706957;
}

#fcBodyInstitutionalClose:not(.is-open)
  .fc-body-institutional-close__primary-item--menu:hover,
#fcBodyInstitutionalClose:not(.is-open)
  .fc-body-institutional-close__primary-item--menu:focus-visible,
#fcBodyInstitutionalClose.is-open
  .fc-body-institutional-close__sector-item:hover,
#fcBodyInstitutionalClose.is-open
  .fc-body-institutional-close__sector-item:focus-visible {
  color: #958b73;
  text-shadow: 0 0 12px rgba(149, 139, 115, 0.22);
}

.fc-body-institutional-close__primary-item.is-active,
.fc-body-institutional-close__sector-item.is-active {
  color: #9a7d3f;
  text-shadow:
    0 0 12px rgba(154, 125, 63, 0.22),
    0 0 24px rgba(154, 125, 63, 0.12);
}

#fcBodyInstitutionalClose.is-open
  .fc-body-institutional-close__primary-item--menu {
  color: #706957;
}

/* Central title and description */

.fc-body-institutional-close__title {
  color: #887b60;
}

.fc-body-institutional-close__title em,
#fcBodyInstitutionalClose[data-fc-close-state="access-details"]
  .fc-body-institutional-close__title em,
#fcBodyInstitutionalClose[data-fc-close-state="workflow-logic"]
  .fc-body-institutional-close__title em,
#fcBodyInstitutionalClose[data-fc-close-state="smart-ui"]
  .fc-body-institutional-close__title em,
#fcBodyInstitutionalClose[data-fc-close-state="method"]
  .fc-body-institutional-close__title em,
#fcBodyInstitutionalClose[data-fc-close-state="academy-access"]
  .fc-body-institutional-close__title em,
#fcBodyInstitutionalClose[data-fc-close-state="learning-workflow"]
  .fc-body-institutional-close__title em,
#fcBodyInstitutionalClose[data-fc-close-state="smart-practice"]
  .fc-body-institutional-close__title em,
#fcBodyInstitutionalClose[data-fc-close-state="creative-method"]
  .fc-body-institutional-close__title em {
  color: #9a7d3f;
}

.fc-body-institutional-close__lead {
  color: #635d4f;
}

.fc-body-institutional-close__lead strong,
.fc-body-institutional-close__lead .fc-gold-link {
  color: #9a7d3f;
}

.fc-body-institutional-close__lead .fc-gold-link:hover,
.fc-body-institutional-close__lead .fc-gold-link:focus-visible {
  color: #b2924d;
  text-shadow: 0 0 14px rgba(154, 125, 63, 0.24);
}

/* Institutional and contact line */

.fc-body-institutional-close__institution {
  color: #706957;
}

.fc-body-institutional-close__institution span:nth-child(1),
.fc-body-institutional-close__institution span:nth-child(2),
.fc-body-institutional-close__institution span:nth-child(3) {
  color: #958b73;
}

.fc-body-institutional-close__institution span:nth-child(n + 4) {
  color: #706957;
}

.fc-body-institutional-close__copyright {
  color: #706957;
}

@media (prefers-reduced-motion: reduce) {
  .fc-body-institutional-close__inquiry-trigger {
    transition: none;
  }
}