/*
Theme Name:  P-folio
Theme URI:   https://taqizaidi.com
Author:      Taqi Zaidi
Author URI:  https://taqizaidi.com
Description: P-folio — Professional portfolio theme for CAD/CAM/CAE specialists. Includes full brand system (colours, typography, spacing tokens) and a pixel-perfect floating glassmorphism header matching the original HTML design. Build your pages with Elementor or any page builder.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: p-folio
Tags:        portfolio, full-width-template, custom-colors, custom-logo, custom-menu, elementor
*/

/* ============================================================
   1. BRAND TOKENS
   All brand values live here as CSS custom properties.
   Change one value → updates everywhere.
   ============================================================ */
:root {

  /* ── Colour Palette ── */
  --pf-bg:         #faf8f5;   /* warm off-white page background  */
  --pf-bg2:        #f3f0eb;   /* slightly darker surface         */
  --pf-surface:    #ffffff;   /* pure white card surface         */
  --pf-ink:        #1c1a17;   /* primary text / dark background  */
  --pf-ink2:       #3a3630;   /* secondary heading text          */
  --pf-muted:      #7a7268;   /* body copy, labels, captions     */
  --pf-rule:       #e4dfd7;   /* borders, dividers, rules        */

  /* ── Accent — Signature Orange ── */
  --pf-orange:     #ff6b00;   /* primary accent                  */
  --pf-orange-lt:  #fff1e6;   /* light tint — backgrounds        */
  --pf-orange-md:  #ffb380;   /* medium tint — hover states      */
  --pf-orange-dk:  #cc4e00;   /* dark shade — hover on buttons   */

  /* ── Typography ── */
  --pf-font:       'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pf-size-base:  15px;
  --pf-lh-base:    1.75;

  /* Type scale */
  --pf-text-xs:    11px;
  --pf-text-sm:    13px;
  --pf-text-base:  15px;
  --pf-text-md:    17px;
  --pf-text-lg:    20px;
  --pf-text-xl:    clamp(1.9rem, 3.5vw, 2.9rem);
  --pf-text-2xl:   clamp(2.2rem, 5vw, 3.8rem);
  --pf-text-hero:  clamp(2.6rem, 4.5vw, 4rem);

  /* Font weights */
  --pf-fw-light:   300;
  --pf-fw-normal:  400;
  --pf-fw-medium:  500;
  --pf-fw-semi:    600;
  --pf-fw-bold:    700;
  --pf-fw-black:   800;
  --pf-fw-900:     900;

  /* ── Border Radius Scale ── */
  --pf-r-xs:   6px;
  --pf-r-sm:   10px;
  --pf-r-md:   16px;
  --pf-r-lg:   24px;
  --pf-r-xl:   32px;
  --pf-r-pill: 999px;

  /* ── Spacing Scale ── */
  --pf-space-1:  4px;
  --pf-space-2:  8px;
  --pf-space-3:  12px;
  --pf-space-4:  16px;
  --pf-space-5:  24px;
  --pf-space-6:  32px;
  --pf-space-7:  48px;
  --pf-space-8:  64px;
  --pf-space-9:  96px;

  /* ── Layout ── */
  --pf-max-width:      1100px;
  --pf-section-pad-x:  3rem;
  --pf-section-pad-y:  6rem;

  /* ── Shadows ── */
  --pf-shadow-sm:  0 2px 8px rgba(28,26,23,.06);
  --pf-shadow-md:  0 4px 20px rgba(28,26,23,.08);
  --pf-shadow-lg:  0 12px 40px rgba(28,26,23,.10);
  --pf-shadow-xl:  0 24px 64px rgba(28,26,23,.12);
  --pf-shadow-orange-sm: 0 6px 20px rgba(255,107,0,.25);
  --pf-shadow-orange-lg: 0 12px 40px rgba(255,107,0,.30);

  /* ── Transitions ── */
  --pf-ease:        cubic-bezier(.16,1,.3,1);
  --pf-transition:  .25s var(--pf-ease);

  /* ── Z-index layers ── */
  --pf-z-base:    1;
  --pf-z-above:   10;
  --pf-z-nav:     200;
  --pf-z-overlay: 190;
  --pf-z-cursor:  9999;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background:    var(--pf-bg);
  color:         var(--pf-ink);
  font-family:   var(--pf-font);
  font-size:     var(--pf-size-base);
  line-height:   var(--pf-lh-base);
  overflow-x:    hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Push content below fixed nav */
body.pf-has-nav {
  padding-top: 0; /* nav is floating, doesn't push content */
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: var(--pf-orange);
  text-decoration: none;
  transition: color var(--pf-transition);
}

a:hover { color: var(--pf-orange-dk); }

/* ============================================================
   3. TYPOGRAPHY — Utility Classes
   ============================================================ */

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--pf-font);
  font-weight:    var(--pf-fw-black);
  line-height:    1.1;
  letter-spacing: -0.025em;
  color:          var(--pf-ink);
}

