/* =============================================
   YoungFinance Design System v2.1
   youngfinance.no — Premium Motion Edition
   Updated: 2026-03-04
   ============================================= */

/* Import Josefine Sans from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&display=swap');

/* ——————————————————————————————————————
   1. DESIGN TOKENS
—————————————————————————————————————— */
:root {
    /* Brand */
    --yf-gold:        #F6C928;
    --yf-gold-glow:   rgba(246, 201, 40, 0.18);
    --yf-dark:        #111113;
    --yf-grey:        #54595F;
    --yf-grey-mid:    #7A7A7A;
    --yf-green:       #61CE70;

    /* Easing */
    --ease-expo:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth:    cubic-bezier(0.22, 1, 0.36, 1);

    /* Duration */
    --dur-instant:    0.12s;
    --dur-fast:       0.26s;
    --dur-base:       0.55s;
    --dur-slow:       0.85s;

    /* Shadows */
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.07), 0 3px 8px rgba(0,0,0,0.04);
    --shadow-md:      0 4px 20px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05);
    --shadow-lg:      0 14px 44px rgba(0,0,0,0.13), 0 4px 14px rgba(0,0,0,0.07);
    --shadow-gold:    0 6px 28px rgba(246, 201, 40, 0.30);

    /* Radius */
    --r-sm:           6px;
    --r-md:           12px;
    --r-lg:           20px;

    /* colors.css palette — warm YF brand palette */
    --yf-background:          #f7f3e7;
    --yf-background-rgba:     rgba(247, 243, 231, 1);
    --yf-text-primary:        #2f2f2d;
    --yf-text-primary-rgba:   rgba(47, 47, 45, 1);
    --yf-accent-primary:      #f3b12a;
    --yf-accent-primary-rgba: rgba(243, 177, 42, 1);
    --yf-accent-soft:         #f5e0b1;
    --yf-accent-soft-rgba:    rgba(245, 224, 177, 1);

/* ──────────────────────────────────────
   2. BASE
—————————————————————————————————————— */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
}

/* Icon font protection — override any global font-family !important rules
   that would break icon fonts. These must use !important to beat any
   body / body * global override in Elementor Global CSS or WP Customizer. */

/* Font Awesome icon elements */
.fa, .fas, .far, .fab {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "Font Awesome 5 Solid", sans-serif !important;
}

/* Elementor Eicons — target the <i> elements directly, NOT the wrapper div */
[class^="eicon-"],
[class*=" eicon-"] {
    font-family: "eicons" !important;
}

/* selection intentionally not overridden — browser default is safer on mobile */


/* ——————————————————————————————————————
   3. LAYOUT — overflow guard
—————————————————————————————————————— */
.elementor-section,
.e-con {
    overflow-x: clip;
}


/* ——————————————————————————————————————
   4. TYPOGRAPHY
—————————————————————————————————————— */
.elementor-heading-title {
    letter-spacing: -0.02em;
    font-feature-settings: "kern" 1, "liga" 1;
}

@media (max-width: 767px) {
    .elementor-widget-text-editor p,
    .elementor-widget-text-editor li {
        line-height: 1.7;
    }
}


/* ——————————————————————————————————————
   5. BUTTONS — depth hover system
   @media (hover: hover) prevents the iOS ghost-click bug
   where transform on :hover moves the element and swallows the tap.
—————————————————————————————————————— */
a.elementor-button,
.elementor-button {
    position: relative;
    transition:
        transform        var(--dur-fast) var(--ease-expo),
        box-shadow       var(--dur-fast) var(--ease-expo),
        background-color var(--dur-fast) ease;
    will-change: transform, box-shadow;
}

@media (hover: hover) and (pointer: fine) {
    a.elementor-button:hover,
    .elementor-button:hover {
        transform:  translateY(-3px);
        box-shadow: var(--shadow-lg);
    }
}

a.elementor-button:active,
.elementor-button:active {
    transform:  translateY(1px);
    box-shadow: var(--shadow-sm);
    transition-duration: var(--dur-instant);
}

