/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.1
Text Domain: uncode
*/

/* ------------------------------------------------------------------
   Google Font fallback: Cormorant Garamond
   Loaded once, all weights used by The Tally faces (400, 500, 600, 700)
   in roman and italic. @import must sit above every other rule.
   ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

/* ------------------------------------------------------------------
   Brand faces: La Luxes Serif Pro, self-hosted
   A font-family name inside @font-face is a label, not a stack, so the
   fallbacks live in the stacks below, not in these declarations.
   ------------------------------------------------------------------ */

@font-face {
    font-family: 'The Tally Bold Italic';
    src: url('/wp-content/themes/uncode-child/fonts/LaLuxesSerifPro-BoldItalic.woff2') format('woff2'),
        url('/wp-content/themes/uncode-child/fonts/LaLuxesSerifPro-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'The Tally Bold';
    src: url('/wp-content/themes/uncode-child/fonts/LaLuxesSerifPro-Bold.woff2') format('woff2'),
        url('/wp-content/themes/uncode-child/fonts/LaLuxesSerifPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Tally Extra Bold Italic';
    src: url('/wp-content/themes/uncode-child/fonts/LaLuxesSerifPro-ExtBdIta.woff2') format('woff2'),
        url('/wp-content/themes/uncode-child/fonts/LaLuxesSerifPro-ExtBdIta.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'The Tally Regular';
    src: url('/wp-content/themes/uncode-child/fonts/LaLuxesSerifPro-Regular.woff2') format('woff2'),
        url('/wp-content/themes/uncode-child/fonts/LaLuxesSerifPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Tally Italic';
    src: url('/wp-content/themes/uncode-child/fonts/LaLuxesSerifPro-Italic.woff2') format('woff2'),
        url('/wp-content/themes/uncode-child/fonts/LaLuxesSerifPro-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'The Tally Medium';
    src: url('/wp-content/themes/uncode-child/fonts/LaLuxesSerifPro-Medium.woff2') format('woff2'),
        url('/wp-content/themes/uncode-child/fonts/LaLuxesSerifPro-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Tally Medium Italic';
    src: url('/wp-content/themes/uncode-child/fonts/LaLuxesSerifPro-MediumItalic.woff2') format('woff2'),
        url('/wp-content/themes/uncode-child/fonts/LaLuxesSerifPro-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* ------------------------------------------------------------------
   Font stacks with fallbacks
   Order: The Tally face, then Cormorant Garamond, then Georgia, then
   the generic serif. Paste the matching stack into the font-family
   field in Uncode > Theme Options > Typography > Custom Fonts so the
   fallback travels with every heading and text style that uses it.
   ------------------------------------------------------------------ */
:root {
    --tally-serif-fallback: 'Cormorant Garamond', Georgia, serif;

    --font-tally-regular:           'The Tally Regular', var(--tally-serif-fallback);
    --font-tally-italic:            'The Tally Italic', var(--tally-serif-fallback);
    --font-tally-medium:            'The Tally Medium', var(--tally-serif-fallback);
    --font-tally-medium-italic:     'The Tally Medium Italic', var(--tally-serif-fallback);
    --font-tally-bold:              'The Tally Bold', var(--tally-serif-fallback);
    --font-tally-bold-italic:       'The Tally Bold Italic', var(--tally-serif-fallback);
    --font-tally-extra-bold:        'The Tally Extra Bold', var(--tally-serif-fallback);
    --font-tally-extra-bold-italic: 'The Tally Extra Bold Italic', var(--tally-serif-fallback);
}

/* Utility classes: add to any Uncode element via Extra Class Name.
   Weight and style are set so Cormorant Garamond and Georgia render
   at the same weight and posture as the brand face they stand in for. */
   
.font-tally-regular {
    font-family: 'The Tally Regular', 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-style: normal;
}

.font-tally-italic {
    font-family: 'The Tally Italic', 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-style: italic;
}

.font-tally-medium {
    font-family: 'The Tally Medium', 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-style: normal;
}

.font-tally-medium-italic {
    font-family: 'The Tally Medium Italic', 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-style: italic;
}

.font-tally-bold {
    font-family: 'The Tally Bold', 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-style: normal;
}

.font-tally-bold-italic {
    font-family: 'The Tally Bold Italic', 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-style: italic;
}

.font-tally-extra-bold {
    font-family: 'The Tally Extra Bold', 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-style: normal;
}

.font-tally-extra-bold-italic {
    font-family: 'The Tally Extra Bold Italic', 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-style: italic;
}

/* ------------------------------------------------------------------
   Responsive typography
   Keep the type scale fluid between the breakpoints, while the media
   queries provide firmer limits for tablet and mobile layouts.
   ------------------------------------------------------------------ */
:root {
    --tally-size-h1: clamp(2.75rem, 5vw, 5.5rem);
    --tally-size-h2: clamp(2.25rem, 4vw, 4rem);
    --tally-size-h3: clamp(1.75rem, 3vw, 3rem);
    --tally-size-h4: clamp(1.5rem, 2.25vw, 2.25rem);
    --tally-size-h5: clamp(1.25rem, 1.75vw, 1.75rem);
    --tally-size-h6: clamp(1.125rem, 1.5vw, 1.5rem);
    --tally-size-body: clamp(1rem, 1.15vw, 1.25rem);
    --tally-size-small: clamp(0.875rem, 1vw, 1rem);
}

h1,
.h1 {
    font-size: var(--tally-size-h1) !important;
    line-height: 1.05 !important;
}

h2,
.h2 {
    font-size: var(--tally-size-h2) !important;
    line-height: 1.1 !important;
}

h3,
.h3 {
    font-size: var(--tally-size-h3) !important;
    line-height: 1.15 !important;
}

h4,
.h4 {
    font-size: var(--tally-size-h4) !important;
    line-height: 1.2 !important;
}

h5,
.h5 {
    font-size: var(--tally-size-h5) !important;
    line-height: 1.25 !important;
}

h6,
.h6 {
    font-size: var(--tally-size-h6) !important;
    line-height: 1.3 !important;
}

h1 strong, .h6 strong { color: #FBDBA0 !important; font-weight: 500 !important; }

p,
li,
blockquote {
    font-size: var(--tally-size-body) !important;
    line-height: 1.5 !important;
	font-feature-settings: 'ss01' on, 'ss03' on, 'ss04' on, 'ss05' on, 'ss07' on;

}

small,
figcaption,
.text-small,
.small-text {
    font-size: var(--tally-size-small) !important;
    line-height: 1.4 !important;
}

@media (max-width: 959px) {
    :root {
        --tally-size-h1: clamp(2.5rem, 7vw, 4.5rem);
        --tally-size-h2: clamp(2rem, 5.5vw, 3.5rem);
        --tally-size-h3: clamp(1.625rem, 4.5vw, 2.75rem);
        --tally-size-body: clamp(1rem, 1.8vw, 1.125rem);
    }
}

@media (max-width: 569px) {
    :root {
        --tally-size-h1: clamp(2.25rem, 11vw, 3.5rem);
        --tally-size-h2: clamp(1.875rem, 9vw, 2.75rem);
        --tally-size-h3: clamp(1.5rem, 7vw, 2.25rem);
        --tally-size-h4: clamp(1.375rem, 6vw, 1.875rem);
        --tally-size-h5: clamp(1.25rem, 5vw, 1.625rem);
        --tally-size-h6: clamp(1.125rem, 4.5vw, 1.375rem);
        --tally-size-body: 1rem;
        --tally-size-small: 0.875rem;
    }

    p,
    li,
    blockquote {
        line-height: 1.55 !important;
    }
}

.footer-logo {
	margin-bottom: -2px !important;
}

/* ============================================================
   THE TALLY – GLOBAL NAV OVERRIDES
   ============================================================ */

/* ---- Tighter gaps between nav links (desktop) ---- */
@media (min-width: 960px) {
  .navbar .menu-primary-inner.menu-smart > li > a,
  .navbar .menu-cta-inner.menu-smart > li > a {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  /* Reduce the gap between the main menu and the Sign In / Sign Up / button group */
  .navbar .navbar-nav-first {
    margin-right: 6px;
  }
}

/* ---- Pipe between SIGN IN and SIGN UP ---- */
@media (min-width: 960px) {
  .navbar-cta ul.menu-smart > li.cta-first + li::before {
    content: "|";
    display: inline-block;
    color: currentColor;
    opacity: 0.4;
    font-weight: 400;
    margin: 0 2px 0 0;
    pointer-events: none;
  }
}

/* ---- Rollover color for all nav links ---- */
.navbar .menu-smart > li > a:hover,
.navbar .menu-smart > li > a:focus,
.navbar .menu-smart > li.active > a:hover,
.navbar .menu-smart > li.current-menu-item > a:hover {
  color: #EF4C75 !important;
}

/* ---- CTA button: GET YOUR EQUITY FILE ---- */
.navbar .menu-item-button .menu-btn-container.btn {
  background-color: #EF4C75 !important;
  border: 1px solid #EF4C75 !important;
  color: #FFFFFF !important;
  letter-spacing: 0 !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.navbar .menu-item-button .menu-btn-container.btn span {
  letter-spacing: 0 !important;
  color: inherit;
}

/* Button rollover */
.navbar .menu-item-button a:hover .menu-btn-container.btn,
.navbar .menu-item-button a:focus .menu-btn-container.btn,
.navbar .menu-item-button .menu-btn-container.btn:hover {
  background-color: #FFF8EA !important;
  border-color: #EF4C75 !important;
  color: #EF4C75 !important;
}


/* IMAGE STYLES */
.tally-corners img {
	border-radius: 0.625rem 7.5rem !important;
}
.pay-gap-card {
  transform: rotate(15deg) !important;
}
@media (max-width: 959px) {
  .pay-gap-card { transform: rotate(7deg) !important; }
}

/* 1. The row/section the line is anchored to.
      Add the class "draw-anchor" to the Row (Row settings > Extra class). */
.draw-anchor {
  position: relative;
}

/* 2. The wrapper you drop in a Raw HTML module.
      Everything is controlled by CSS variables you can override inline
      or per-instance with an extra class. */
.scroll-draw {
  position: absolute;
  top:    var(--draw-top, auto);
  right:  var(--draw-right, auto);
  bottom: var(--draw-bottom, auto);
  left:   var(--draw-left, auto);
  width:  var(--draw-width, 320px);
  max-width: 100%;
  z-index: var(--draw-z, 5);
  transform: translate(var(--draw-x, 0px), var(--draw-y, 0px))
             rotate(var(--draw-rotate, 0deg))
             scaleX(var(--draw-flip, 1));
  transform-origin: center;
  pointer-events: none;
  visibility: hidden;                  /* hidden until the JS measures the paths */
}
.scroll-draw.is-ready { visibility: visible; }

.scroll-draw svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* 3. Stroke styling. Color and width live here.
      Note: stroke-width is in the SVG's viewBox units, so a wider container
      makes the line proportionally thicker. */
.scroll-draw path,
.scroll-draw line,
.scroll-draw polyline,
.scroll-draw polygon,
.scroll-draw circle,
.scroll-draw ellipse,
.scroll-draw rect {
  fill: none !important;
  stroke: var(--draw-stroke, #c9a96e) !important;
  stroke-width: var(--draw-stroke-width, 2) !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--draw-opacity, 1);
  will-change: stroke-dashoffset;
}

/* 4. Optional: smooth the scrub so it feels less stepped on trackpads. */
.scroll-draw[data-draw-smooth] path,
.scroll-draw[data-draw-smooth] line,
.scroll-draw[data-draw-smooth] polyline,
.scroll-draw[data-draw-smooth] polygon,
.scroll-draw[data-draw-smooth] circle,
.scroll-draw[data-draw-smooth] ellipse,
.scroll-draw[data-draw-smooth] rect {
  transition: stroke-dashoffset 0.25s linear;
}

/* 5. Responsive overrides. Re-declare the variables per breakpoint. */
@media (max-width: 959px) {
  .scroll-draw {
    --draw-width: 220px;
  }
}
@media (max-width: 599px) {
  .scroll-draw {
    --draw-width: 160px;
  }
}

/* 6. Accessibility: draw everything instantly for users who opt out of motion. */
@media (prefers-reduced-motion: reduce) {
  .scroll-draw path,
  .scroll-draw line,
  .scroll-draw polyline,
  .scroll-draw polygon,
  .scroll-draw circle,
  .scroll-draw ellipse,
  .scroll-draw rect {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none;
  }
}

.scroll-draw--hero-thread {
  --draw-top: 62%;
  --draw-right: -4%;
  --draw-width: 1000px;
  --draw-stroke: #c9a96e;
  --draw-stroke-width: 1.5;
  --draw-rotate: -8deg;
}