h1 { font-size: var(--pf-text-hero); }
h2 { font-size: var(--pf-text-xl); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: .9rem; }

/* Accent text in headings */
h1 em, h2 em, h3 em {
  font-style: normal;
  color: var(--pf-orange);
}

/* Hero title underline accent */
.pf-title-underline em::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 0; right: 0;
  height: 4px;
  background: var(--pf-orange-lt);
  border-radius: 2px;
  z-index: -1;
}

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ── Eyebrow label ── */
.pf-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            .5rem;
  background:     var(--pf-orange-lt);
  color:          var(--pf-orange-dk);
  font-size:      var(--pf-text-xs);
  font-weight:    var(--pf-fw-semi);
  padding:        .35rem .9rem;
  border-radius:  var(--pf-r-pill);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom:  1.2rem;
}

.pf-eyebrow-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--pf-orange);
  flex-shrink:   0;
}

/* Dark background eyebrow */
.pf-eyebrow-dark {
  background: rgba(255,107,0,.15);
  border:     1px solid rgba(255,107,0,.25);
  color:      var(--pf-orange-md);
}

/* ── Section labels ── */
.pf-sec-title {
  font-weight:    var(--pf-fw-black);
  font-size:      var(--pf-text-xl);
  line-height:    1.1;
  letter-spacing: -.025em;
  color:          var(--pf-ink);
  margin-bottom:  .6rem;
}

.pf-sec-sub {
  font-size:   var(--pf-text-base);
  color:       var(--pf-muted);
  line-height: 1.85;
  max-width:   520px;
}

