/*
 * main.css — Natoya Goule Theme
 * Full design system: variables, layout, header, nav, footer, utilities
 * Page-specific styles live in page templates via inline or template CSS
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Brand colours */
    --ng-peach:      #FF775E;
    --ng-gold:       #DB6923;
    --ng-gold-light: #C9935A;
    --ng-black:      #080808;
    --ng-dark:       #0f0f0f;
    --ng-dark2:      #161616;
    --ng-dark3:      #1e1e1e;
    --ng-white:      #F5F0EA;
    --ng-muted:      rgba(245, 240, 234, 0.55);
    --ng-faint:      rgba(245, 240, 234, 0.18);
    --ng-rule:       rgba(255, 119, 94, 0.15);

    /* Brand fonts */
    --ng-head: 'Josefin Sans', sans-serif;
    --ng-body: 'Libre Franklin', sans-serif;

    /* Type scale — fluid, readable on all screens including 27"+ */
    --ng-hero:   clamp(72px,  11vw, 180px);
    --ng-h1:     clamp(52px,  7vw,  110px);
    --ng-h2:     clamp(36px,  5vw,  72px);
    --ng-h3:     clamp(24px,  3vw,  40px);
    --ng-h4:     clamp(20px,  2vw,  28px);
    --ng-body:   clamp(16px,  1.2vw, 20px);
    --ng-body-s: clamp(15px,  1vw,  17px);
    --ng-label:  clamp(11px,  0.8vw, 13px);
    --ng-micro:  clamp(10px,  0.7vw, 12px);

    /* Spacing */
    --ng-section: clamp(80px, 10vw, 140px);
    --ng-gutter:  clamp(24px, 5vw,  80px);
    --ng-col-gap: clamp(40px, 6vw,  120px);

    /* Nav height */
    --ng-nav-h:       88px;
    --ng-nav-h-stuck: 64px;

    /* Transitions */
    --ng-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; font-size: 16px; }

body {
    background:   var(--ng-black);
    color:        var(--ng-white);
    font-family:  var(--ng-body);
    font-size:    var(--ng-body);
    font-weight:  300;
    line-height:  1.75;
    overflow-x:   hidden;
    cursor:       none;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: var(--ng-head); cursor: none; }

/* Headings base */
h1, h2, h3, h4, h5, h6 {
    font-family:    var(--ng-head);
    font-weight:    700;
    line-height:    0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color:          var(--ng-white);
}
h1 { font-size: var(--ng-h1); }
h2 { font-size: var(--ng-h2); }
h3 { font-size: var(--ng-h3); }
h4 { font-size: var(--ng-h4); }

p { font-size: var(--ng-body); line-height: 1.8; font-weight: 300; }
p + p { margin-top: 18px; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
#ng-cur {
    position:       fixed;
    width:          8px;
    height:         8px;
    background:     var(--ng-peach);
    border-radius:  50%;
    pointer-events: none;
    z-index:        9995;
    transform:      translate(-50%, -50%);
    transition:     width .2s var(--ng-ease), height .2s var(--ng-ease), background .2s;
    mix-blend-mode: screen;
}
#ng-cur-r {
    position:       fixed;
    width:          44px;
    height:         44px;
    border:         1px solid rgba(255, 119, 94, 0.38);
    border-radius:  50%;
    pointer-events: none;
    z-index:        9994;
    transform:      translate(-50%, -50%);
    transition:     width .4s var(--ng-ease), height .4s var(--ng-ease), border-color .3s;
    will-change:    left, top;
}
body:has(a:hover)         #ng-cur-r,
body:has(button:hover)    #ng-cur-r,
body:has(.ng-hover:hover) #ng-cur-r {
    width:        72px;
    height:       72px;
    border-color: var(--ng-peach);
}

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
#ng-progress {
    position:       fixed;
    top:            0;
    left:           0;
    height:         2px;
    width:          0;
    background:     linear-gradient(to right, var(--ng-peach), var(--ng-gold));
    z-index:        9980;
    transition:     width .08s linear;
    pointer-events: none;
}

/* ============================================================
   HEADER & NAV
   ============================================================ */
.ng-header {
    position:       fixed;
    top:            0;
    left:           0;
    right:          0;
    z-index:        500;
    pointer-events: none;
}