/* 44px touch target on mobile/tablet */
@media (max-width: 1024px) {
    a.elementor-button,
    .elementor-button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* ——————————————————————————————————————
   6. IMAGES
—————————————————————————————————————— */
.elementor-widget-image img,
.elementor-widget-image-box .elementor-image-box-img img {
    max-width: 100%;
    height: auto;
}

/* Logo cap on mobile */
@media (max-width: 767px) {
    img.custom-logo {
        max-width: 140px !important;
        height: auto !important;
    }
}


/* ——————————————————————————————————————
   7. SITE LOGO
—————————————————————————————————————— */
img.custom-logo {
    transition: opacity var(--dur-fast) ease;
    will-change: opacity;
}

@media (hover: hover) and (pointer: fine) {
    img.custom-logo:hover {
        opacity: 0.72;
    }
}


/* ——————————————————————————————————————
   8. SPONSOR LOGO WALL
   Original Elementor sections (9fff6c2 + 48759ed) are replaced by
   the "YF Logo Wall" PHP snippet (snippet ID 21) which uses the
   local uploaded logos. Hide both sections here.
—————————————————————————————————————— */
.elementor-element-9fff6c2,
.elementor-element-48759ed { display: none !important; }


/* ——————————————————————————————————————
   9. IMAGE BOX — partner / board cards
   Hover only on pointer devices.
—————————————————————————————————————— */
.elementor-widget-image-box {
    transition: transform var(--dur-fast) var(--ease-expo);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .elementor-widget-image-box:hover {
        transform: translateY(-5px);
    }
}


/* ——————————————————————————————————————
   10. HOME PAGE — top distance holder
   Creates breathing room between the nav
   and the first Elementor section/container.
—————————————————————————————————————— */
.home .elementor-section:first-of-type,
.home .e-con:first-of-type {
    margin-top: 56px;
}

@media (max-width: 767px) {
    .home .elementor-section:first-of-type,
    .home .e-con:first-of-type {
        margin-top: 0;
    }
}


/* ——————————————————————————————————————
   11. HERO — load keyframes
   Runs once on page load for first section.
   JS does NOT touch this section.
—————————————————————————————————————— */
@keyframes yf-fade-up {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.elementor-top-section:first-of-type .elementor-heading-title {
    animation: yf-fade-up var(--dur-slow) var(--ease-expo) 0.10s both;
}

.elementor-top-section:first-of-type .elementor-widget-text-editor {
    animation: yf-fade-up var(--dur-slow) var(--ease-expo) 0.26s both;
}

.elementor-top-section:first-of-type .elementor-button-wrapper {
    animation: yf-fade-up var(--dur-slow) var(--ease-expo) 0.42s both;
}

.elementor-top-section:first-of-type .elementor-widget-image {
    animation: yf-fade-up var(--dur-slow) var(--ease-expo) 0.18s both;
}


/* ——————————————————————————————————————
   11. SCROLL REVEAL
   Base state defined here.
   .yf-reveal class is added by motion.js only —
   so no-JS users always see content.
—————————————————————————————————————— */
.yf-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity   var(--dur-slow) var(--ease-expo),
        transform var(--dur-slow) var(--ease-expo);
    will-change: opacity, transform;
}

.yf-reveal.is-visible {
    opacity:   1;
    transform: translateY(0);
}

/* Reduce travel on mobile */
@media (max-width: 767px) {
    .yf-reveal {
        transform: translateY(16px);
    }
}


/* ——————————————————————————————————————
   12. FOCUS — keyboard accessibility
—————————————————————————————————————— */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible {
    outline:        2px solid var(--yf-gold);
    outline-offset: 3px;
    border-radius:  var(--r-sm);
}


/* ——————————————————————————————————————
   13. MOBILE HERO — background fix
   Section 0117fde is the mobile-only hero.
   Match Elementor's own selector specificity + !important
   to guarantee a clean white background, no gold tint.
—————————————————————————————————————— */
@media (max-width: 767px) {
    .elementor-element-0117fde,
    .elementor-element-0117fde:not(.elementor-motion-effects-element-type-background),
    .elementor-element-0117fde > .elementor-motion-effects-container > .elementor-motion-effects-layer {
        background-color: #ffffff !important;
    }

    .elementor-element-0117fde > .elementor-background-overlay {
        opacity: 0 !important;
    }
}


/* ——————————————————————————————————————
   14. TEAM MEMBER CARDS (EAEL)
   Social link icons hidden on mobile by EAEL/Elementor responsive
   settings — force them visible without touching desktop layout.
—————————————————————————————————————— */
@media (max-width: 1024px) {
    .eael-team-member-social-link,
    .eael-team-member-social-link a,
    .eael-team-member-social-link i {
        display:    inline-flex !important;
        visibility: visible     !important;
        opacity:    1           !important;
    }
}


/* ——————————————————————————————————————
   15. BLI MEDLEM — hero image full-width on mobile
   Element 3cb86a5 is the portrait photo on /member/.
   Elementor constrains it to a narrow column by default.
—————————————————————————————————————— */
@media (max-width: 767px) {
    .elementor-element-3cb86a5 img {
        width:     100% !important;
        max-width: 100% !important;
        height:    auto !important;
    }
}


/* ——————————————————————————————————————
   16. THEME FOOTER — remove entirely
   The Layers theme outputs a footer (#footer.footer-site) that is
   empty (no widgets configured) and a floating back-to-top link.
   Both are replaced by the yf-social-bar injected via Code Snippets.
—————————————————————————————————————— */
#footer.footer-site,
#back-to-top {
    display: none !important;
}


