/* PairUp Shared Styles: Navigation, Footer, Vars */
:root {
    /* Colors */
    --apple-orange: rgb(231, 128, 36);
    --apple-orange-dark: rgb(207, 115, 32);
    --apple-orange-light: rgba(231, 128, 36, 0.1);
    --apple-white: #ffffff;
    --apple-black: #1d1d1f;
    --apple-gray: #6e6e73;
    --apple-light-gray: #f5f5f7;
    --apple-separator: rgba(0, 0, 0, 0.1);
    
    /* Typography */
    --apple-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    --font-size-base: 17px;
    --font-size-small: 12px;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-md: 15px;
    --font-size-lg: 19px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 48px;
    --font-size-4xl: 56px;
    
    /* Spacing */
    --spacing-xs: 6px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;
    --spacing-5xl: 60px;
    
    /* Layout */
    --nav-height: 48px;
    --nav-item-height: 28px;
    --nav-gap: 32px;
    --nav-gap-mobile: 16px;
    --nav-gap-small: 12px;
    --container-max-width: 1200px;
    --container-padding: 22px;
    --container-padding-mobile: 16px;
    
    /* Components */
    --logo-height: 40px;
    --logo-height-mobile: 36px;
    --dropdown-gap: 6px;
    --dropdown-padding: 20px;
    --dropdown-grid-gap: 18px 24px;
    --dropdown-grid-gap-mobile: 16px;
    --dropdown-link-padding: 8px 0;
    --dropdown-buffer-height: 10px;
    --button-padding: 0 16px;
    --button-padding-mobile: 0 14px;
    
    /* Cards */
    --card-padding: 60px 40px;
    --card-padding-mobile: 40px 24px;
    --card-padding-small: 32px 20px;
    --card-max-width: 480px;
    --card-icon-size: 80px;
    --card-icon-size-mobile: 80px;
    
    /* Stats */
    --stats-headline-size: 48px;
    --stats-headline-size-mobile: 32px;
    --stats-number-size: 56px;
    --stats-number-size-mobile: 40px;
    --stats-gap: 40px;
    --stats-gap-mobile: 24px;
    
    /* Product */
    --product-title-size: 32px;
    --product-title-size-mobile: 24px;
    --product-desc-size: 19px;
    --product-desc-size-mobile: 17px;
    --product-feature-gap: 24px;
    --product-feature-gap-mobile: 16px;
    
    /* Footer */
    --footer-padding: 16px 22px;
    --footer-font-size: 12px;
    
    /* Responsive breakpoints */
    --breakpoint-mobile: 734px;
    --breakpoint-small: 375px;
    --breakpoint-large: 1068px;
}

body { font-family: var(--apple-font); }