/* ── Muted / caption text ── */
.pf-text-muted   { color: var(--pf-muted); }
.pf-text-orange  { color: var(--pf-orange); }
.pf-text-white   { color: #fff; }
.pf-text-sm      { font-size: var(--pf-text-sm); }
.pf-text-xs      { font-size: var(--pf-text-xs); }

/* ── Tag / pill label ── */
.pf-tag {
  display:        inline-block;
  font-size:      var(--pf-text-xs);
  font-weight:    var(--pf-fw-semi);
  color:          var(--pf-orange-dk);
  background:     var(--pf-orange-lt);
  padding:        .3rem .8rem;
  border-radius:  var(--pf-r-pill);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ============================================================
   4. BUTTONS — Utility Classes
   ============================================================ */

.pf-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            .5rem;
  font-family:    var(--pf-font);
  font-size:      14px;
  font-weight:    var(--pf-fw-semi);
  letter-spacing: .01em;
  text-decoration: none;
  border:         none;
  cursor:         pointer;
  transition:     background var(--pf-transition),
                  transform var(--pf-transition),
                  box-shadow var(--pf-transition);
  white-space:    nowrap;
}

.pf-btn-primary {
  background:    var(--pf-orange);
  color:         #fff !important;
  padding:       .85rem 2rem;
  border-radius: var(--pf-r-pill);
}
.pf-btn-primary:hover {
  background:  var(--pf-orange-dk);
  color:       #fff !important;
  transform:   translateY(-2px);
  box-shadow:  var(--pf-shadow-orange-lg);
}

.pf-btn-secondary {
  background:    var(--pf-surface);
  color:         var(--pf-ink) !important;
  border:        1.5px solid var(--pf-rule);
  padding:       .85rem 1.8rem;
  border-radius: var(--pf-r-pill);
}
.pf-btn-secondary:hover {
  border-color: var(--pf-orange-md);
  background:   var(--pf-orange-lt);
  transform:    translateY(-1px);
}

.pf-btn-outline {
  background:    transparent;
  color:         var(--pf-orange) !important;
  border:        2px solid var(--pf-orange);
  padding:       .85rem 2rem;
  border-radius: var(--pf-r-pill);
}
.pf-btn-outline:hover {
  background:  var(--pf-orange);
  color:       #fff !important;
  transform:   translateY(-2px);
  box-shadow:  var(--pf-shadow-orange-sm);
}

/* Small CTA — used in nav */
.pf-btn-nav {
  display:        inline-flex;
  align-items:    center;
  gap:            .4rem;
  background:     var(--pf-orange);
  color:          #fff !important;
  font-size:      var(--pf-text-sm);
  font-weight:    var(--pf-fw-semi);
  letter-spacing: .01em;
  text-decoration: none;
  padding:        .5rem 1.3rem;
  border-radius:  var(--pf-r-pill);
  transition:     background var(--pf-transition),
                  transform var(--pf-transition),
                  box-shadow var(--pf-transition);
  white-space:    nowrap;
}
.pf-btn-nav:hover {
  background:  var(--pf-orange-dk);
  transform:   translateY(-1px);
  box-shadow:  0 6px 20px rgba(255,107,0,.30);
}

/* ============================================================
   5. LAYOUT UTILITIES
   ============================================================ */

.pf-container {
  max-width:   var(--pf-max-width);
  margin:      0 auto;
  padding-left:  var(--pf-section-pad-x);
  padding-right: var(--pf-section-pad-x);
}

.pf-section {
  padding-top:    var(--pf-section-pad-y);
  padding-bottom: var(--pf-section-pad-y);
}

/* ── Glass card ── */
.pf-glass {
  background:             rgba(255,255,255,.65);
  backdrop-filter:        blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border:                 1px solid rgba(255,255,255,.88);
  box-shadow:             0 2px 20px rgba(28,26,23,.06),
                          inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── Scroll reveal ── */
.pf-rev {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity .75s var(--pf-ease),
              transform .75s var(--pf-ease);
}
.pf-rev.pf-on {
  opacity:   1;
  transform: none;
}

/* ============================================================
   6. CUSTOM CURSOR
   Desktop only — hidden on touch devices
   ============================================================ */

.pf-cur-dot {
  width:          8px;
  height:         8px;
  background:     var(--pf-orange);
  border-radius:  50%;
  position:       fixed;
  top:            0; left: 0;
  pointer-events: none;
  z-index:        var(--pf-z-cursor);
  transition:     transform .12s ease, opacity .2s;
  will-change:    transform;
}

.pf-cur-ring {
  width:          34px;
  height:         34px;
  border:         2px solid var(--pf-orange-md);
  border-radius:  50%;
  position:       fixed;
  top:            0; left: 0;
  pointer-events: none;
  z-index:        calc(var(--pf-z-cursor) - 1);
  opacity:        .5;
  transition:     border-color .2s, opacity .2s;
  will-change:    transform;
}

/* On touch/mobile — hide cursor entirely */
@media (hover: none) and (pointer: coarse) {
  .pf-cur-dot,
  .pf-cur-ring { display: none !important; }
}

/* ============================================================
   7. FLOATING NAVIGATION
   Pixel-perfect match to original HTML design
   ============================================================ */

/* ── Nav wrapper ── */
#pf-nav {
  position:   fixed;
  top:        14px;
  left:       50%;
  transform:  translateX(-50%);
  z-index:    var(--pf-z-nav);
  width:      calc(100% - 3rem);
  max-width:  var(--pf-max-width);
  display:    flex;
  align-items: center;
  justify-content: space-between;

  /* Glass pill */
  padding:        .85rem 1.6rem;
  border-radius:  var(--pf-r-xl);
  background:     rgba(250,248,245,.62);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border:         1px solid rgba(255,255,255,.75);
  box-shadow:     0 4px 32px rgba(28,26,23,.07),
                  inset 0 1px 0 rgba(255,255,255,.90);

  transition: background .4s, box-shadow .4s;
}

/* Scrolled state — slightly more opaque */
#pf-nav.pf-nav-scrolled {
  background: rgba(250,248,245,.90);
  box-shadow: 0 8px 40px rgba(28,26,23,.10),
              inset 0 1px 0 rgba(255,255,255,.90);
}