.ng-nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px var(--ng-gutter);
    height:          auto;
    min-height:      var(--ng-nav-h);
    pointer-events:  all;
    transition:      padding .45s var(--ng-ease),
                     background .45s ease,
                     border-color .45s ease;
}

/* Stuck state — triggered by JS when user scrolls */
.ng-nav.is-stuck {
    padding:                 20px var(--ng-gutter);
    min-height:              var(--ng-nav-h-stuck);
    background:              rgba(8, 8, 8, 0.92);
    backdrop-filter:         blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-bottom:           1px solid var(--ng-rule);
}

/* ── Logo wrapper ── */
.ng-nav-logo {
    display:         flex;
    align-items:     center;
    text-decoration: none;
    padding-right:   20px;
    transition:      opacity .3s;
    flex-shrink:     0;
}
.ng-nav-logo:hover { opacity: 0.8; }

/*
 * LOGO IMAGE SIZE FIX
 * WordPress hardcodes width/height HTML attributes on <img> (e.g. width="987" height="516")
 * which override CSS height-based rules. The correct fix is:
 *   - Use max-width + width with !important to override both HTML attributes and WP styles
 *   - Set height: auto !important so the image scales proportionally
 *   - Target both .custom-logo and img.custom-logo for maximum specificity
 */
.ng-nav-logo .custom-logo,
.ng-nav-logo img.custom-logo,
.ng-nav-logo a img,
.ng-header .custom-logo {
    max-width:  185px !important;
    width:      185px !important;
    height:     auto !important;
    min-height: unset !important;
    filter:     brightness(0) invert(1);
    display:    block;
    object-fit: contain;
    transition: max-width .4s var(--ng-ease), width .4s var(--ng-ease);
}

/* Slightly smaller when nav is stuck (scrolled) */
.ng-nav.is-stuck .ng-nav-logo .custom-logo,
.ng-nav.is-stuck .ng-nav-logo img.custom-logo,
.ng-nav.is-stuck .ng-nav-logo a img,
.ng-nav.is-stuck .ng-header .custom-logo {
    max-width: 150px !important;
    width:     150px !important;
}

/* Text fallback — shown when no custom logo uploaded in WP */
.ng-nav-logo-text {
    font-family:    var(--ng-head);
    font-size:      var(--ng-label);
    font-weight:    700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color:          var(--ng-white);
}
.ng-logo-accent { color: var(--ng-peach); }

/* ── Primary nav links ── */
.ng-nav-menu-wrap {
    flex:            1;
    display:         flex;
    justify-content: center;
}

.ng-nav-links {
    display:    flex;
    gap:        clamp(24px, 3.5vw, 52px);
    list-style: none;
    margin:     0;
    padding:    0;
}

.ng-nav-item > a {
    font-family:     var(--ng-head);
    font-size:       var(--ng-micro);
    letter-spacing:  4px;
    text-transform:  uppercase;
    color:           var(--ng-muted);
    text-decoration: none;
    transition:      color .3s;
    position:        relative;
    padding-bottom:  4px;
}
.ng-nav-item > a::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    width:      0;
    height:     1px;
    background: var(--ng-peach);
    transition: width .35s var(--ng-ease);
}
.ng-nav-item > a:hover,
.ng-nav-item.current-menu-item > a { color: var(--ng-white); }
.ng-nav-item > a:hover::after,
.ng-nav-item.current-menu-item > a::after { width: 100%; }

/* ── CTA button ── */
.ng-nav-cta {
    font-family:     var(--ng-head);
    font-size:       16px;
    letter-spacing:  2px;
    text-transform:  uppercase;
    color:           var(--ng-black);
    background:      var(--ng-peach);
    padding:         14px 32px;
    text-decoration: none;
    transition:      background .3s, transform .3s;
    white-space:     nowrap;
    flex-shrink:     0;
	font-weight: 700;
}
li.ng-nav-item a {
    font-size: 16px;
    color: #fff !important;
    font-weight: 400;
}
.ng-nav-cta:hover {
    background: var(--ng-gold);
    transform:  translateY(-1px);
}