.pairup-nav { position: sticky; top: 0; z-index: 9999; background: rgba(255,255,255,0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--apple-separator); }
.pairup-nav-content { max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--container-padding); height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; width: 100%; }
.pairup-nav-left, .pairup-nav-right { display: flex; align-items: center; gap: var(--nav-gap); flex-shrink: 0; }
.pairup-logo-link { text-decoration: none; display: flex; align-items: center; height: 100%; padding-top: var(--spacing-xs); }
.pairup-logo { height: var(--logo-height); width: auto; }
.pairup-nav-menu { display: flex; align-items: center; gap: var(--nav-gap); flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pairup-nav-menu > * { margin: 0 !important; }
.pairup-dropdown { margin: 0 !important; }
.pairup-nav-menu::-webkit-scrollbar { display: none; }
.pairup-nav-link { font-size: var(--font-size-small); font-weight: 400; color: var(--apple-black); text-decoration: none; letter-spacing: -0.01em; display: inline-flex; align-items: center; height: var(--nav-item-height); line-height: var(--nav-item-height); }
.pairup-cta-button { background: var(--apple-orange); color: var(--apple-white); height: var(--nav-item-height); padding: var(--button-padding); border-radius: 980px; font-size: var(--font-size-small); font-weight: 400; text-decoration: none; letter-spacing: -0.01em; border: none; cursor: pointer; font-family: var(--apple-font); transition: background-color .2s ease; display: inline-flex; align-items: center; line-height: var(--nav-item-height); box-sizing: border-box; }
.pairup-cta-button:hover { background: var(--apple-orange-dark); }
/* spacing between menu and button relies on parent gap to match menu gap */
.pairup-nav-right .pairup-cta-button { margin-left: 0; }

/* Dropdown */
.pairup-dropdown { position: relative; }
.pairup-dropdown-toggle { display: inline-flex; align-items: center; gap: var(--dropdown-gap); }
.pairup-dropdown-panel { position: fixed; top: var(--nav-height); left: 0; right: 0; width: 100vw; transform: translateY(-8px); z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; }
.pairup-dropdown-surface { backdrop-filter: saturate(180%) blur(20px); background: rgba(255,255,255,.82); border-top: 1px solid var(--apple-separator); box-shadow: 0 12px 40px rgba(0,0,0,.12); padding: var(--dropdown-padding) 0; width: 100%; height: 30vh; overflow: hidden; }
.pairup-dropdown-inner { max-width: var(--container-max-width); margin: 0 auto; padding: 0 var(--container-padding); max-height: calc(30vh - 40px); overflow-y: auto; }
.pairup-dropdown-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: var(--dropdown-grid-gap); }
.pairup-dropdown-col-title { font-size: var(--font-size-small); font-weight: 600; color: var(--apple-gray); margin-bottom: var(--spacing-sm); letter-spacing: -0.01em; }
.pairup-dropdown-link { display: block; padding: var(--dropdown-link-padding); color: var(--apple-black); text-decoration: none; font-size: var(--font-size-sm); letter-spacing: -0.01em; }
.pairup-dropdown-link:hover { color: var(--apple-orange); }

/* Clean hover effects for black text elements - HIGHEST PRIORITY */
h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
    color: var(--apple-orange) !important;
    transition: color 0.3s ease !important;
}

.pairup-product-title:hover {
    color: var(--apple-orange) !important;
    transition: color 0.3s ease !important;
}

.pairup-stats-headline:hover {
    color: var(--apple-orange) !important;
    transition: color 0.3s ease !important;
}

.pairup-login-title:hover {
    color: var(--apple-orange) !important;
    transition: color 0.3s ease !important;
}

/* Additional high-priority hover rules */
.pairup-nav-link:hover {
    color: var(--apple-orange) !important;
    transition: color 0.3s ease !important;
}

.pairup-dropdown-link:hover {
    color: var(--apple-orange) !important;
    transition: color 0.3s ease !important;
}
.pairup-dropdown:hover .pairup-dropdown-panel, .pairup-dropdown-panel:hover { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pairup-dropdown-panel::before { content: ''; position: absolute; top: calc(-1 * var(--dropdown-buffer-height)); left: 0; right: 0; height: var(--dropdown-buffer-height); }

/* Footer */
.pairup-footer { border-top: 1px solid var(--apple-separator); background: var(--apple-white); color: var(--apple-gray); font-size: var(--footer-font-size); line-height: 1.6; text-align: center; padding: var(--footer-padding); }

/* Small screens */
@media (max-width: 734px) { :root { --nav-gap: var(--nav-gap-mobile); } .pairup-nav-content { padding: 0 var(--container-padding-mobile); } }
@media (max-width: 360px) { :root { --nav-gap: var(--nav-gap-small); } .pairup-logo { height: var(--logo-height-mobile); } .pairup-nav-left { gap: var(--nav-gap-small); } .pairup-nav-right { gap: 0; } .pairup-nav-link { height: 26px; line-height: 26px; font-size: var(--font-size-xs); } .pairup-cta-button { height: 26px; line-height: 26px; font-size: var(--font-size-xs); padding: var(--button-padding-mobile); } }