/* ── Logo ── */
.pf-nav-logo {
  font-weight:    var(--pf-fw-bold);
  font-size:      1.15rem;
  color:          var(--pf-ink) !important;
  text-decoration: none;
  letter-spacing: -.02em;
  display:        flex;
  align-items:    center;
  gap:            .4rem;
  flex-shrink:    0;
  transition:     opacity var(--pf-transition);
}
.pf-nav-logo:hover { opacity: .8; }

.pf-nav-logo img {
  height:      38px;
  width:       auto;
  object-fit:  contain;
  display:     block;
}

.pf-nav-logo-dot {
  width:        8px;
  height:       8px;
  background:   var(--pf-orange);
  border-radius: 50%;
  flex-shrink:  0;
}

/* ── Desktop nav links (WordPress menu) ── */
.pf-nav-menu {
  display:   flex;
  gap:       .25rem;
  list-style: none;
  margin:    0;
  padding:   0;
}

.pf-nav-menu li { position: relative; }

.pf-nav-menu li a {
  font-size:      var(--pf-text-sm);
  font-weight:    var(--pf-fw-medium);
  color:          var(--pf-muted) !important;
  text-decoration: none;
  padding:        .4rem .85rem;
  border-radius:  var(--pf-r-pill);
  display:        block;
  transition:     color var(--pf-transition), background var(--pf-transition);
  white-space:    nowrap;
}

.pf-nav-menu li a:hover,
.pf-nav-menu li.current-menu-item > a,
.pf-nav-menu li.current_page_item > a,
.pf-nav-menu li.current-menu-ancestor > a {
  color:      var(--pf-ink) !important;
  background: var(--pf-bg2);
}

/* Hide dropdowns — not in original design */
.pf-nav-menu ul { display: none !important; }

/* ── Hamburger button ── */
.pf-hamburger {
  display:         none;
  flex-direction:  column;
  gap:             5px;
  background:      none;
  border:          none;
  padding:         6px;
  cursor:          pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action:    manipulation;
}
.pf-hamburger span {
  display:       block;
  width:         22px;
  height:        2px;
  background:    var(--pf-ink);
  border-radius: 2px;
  transition:    transform .3s var(--pf-ease), opacity .2s;
}

/* Hamburger → X when open */
.pf-hamburger.pf-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pf-hamburger.pf-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.pf-hamburger.pf-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile overlay ── */
#pf-mob-nav {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(250,248,245,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index:         var(--pf-z-overlay);
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             .25rem;
}
#pf-mob-nav.pf-mob-open { display: flex; }

