/*!
 * FOOTER COMPONENTS
 * 1) Decorative elements (e.g., rainbow banner)
 * 2) Footer background overlays
 * 3) Footer quotes and typography
 * 4) Legal bar (copyright and nav)
 * Used in every page footer (Kadence element or layout)
 */



/*! * FOOTER ***** */
 /*    This section applies styles to elements beginning from the CTA Contact in the footer down to the Copyright and Legal Bar */
 
 
 /* =======================================================================================
    FOOTER — consolidated styles
    Structure in this order:
    1) Decorative banners
    2) Overlays/backgrounds
    3) Content spacing/typography
    4) Layout helpers (full-bleed, spacers)
    5) Legal bar (copyright + links)
    ======================================================================================= */
 
 
 /* =======================================================
 1) DECORATIVE BANNERS
 - Thin repeating pride banner that sits BETWEEN the “Artist Statement” section and the footer nav/quote area.
 - Add the .rainbow-love-banner element right after the Artist Statement block in your footer layout.   
 ======================================================= */
 
.rainbow-love-banner {
   background-image: url(/wp-content/uploads/2025/09/rainbow-love-bar-spanish-hindi-swahili-chinese-german-english-scaled.png);
   background-position: top center;
   background-repeat: repeat-x;
   background-size: auto 100%; /* this avoids vertical stretching */
   width: 100%;
   aspect-ratio: 35 / 1;
   height: auto;
   max-height: 40px;
   filter: opacity(0.6);
}
 
 /* Mobile override */
@media (max-width: 767px) {
   .rainbow-love-banner {
      background-image: url(/wp-content/uploads/2025/09/rainbow-love-bar-spanish-hindi-swahili-chinese-german-english-scaled.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      display: block;
      width: 100%;
      aspect-ratio: 35 / 1;
      height: auto;
      overflow: hidden;
      filter: opacity(0.6);
   }
}


 
 /* =======================================================
    2) OVERLAYS / BACKGROUNDS
    - Black and white Isola Palmarola film scan behind the footer area below rainbow-love-banner
    - Uses the Kadence inner wrapper as the overlay host
    ======================================================= */
 
 /* Anchor the row as a positioning context for ::before */
 .footer-nav-area{
   position: relative;
 }
 
 /* Real footer content sits above overlay, and we constrain height/overflow */
 .footer-nav-area > .kt-row-column-wrap{
   position: relative;             /* stacking context for ::before */
   z-index: 1;                     /* content above overlay */
   min-height: 260px;              /* your intended minimum visual height */
   overflow: hidden;               /* crop overlay if it extends */
 }
 
 /* Three background images layered under the content */
 .footer-nav-area > .kt-row-column-wrap::before{
   content: "";
   position: absolute;
   inset: 0;                       /* cover the entire wrapper */
   z-index: 0;                     /* overlay beneath content */
   pointer-events: none;
   background-image:
     url('/wp-content/uploads/2025/07/footer-image-island-film-scan-left-side.jpg'),
     url('/wp-content/uploads/2025/07/footer-image-island-film-scan-right-side.jpg'),
     url('/wp-content/uploads/2025/07/footer-image-island-film-scan.jpg');
   background-repeat: no-repeat, no-repeat, no-repeat;
   background-position:
     calc(50% - 1250px) top,       /* left scan parked far left of center */
     calc(50% + 1250px) top,       /* right scan parked far right of center */
     center top;                   /* center scan matches horizon */
   background-size: auto 100%, auto 100%, auto 100%;
   opacity: 1;                     /* fully visible; adjust if needed */
 }
 
 
 /* =======================================================
    3) CONTENT TYPOGRAPHY / SPACING
    - Quotes that sit within the footer NAV area
    ======================================================= */
 
 .footer-quote-text{
   font-weight: 500;
   font-style: italic;
   filter: opacity(.85);
   font-size: clamp(1rem, 1.6vw, 1.15rem);
   margin: 0 auto;
   max-width: 80rem;               /* keep a comfortable line length */
   padding: 0 8vw;                 /* reduced from 25% for better fit */
 }
 .footer-quote-author{
   font-weight: 500;
   text-transform: uppercase;
   filter: opacity(.7);
   font-size: .7em;
   margin: 0;
   padding: 10px 0 28px 0;
 }
 
 @media (max-width: 600px){
   .footer-quote-text{ padding: 0 6vw; }
 }
 
 
 /* =======================================================
    4) LAYOUT HELPERS
    - Force Kadence footer row to full-bleed
    - Optional spacer “shortcodes” (legacy helpers you still use)
    ======================================================= */
 
 .site-footer-row-container-inner .site-container{
   max-width: none !important;
   width: 100% !important;
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
 
 
 
 /* =======================================================
    5) LEGAL BAR (copyright + links)
    - Structure:
      <footer class="footer-credits">
        <div class="fc-row">
          <span class="fc-copy">…</span>
          <nav class="fc-links">…</nav>
        </div>
      </footer>
    - Wrapped within a Kadence row that has .footer-technicals
    ======================================================= */
 
 /* Footer credits container */
    .footer-credits {
      position: relative;
      font-style: normal;   /* not italic */
      color: #8a8a8a;
      font-weight: 400;
      font-size: clamp(12px, 2.8vw, 14px);
      padding: 0 0 1rem 0;
    }
    
    /* Flex layout: copyright left, links right */
    .fc-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: nowrap;
      white-space: nowrap;
      padding: 0 2vw;
      gap: 2rem;
    }
    
    /* Left side copyright text */
    .fc-copy {
      margin: 0;
      font-weight: 500;
    }
    
    /* Right side legal links */
    .fc-links {
      display: flex;
      gap: 1rem;
    }
    .fc-links a {
      color: #8a8a8a;
      text-decoration: underline;
    }
    .fc-links a:hover {
      color: #666;
    }
    
    /* Ultra-narrow phones: squeeze link spacing */
    @media (max-width: 360px) {
      .fc-links {
        gap: 0.75rem;
      }
    }
 



/* Styling for the ts_contact_info shortcode elements - studio hours and contact info in footer */
/*! Footer Info Section */

/* Container for all info sections: stacks vertically with tight spacing */
.infoBlockGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 14px;
  color: #434655;
  line-height: 1.3;
}

/* Horizontal flex group for paired items (e.g. email & phone) */
/* gap controls spacing between infoPair elements nested inside of infoRowGroup e.g. Email and Call or Text blocks*/
.infoRowGroup {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem; 
}
@media (max-width: 640px) {
  .infoRowGroup {
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
  }
}

/* Individual label–value pair (e.g. "EMAIL" and actual address) */
/* gap controls spacing between label and value(s) within an infoPair e.g. Email inquire@twosapphires.com */
.infoPair {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.8rem; 
  text-align: center;
  font-weight: 300;
  color: #6a6e7a;
  line-height: 1.8;
}
.infoPair strong {
  font-weight: 700;
  color: #434655;
}
.infoPair a {
  color: #434655;
  text-decoration: none;
}
.infoPair a:hover {
  color: var(--brandBlue);
  text-decoration: underline;
}