/* ── Hamburger button ── */
.ng-burger {
    display:        none;
    flex-direction: column;
    gap:            6px;
    background:     none;
    border:         none;
    padding:        6px;
    z-index:        10;
}
.ng-burger span {
    display:    block;
    width:      28px;
    height:     1px;
    background: var(--ng-white);
    transition: transform .35s var(--ng-ease), opacity .3s;
}
.ng-burger.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.ng-burger.is-open span:nth-child(2) { opacity: 0; }
.ng-burger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile drawer ── */
.ng-drawer {
    position:        fixed;
    inset:           0;
    z-index:         490;
    background:      var(--ng-black);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             36px;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity .45s ease;
}
.ng-drawer.is-open {
    opacity:        1;
    pointer-events: all;
}
.ng-drawer-close {
    position:        absolute;
    top:             28px;
    right:           28px;
    background:      none;
    border:          none;
    width:           40px;
    height:          40px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             8px;
}
.ng-drawer-close span {
    display:    block;
    width:      28px;
    height:     1px;
    background: var(--ng-white);
}
.ng-drawer-close span:first-child { transform: rotate(45deg) translate(0, 4.5px); }
.ng-drawer-close span:last-child  { transform: rotate(-45deg) translate(0, -4.5px); }

.ng-drawer-links {
    list-style:     none;
    text-align:     center;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            28px;
}
.ng-drawer-links .ng-nav-item a {
    font-family:     var(--ng-head);
    font-size:       clamp(28px, 7vw, 48px);
    letter-spacing:  4px;
    text-transform:  uppercase;
    color:           var(--ng-white);
    text-decoration: none;
    transition:      color .3s;
}
.ng-drawer-links .ng-nav-item a:hover { color: var(--ng-peach); }

.ng-drawer-overlay {
    position:       fixed;
    inset:          0;
    z-index:        489;
    background:     rgba(8, 8, 8, 0.6);
    opacity:        0;
    pointer-events: none;
    transition:     opacity .4s;
}
.ng-drawer-overlay.is-open {
    opacity:        1;
    pointer-events: all;
}

/* ============================================================
   FOOTER
   ============================================================ */
.ng-footer {
    background: var(--ng-dark);
    border-top: 1px solid rgba(255, 119, 94, 0.08);
}

.ng-footer-inner {
    display:               grid;
    grid-template-columns: 1fr auto auto;
    align-items:           start;
    gap:                   48px;
    padding:               clamp(60px, 8vw, 100px) var(--ng-gutter) clamp(40px, 5vw, 60px);
    max-width:             1440px;
    margin:                0 auto;
}

/* Footer logo */
.ng-footer-logo a { text-decoration: none; }

.ng-footer-logo .custom-logo,
.ng-footer-logo img.custom-logo {
    max-width:     160px !important;
    width:         160px !important;
    height:        auto !important;
    filter:        brightness(0) invert(1);
    margin-bottom: 18px;
    object-fit:    contain;
}

.ng-footer-logo-text {
    font-family:    var(--ng-head);
    font-size:      var(--ng-label);
    font-weight:    700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color:          var(--ng-white);
    display:        block;
    margin-bottom:  18px;
}
.ng-footer-tagline {
    font-family: var(--ng-body);
    font-size:   var(--ng-body-s);
    font-weight: 300;
    line-height: 1.7;
    color:       rgba(245, 240, 234, 0.35);
}

/* Footer nav */
.ng-footer-links {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin:         0;
    padding:        0;
}
.ng-footer-links .ng-nav-item a {
    font-family:     var(--ng-head);
    font-size:       var(--ng-label);
    letter-spacing:  3px;
    text-transform:  uppercase;
    color:           rgba(245, 240, 234, 0.3);
    text-decoration: none;
    transition:      color .3s;
}
.ng-footer-links .ng-nav-item a:hover { color: var(--ng-peach); }

/* Footer social */
.ng-footer-social {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    align-items:    flex-end;
}
.ng-social-link {
    font-family:     var(--ng-head);
    font-size:       var(--ng-label);
    letter-spacing:  3px;
    text-transform:  uppercase;
    color:           rgba(245, 240, 234, 0.25);
    text-decoration: none;
    transition:      color .3s;
}
.ng-social-link:hover { color: var(--ng-peach); }

/* Footer bottom bar */
.ng-footer-bottom {
    border-top:      1px solid rgba(255, 119, 94, 0.07);
    padding:         24px var(--ng-gutter);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    max-width:       1440px;
    margin:          0 auto;
    gap:             20px;
    flex-wrap:       wrap;
}
.ng-footer-copy,
.ng-footer-credit {
    font-family:    var(--ng-head);
    font-size:      var(--ng-micro);
    letter-spacing: 2px;
    color:          rgba(245, 240, 234, 0.18);
}
.ng-footer-credit a {
    color:           rgba(255, 119, 94, 0.4);
    text-decoration: none;
    transition:      color .3s;
}
.ng-footer-credit a:hover { color: var(--ng-peach); }