/* Close button */
.pf-mob-close {
  position:     absolute;
  top:          1.5rem;
  right:        2rem;
  background:   none;
  border:       none;
  font-size:    1.8rem;
  color:        var(--pf-muted);
  cursor:       pointer;
  z-index:      300;
  width:        44px;
  height:       44px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  transition:   background var(--pf-transition), color var(--pf-transition);
}
.pf-mob-close:hover { background: rgba(0,0,0,.06); color: var(--pf-ink); }

/* Mobile links — WordPress menu */
#pf-mob-nav ul.menu {
  list-style:    none;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           .5rem;
  margin:        0;
  padding:       0;
  width:         100%;
}
#pf-mob-nav ul.menu li a {
  font-size:      2rem;
  font-weight:    var(--pf-fw-bold);
  color:          var(--pf-ink) !important;
  text-decoration: none;
  transition:     color var(--pf-transition);
  padding:        .5rem 2rem;
  display:        block;
  text-align:     center;
  -webkit-tap-highlight-color: transparent;
  touch-action:   manipulation;
}
#pf-mob-nav ul.menu li a:hover { color: var(--pf-orange) !important; }
#pf-mob-nav ul.menu ul { display: none !important; }

/* Mobile CTA */
.pf-mob-cta-wrap {
  margin-top: 1rem;
}

/* ── Nav responsive breakpoints ── */
@media (max-width: 960px) {
  #pf-nav {
    width:   calc(100% - 2rem);
    padding: .8rem 1.2rem;
  }

  .pf-nav-menu,
  .pf-nav-cta-wrap { display: none; }

  .pf-hamburger { display: flex; }
}

@media (max-width: 600px) {
  #pf-nav { top: 10px; }
}

/* ============================================================
   8. PAGE WRAPPER
   Ensures content below fixed nav renders correctly
   ============================================================ */

.pf-page-wrap {
  /* No padding-top — nav floats and doesn't displace content */
  min-height: 100vh;
}

/* ============================================================
   9. ELEMENTOR INTEGRATION
   Make full-width sections work correctly
   ============================================================ */

.elementor-section.elementor-section-stretched {
  left:  0 !important;
  width: 100% !important;
}

/* Elementor canvas page — no extra padding */
.elementor-page .pf-page-wrap {
  padding-top: 0;
}

/* ============================================================
   10. WORDPRESS CORE OVERRIDES
   Minimal resets for WP-generated content
   ============================================================ */

/* Admin bar offset for nav */
.admin-bar #pf-nav {
  top: calc(32px + 14px);
}
@media screen and (max-width: 782px) {
  .admin-bar #pf-nav {
    top: calc(46px + 10px);
  }
}

/* WordPress alignment classes */
.alignleft  { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.aligncenter { margin: 0 auto; display: block; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--pf-text-sm); color: var(--pf-muted); }

/* Screen reader text */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px;
  word-wrap: normal;
}

/* ============================================================
   BOTTOM DRAWER — Native App-Style Mobile Navigation
   Replaces the fullscreen overlay with a spring-animated
   sheet that rises from the bottom of the screen.
   ============================================================ */

/* ── Backdrop scrim ── */
#pf-drawer-backdrop {
  position:         fixed;
  inset:            0;
  background:       rgba(15, 12, 8, 0);   /* starts transparent */
  z-index:          180;
  pointer-events:   none;
  transition:       background 0.38s cubic-bezier(.32,0,.67,0);
  -webkit-tap-highlight-color: transparent;
}

#pf-drawer-backdrop.pf-drawer-open {
  background:     rgba(15, 12, 8, 0.55);
  pointer-events: all;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── Drawer sheet ── */
#pf-drawer {
  position:       fixed;
  left:           0;
  right:          0;
  bottom:         0;
  z-index:        200;

  /* Rounded top corners — native sheet feel */
  border-radius:  28px 28px 0 0;

  /* Material */
  background:     #ffffff;
  box-shadow:     0 -8px 40px rgba(28,26,23,.14),
                  0 -2px 0 rgba(28,26,23,.04);

  /* Start fully off-screen below viewport */
  transform:      translateY(100%);
  transition:     transform 0.42s cubic-bezier(.32,0,.2,1); /* spring-ish */
  will-change:    transform;

  /* Limit height — feels native, not fullscreen */
  max-height:     88vh;
  display:        flex;
  flex-direction: column;

  /* Only active on mobile */
  display:        none;
}