/* ——————————————————————————————————————
   17. SOCIAL BAR
   CRITICAL: hover transform is wrapped in @media (hover: hover).
   On iOS/Android, :hover fires on tap-start, which moves the element
   via translateY. The browser then considers the tap to have missed
   the (now-shifted) target — the link never fires. Restricting the
   transform to pointer:fine devices (mouse/trackpad) fixes this.
—————————————————————————————————————— */
.yf-social-bar {
    padding:    52px 24px 56px;
    text-align: center;
    border-top: 1px solid rgba(84, 89, 95, 0.10);
    background: #ffffff;
    position:   relative;
    z-index:    10;
}

.yf-social-inner {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             20px;
    margin-bottom:   24px;
}

.yf-social-link {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          52px;
    border-radius:   50%;
    border:          1.5px solid rgba(84, 89, 95, 0.18);
    color:           var(--yf-grey);
    text-decoration: none;
    transition:
        color        var(--dur-fast) var(--ease-expo),
        border-color var(--dur-fast) var(--ease-expo),
        background   var(--dur-fast) var(--ease-expo),
        box-shadow   var(--dur-fast) var(--ease-expo),
        transform    var(--dur-fast) var(--ease-expo);
    /* Eliminate 300ms tap delay; allow vertical scroll */
    touch-action:     manipulation;
    /* iOS tap highlight */
    -webkit-tap-highlight-color: rgba(246, 201, 40, 0.10);
}

/* Hover: restricted to true pointer devices */
@media (hover: hover) and (pointer: fine) {
    .yf-social-link:hover {
        color:        #111;
        border-color: var(--yf-gold);
        transform:    translateY(-3px);
        box-shadow:   var(--shadow-gold);
    }
}

/* Active: fires on ALL devices — scales in place, no position shift */
.yf-social-link:active {
    background-color:    rgba(246, 201, 40, 0.10);
    border-color:        var(--yf-gold);
    color:               #111;
    transform:           scale(0.93);
    box-shadow:          none;
    transition-duration: var(--dur-instant);
}

.yf-social-link svg {
    width:          18px;
    height:         18px;
    fill:           currentColor;
    display:        block;
    pointer-events: none;  /* prevent SVG from consuming the click event */
}

.yf-social-copy {
    font-size:      11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--yf-grey-mid);
    margin:         0;
    font-family:    inherit;
}


/* ——————————————————————————————————————
   18. REDUCED MOTION — override everything
—————————————————————————————————————— */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
    }

    .yf-reveal {
        opacity:   1;
        transform: none;
    }
}


/* ——————————————————————————————————————
   19. MEMBER PAGE — reveal all hidden text columns
   Elementor's animate.css library applies visibility:hidden to
   .elementor-invisible columns while IntersectionObserver waits
   to fire the scroll-reveal. On /medlem/ (page ID 675) all five
   columns have the class, including the two that hold critical
   membership text:
     99331ed — heading + vision text + pricing
     269536d — sign-up form (WPForms)
   All five are listed so no column is ever stuck invisible,
   regardless of JS timing or observer threshold edge cases.
   visibility:visible lets content render immediately; the
   animate.css entrance animation still plays once Elementor
   removes .elementor-invisible on scroll.
—————————————————————————————————————— */
.elementor-675 .elementor-element-5a42d7c,
.elementor-675 .elementor-element-d39cf9d,
.elementor-675 .elementor-element-99331ed,
.elementor-675 .elementor-element-269536d,
.elementor-675 .elementor-element-cd86ad7 {
    visibility: visible !important;
}