/* ============================================================
   UTILITIES — shared across all page templates
   ============================================================ */

.ng-section {
    padding:  var(--ng-section) var(--ng-gutter);
    position: relative;
    overflow: hidden;
}
.ng-section-inner {
    max-width: 1440px;
    margin:    0 auto;
}

.ng-eyebrow {
    display:        block;
    font-family:    var(--ng-head);
    font-size:      var(--ng-label);
    letter-spacing: 6px;
    text-transform: uppercase;
    color:          var(--ng-peach);
    margin-bottom:  20px;
}

.ng-rule {
    width:      48px;
    height:     1px;
    background: var(--ng-peach);
    margin:     32px 0;
}

.ng-grain {
    position:         absolute;
    inset:            0;
    opacity:          .028;
    pointer-events:   none;
    z-index:          1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size:  220px;
    animation:        ngGrainDrift .35s steps(1) infinite;
}
@keyframes ngGrainDrift {
    0%   { background-position: 0 0; }
    25%  { background-position: -60px 30px; }
    50%  { background-position: 40px -50px; }
    75%  { background-position: -30px 60px; }
}

/* Scroll reveal */
.ng-rv {
    opacity:    0;
    transform:  translateY(32px);
    transition: opacity .9s ease, transform .9s ease;
}
.ng-rv-l {
    opacity:    0;
    transform:  translateX(-32px);
    transition: opacity .9s ease, transform .9s ease;
}
.ng-rv-r {
    opacity:    0;
    transform:  translateX(32px);
    transition: opacity .9s ease, transform .9s ease;
}
.ng-rv.is-visible,
.ng-rv-l.is-visible,
.ng-rv-r.is-visible {
    opacity:   1;
    transform: translate(0);
}

/* Marquee */
.ng-marquee {
    overflow:      hidden;
    padding:       20px 0;
    background:    var(--ng-dark2);
    border-top:    1px solid var(--ng-rule);
    border-bottom: 1px solid var(--ng-rule);
}
.ng-marquee-track {
    display:     flex;
    white-space: nowrap;
    animation:   ngMarquee 24s linear infinite;
}
.ng-marquee-item {
    font-family:    var(--ng-head);
    font-size:      var(--ng-label);
    letter-spacing: 5px;
    text-transform: uppercase;
    color:          rgba(245, 240, 234, 0.65);
    padding:        0 52px;
    flex-shrink:    0;
}
.ng-marquee-item b {
    color:       rgba(255, 119, 94, 0.45);
    font-weight: 400;
}
@keyframes ngMarquee { to { transform: translateX(-50%); } }

/* ============================================================
   RESPONSIVE — TABLET (max 1100px)
   ============================================================ */
@media (max-width: 1100px) {
    .ng-footer-inner  { grid-template-columns: 1fr 1fr; }
    .ng-footer-social { align-items: flex-start; }
}

/* ============================================================
   RESPONSIVE — MOBILE (max 768px)
   ============================================================ */
@media (max-width: 768px) {
    .ng-nav-menu-wrap,
    .ng-nav-cta { display: none; }
    .ng-burger  { display: flex; }
    .ng-nav     { padding: 16px 24px; min-height: 64px; }

    .ng-nav-logo .custom-logo,
    .ng-nav-logo img.custom-logo,
    .ng-nav-logo a img {
        max-width: 140px !important;
        width:     140px !important;
    }

    .ng-footer-inner  { grid-template-columns: 1fr; gap: 48px; }
    .ng-footer-social { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 20px; }
    .ng-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (max 480px)
   ============================================================ */
@media (max-width: 480px) {
    .ng-nav { padding: 14px 20px; min-height: 56px; }

    .ng-nav-logo .custom-logo,
    .ng-nav-logo img.custom-logo,
    .ng-nav-logo a img {
        max-width: 120px !important;
        width:     120px !important;
    }
}

/* ============================================================
   WORDPRESS ADMIN BAR FIX
   ============================================================ */
.admin-bar .ng-header { top: 32px; }

@media screen and (max-width: 782px) {
    .admin-bar .ng-header { top: 46px; }
}