/* Open state */
#pf-drawer.pf-drawer-open {
  transform: translateY(0);
}

/* Dragging state — instant follow, no transition */
#pf-drawer.pf-drawer-dragging {
  transition: none;
}

/* ── Drag handle ── */
.pf-drawer-handle {
  flex-shrink:    0;
  display:        flex;
  align-items:    center;
  justify-content: center;
  padding:        14px 0 6px;
  cursor:         grab;
  touch-action:   none; /* prevent scroll on handle */
  -webkit-tap-highlight-color: transparent;
}

.pf-drawer-handle:active { cursor: grabbing; }

.pf-drawer-handle-pill {
  width:         40px;
  height:        4px;
  background:    #e4dfd7;
  border-radius: 99px;
  display:       block;
  transition:    background 0.2s, width 0.2s;
}

/* Pill grows slightly when dragging */
#pf-drawer.pf-drawer-dragging .pf-drawer-handle-pill {
  width:      52px;
  background: #ffb380;
}

/* ── Scrollable inner ── */
.pf-drawer-inner {
  flex:           1;
  overflow-y:     auto;
  overflow-x:     hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* Subtle scroll shadow at top when scrolled */
  background:
    linear-gradient(white 30%, rgba(255,255,255,0)) center top,
    linear-gradient(rgba(255,255,255,0), white 70%) center bottom,
    radial-gradient(farthest-side at 50% 0%, rgba(28,26,23,.08), rgba(0,0,0,0)) center top,
    radial-gradient(farthest-side at 50% 100%, rgba(28,26,23,.06), rgba(0,0,0,0)) center bottom;
  background-repeat: no-repeat;
  background-size: 100% 48px, 100% 48px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}

/* ── Drawer header row ── */
.pf-drawer-header {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        12px 24px 8px;
  flex-shrink:    0;
}

.pf-drawer-logo {
  font-weight:    700;
  font-size:      1.1rem;
  color:          var(--pf-ink) !important;
  text-decoration: none;
  display:        flex;
  align-items:    center;
  gap:            .4rem;
  letter-spacing: -.02em;
}

.pf-drawer-logo img {
  height:   34px;
  width:    auto;
  display:  block;
}

.pf-drawer-close {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  border:        none;
  background:    #f3f0eb;
  color:         var(--pf-ink);
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  flex-shrink:   0;
  transition:    background 0.18s, transform 0.18s;
  -webkit-tap-highlight-color: transparent;
}

.pf-drawer-close:hover,
.pf-drawer-close:focus-visible {
  background:  var(--pf-orange-lt);
  color:       var(--pf-orange);
  transform:   scale(1.08);
  outline:     none;
}

.pf-drawer-close:active { transform: scale(0.94); }

/* ── Nav links ── */
.pf-drawer-nav {
  padding: 8px 16px 4px;
}

.pf-drawer-menu {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        2px;
}

.pf-drawer-menu li a {
  display:        flex;
  align-items:    center;
  gap:            14px;
  padding:        16px 12px;
  border-radius:  16px;
  font-size:      1.05rem;
  font-weight:    600;
  color:          var(--pf-ink) !important;
  text-decoration: none;
  letter-spacing: -.01em;
  transition:     background 0.16s, color 0.16s, transform 0.16s;
  -webkit-tap-highlight-color: transparent;
  touch-action:   manipulation;
  position:       relative;
  overflow:       hidden;
}

/* Tap ripple effect */
.pf-drawer-menu li a::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     var(--pf-orange-lt);
  opacity:        0;
  transition:     opacity 0.16s;
  border-radius:  inherit;
}
.pf-drawer-menu li a:active::before { opacity: 1; }