/* ——————————————————————————————————————
   20. MOBILE MENU
   Layers theme off-canvas drawer — YF brand edition.
   Drawer:  #off-canvas-right (.open toggled by Layers JS)
   Trigger: a.responsive-nav  (span.l-menu = hamburger bars)
   Close:   a.close-canvas
   JS companion (snippet "YF Mobile Menu", priority 25) adds:
     .yf-nav-backdrop  — blurred full-screen overlay
     .yf-burger-open   — on trigger → X morph
     body.yf-nav-open  — iOS-safe scroll lock
   Hover transforms restricted to pointer:fine (same guard
   as buttons, section 5) to prevent iOS ghost-click.
   Visible ≤ 768 px (Layers breakpoint 7).
—————————————————————————————————————— */

/* ─── Scroll-lock body class (position:fixed set inline by JS) ─── */
body.yf-nav-open {
    overflow: hidden;
}

/* ─── Backdrop ──────────────────────────────────────────────────── */
.yf-nav-backdrop {
    position:   fixed;
    inset:      0;
    z-index:    8998;
    background: rgba(17, 17, 19, 0.50);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter:         blur(4px);
    opacity:    0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity    var(--dur-base) var(--ease-smooth),
        visibility var(--dur-base) step-end;
}

.yf-nav-backdrop.is-open {
    opacity:    1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity    var(--dur-base) var(--ease-smooth),
        visibility var(--dur-base) step-start;
}

/* ─── Drawer panel ──────────────────────────────────────────────── */
#off-canvas-right {
    position:    fixed  !important;
    top:         0      !important;
    right:       0      !important;
    bottom:      0      !important;
    left:        auto   !important;
    width:       min(320px, 85vw) !important;
    height:      100dvh !important;
    z-index:     9000   !important;
    background:  var(--yf-background, #f7f3e7) !important;
    border-left: 3px solid var(--yf-accent-primary, #f3b12a) !important;
    border-top:  none   !important;
    box-shadow:  -6px 0 40px rgba(17, 17, 19, 0.18) !important;
    transform:   translateX(105%);
    transition:  transform var(--dur-base) var(--ease-expo) !important;
    will-change: transform;
    overflow-y:  auto;
    overflow-x:  hidden;
    -webkit-overflow-scrolling: touch;
    display:        flex        !important;
    flex-direction: column      !important;
    padding:        0           !important;
}

#off-canvas-right.open {
    transform: translateX(0) !important;
}

/* ─── Inner content wrapper ─────────────────────────────────────── */
#off-canvas-right .content.nav-mobile {
    flex:           1;
    display:        flex;
    flex-direction: column;
    margin:         0 !important;
    padding:        0 0 32px !important;
}

/* ─── Close button hidden — backdrop/swipe closes menu ─────────── */
a.close-canvas {
    display: none !important;
}

/* ─── Nav list ──────────────────────────────────────────────────── */
#off-canvas-right .nav.nav-vertical {
    padding: 4px 0 24px;
}

#off-canvas-right ul.menu {
    list-style: none !important;
    margin:     0    !important;
    padding:    0    !important;
}

#off-canvas-right ul.menu > li.menu-item {
    margin:        0 !important;
    padding:       0 !important;
    border-bottom: 1px solid rgba(47, 47, 45, 0.07);
    opacity:       0;
    transform:     translateX(16px);
    transition:
        opacity   var(--dur-base) var(--ease-expo),
        transform var(--dur-base) var(--ease-expo);
}

/* Stagger entrance delays (5 items) */
#off-canvas-right ul.menu > li:nth-child(1) { transition-delay: 0.10s; }
#off-canvas-right ul.menu > li:nth-child(2) { transition-delay: 0.16s; }
#off-canvas-right ul.menu > li:nth-child(3) { transition-delay: 0.22s; }
#off-canvas-right ul.menu > li:nth-child(4) { transition-delay: 0.28s; }
#off-canvas-right ul.menu > li:nth-child(5) { transition-delay: 0.34s; }

/* Reveal when drawer is open */
#off-canvas-right.open ul.menu > li.menu-item {
    opacity:   1;
    transform: translateX(0);
}

/* Kill delays when closing so items snap out cleanly */
#off-canvas-right:not(.open) ul.menu > li.menu-item {
    transition-delay: 0s !important;
}

/* ─── Nav link items ─────────────────────────────────────────────── */
#off-canvas-right ul.menu > li.menu-item > a {
    display:        flex        !important;
    align-items:    center      !important;
    font-family:    'Josefin Sans', sans-serif !important;
    font-weight:    300         !important;
    min-height:     54px;
    padding:        0 24px      !important;
    font-size:      16px        !important;
    letter-spacing: -0.01em;
    color:          var(--yf-text-primary, #2f2f2d) !important;
    text-decoration: none       !important;
    border-left:    3px solid transparent;
    background:     transparent;
    transition:
        color        var(--dur-fast) var(--ease-expo),
        background   var(--dur-fast) var(--ease-expo),
        border-color var(--dur-fast) var(--ease-expo),
        padding-left var(--dur-fast) var(--ease-expo);
    touch-action:   manipulation;
    -webkit-tap-highlight-color: rgba(243, 177, 42, 0.08);
}

/* Current-page highlight */
#off-canvas-right ul.menu > li.current-menu-item > a,
#off-canvas-right ul.menu > li.current-page-ancestor > a {
    color:        var(--yf-accent-primary, #f3b12a) !important;
    border-color: var(--yf-accent-primary, #f3b12a) !important;
    background:   rgba(243, 177, 42, 0.06);
    font-weight:  700 !important;
}

/* Hover — pointer devices only */
@media (hover: hover) and (pointer: fine) {
    #off-canvas-right ul.menu > li.menu-item > a:hover {
        background:   rgba(243, 177, 42, 0.08);
        border-color: var(--yf-accent-primary, #f3b12a) !important;
        padding-left: 30px !important;
    }
}

/* Active — all devices */
#off-canvas-right ul.menu > li.menu-item > a:active {
    background:          rgba(243, 177, 42, 0.14);
    border-color:        var(--yf-accent-primary, #f3b12a) !important;
    transition-duration: var(--dur-instant);
}

/* ─── Hamburger trigger ──────────────────────────────────────────── */
a.responsive-nav {
    display:         inline-flex !important;
    align-items:     center;
    justify-content: center;
    min-width:       44px;
    min-height:      44px;
    padding:         0 10px;
    cursor:          pointer;
    touch-action:    manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ─── Three-bar icon (middle bar = element itself) ───────────────── */
span.l-menu {
    display:       block;
    position:      relative;
    width:         22px;
    height:        2px;
    background:    currentColor;
    border-radius: 2px;
    box-shadow:    none;
    transition:    background var(--dur-fast) var(--ease-expo);
}

span.l-menu::before,
span.l-menu::after {
    content:       '';
    display:       block;
    position:      absolute;
    left:          0;
    width:         100%;
    height:        2px;
    background:    currentColor;
    border-radius: 2px;
    transition:
        transform var(--dur-base) var(--ease-expo),
        top       var(--dur-base) var(--ease-expo),
        bottom    var(--dur-base) var(--ease-expo),
        opacity   var(--dur-fast) ease;
}

span.l-menu::before { top:    -7px; }
span.l-menu::after  { bottom: -7px; }

/* X morph — JS adds .yf-burger-open to a.responsive-nav */
a.responsive-nav.yf-burger-open span.l-menu         { background: transparent; }
a.responsive-nav.yf-burger-open span.l-menu::before { top:    0; transform: rotate(45deg);  }
a.responsive-nav.yf-burger-open span.l-menu::after  { bottom: 0; transform: rotate(-45deg); }

/* ─── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #off-canvas-right,
    .yf-nav-backdrop,
    #off-canvas-right ul.menu > li.menu-item,
    #off-canvas-right ul.menu > li.menu-item > a,
    span.l-menu,
    span.l-menu::before,
    span.l-menu::after,
    a.close-canvas {
        transition: none !important;
        animation:  none !important;
    }

    .yf-nav-backdrop { display: none; }
}
}