/* Accent left dot */
.pf-drawer-menu li a::after {
  content:       '';
  position:      absolute;
  left:          0;
  top:           50%;
  transform:     translateY(-50%) scaleY(0);
  width:         3px;
  height:        28px;
  background:    var(--pf-orange);
  border-radius: 0 3px 3px 0;
  transition:    transform 0.2s cubic-bezier(.16,1,.3,1);
}

.pf-drawer-menu li a:hover,
.pf-drawer-menu li a:focus-visible {
  background: var(--pf-bg2);
  color:      var(--pf-ink) !important;
  transform:  translateX(2px);
  outline:    none;
}

.pf-drawer-menu li a:hover::after,
.pf-drawer-menu li a:focus-visible::after {
  transform: translateY(-50%) scaleY(1);
}

.pf-drawer-menu li.current-menu-item > a,
.pf-drawer-menu li.current_page_item > a {
  background: var(--pf-orange-lt);
  color:      var(--pf-orange-dk) !important;
}

.pf-drawer-menu li.current-menu-item > a::after,
.pf-drawer-menu li.current_page_item > a::after {
  transform:  translateY(-50%) scaleY(1);
  background: var(--pf-orange);
}

/* No sub-menus in drawer */
.pf-drawer-menu ul { display: none !important; }

/* ── Divider before CTA ── */
.pf-drawer-cta {
  padding:      20px 24px 4px;
  border-top:   1px solid var(--pf-rule);
  margin-top:   8px;
}

.pf-drawer-cta .pf-btn-nav {
  /* Full-width in drawer */
  display:         flex !important;
  justify-content: center;
  width:           100%;
  padding:         .9rem 1.5rem;
  font-size:       15px;
  border-radius:   16px;
}

/* ── Safe area — iPhone home indicator ── */
.pf-drawer-safe-area {
  height: max(env(safe-area-inset-bottom), 16px);
  flex-shrink: 0;
}

/* ── Show drawer only on mobile ── */
@media (max-width: 960px) {
  #pf-drawer { display: flex; }
}

/* Desktop: drawer hidden entirely, old overlay removed */
@media (min-width: 961px) {
  #pf-drawer,
  #pf-drawer-backdrop { display: none !important; }
}

/* Dark mode drawer */
@media (prefers-color-scheme: dark) {
  #pf-drawer {
    background: #1c1a17;
    box-shadow: 0 -8px 40px rgba(0,0,0,.45), 0 -2px 0 rgba(255,255,255,.04);
  }
  .pf-drawer-handle-pill       { background: rgba(255,255,255,.12); }
  .pf-drawer-close             { background: rgba(255,255,255,.08); color: #fff; }
  .pf-drawer-close:hover       { background: rgba(255,107,0,.15); color: var(--pf-orange); }
  .pf-drawer-logo              { color: #fff !important; }
  .pf-drawer-menu li a         { color: rgba(255,255,255,.85) !important; }
  .pf-drawer-menu li a:hover   { background: rgba(255,255,255,.06); color: #fff !important; }
  .pf-drawer-menu li a::before { background: rgba(255,107,0,.12); }
  .pf-drawer-cta               { border-top-color: rgba(255,255,255,.08); }
  .pf-drawer-inner {
    background:
      linear-gradient(#1c1a17 30%, rgba(28,26,23,0)) center top,
      linear-gradient(rgba(28,26,23,0), #1c1a17 70%) center bottom,
      radial-gradient(farthest-side at 50% 0%, rgba(255,255,255,.06), rgba(0,0,0,0)) center top,
      radial-gradient(farthest-side at 50% 100%, rgba(255,255,255,.04), rgba(0,0,0,0)) center bottom;
    background-repeat: no-repeat;
    background-size: 100% 48px, 100% 48px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
  }
}