/*
Theme Name: FundedFamilyOne - Futures v4
Theme URI: https://excelprop.com/
Author: ExcelProp Pte. Ltd
Author URI: https://excelprop.com/
Description: The Funded Family One futures site (Home, About, Affiliate, Apply, Blog) as a WordPress theme. Ports the approved FF1 Futures design 1:1 - ribbon and liquid glass background, plan picker, TruTik demos, certificate carousel - with site settings in the Customizer.
Version: 4.4.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietary. Built by ExcelProp Pte. Ltd for Funded Family One.
License URI: https://excelprop.com/
Text Domain: ff1-futures
Tags: one-column, custom-menu, dark
*/

/*
The design stylesheet is assets/css/ff1.css (verbatim from the design kit).
This file only carries the theme header and WordPress-specific additions.
*/

/* WordPress admin bar: keep the sticky header below it. */
.admin-bar .top-bar { top: var(--wp-admin--admin-bar--height, 32px) !important; }
.admin-bar .skip:focus { top: calc(12px + var(--wp-admin--admin-bar--height, 32px)); }
@media (max-width: 782px) { .admin-bar .top-bar { top: 46px !important; } }

/* Accessibility helper used by the templates. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); border: 0; word-wrap: normal !important; }

/* No-JS fallback for the plan picker. */
.ff1-nojs { padding: 20px; color: #d3dcd9; font-size: 15px; line-height: 1.5; }
.ff1-nojs a { color: #f5f5f7; }

/* Generic page template (any WordPress page without an FF1 template). */
.ff1-content { max-width: 820px; margin-inline: auto; padding: clamp(72px, 9vw, 136px) clamp(16px, 3.2vw, 48px) clamp(56px, 6vw, 96px); }
.ff1-content h1 { font-family: 'Mona Display', -apple-system, 'Helvetica Neue', Arial, sans-serif; font-stretch: 125%; font-weight: 600; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 24px; }
.ff1-content h2, .ff1-content h3 { margin: 32px 0 10px; letter-spacing: -0.02em; }
.ff1-content p, .ff1-content ul, .ff1-content ol { margin-bottom: 16px; color: #d1d1d6; }
.ff1-content ul, .ff1-content ol { padding-left: 1.3em; }
.ff1-content img { max-width: 100%; height: auto; border-radius: 12px; }
.ff1-content a { color: #f5f5f7; }

/* The hidden attribute always wins (the menu panel, form states and the pause button toggle it). */
[hidden] { display: none !important; }

/* Flying banner (wp-admin > Pricing Management). Sits above the sticky header and scrolls away with the page. */
.ff1-ticker { position: relative; z-index: 6; height: 36px; overflow: hidden; background: #050807; border-bottom: 1px solid rgb(255 255 255 / 0.1); color: #f5f5f7; font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; line-height: 36px; white-space: nowrap; text-shadow: none; }
.ff1-ticker::before, .ff1-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: clamp(24px, 6vw, 96px); pointer-events: none; }
.ff1-ticker::before { left: 0; background: linear-gradient(90deg, #050807, transparent); }
.ff1-ticker::after { right: 0; background: linear-gradient(270deg, #050807, transparent); }
.ff1-ticker-track { display: flex; width: max-content; animation: ff1-ticker 40s linear infinite; will-change: transform; }
.ff1-ticker:hover .ff1-ticker-track, .ff1-ticker:focus-within .ff1-ticker-track { animation-play-state: paused; }
.ff1-ticker-set { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.ff1-ticker-set li { display: flex; align-items: center; }
.ff1-ticker-set li::after { content: ''; flex: none; width: 4px; height: 4px; margin-inline: clamp(18px, 2.4vw, 34px); border-radius: 50%; background: #36d6c3; }
.ff1-ticker-set a { color: inherit; text-decoration: none; transition: color 0.2s; }
.ff1-ticker-set a:hover { color: #36d6c3; }
.ff1-ticker-set span a { text-decoration: underline; text-underline-offset: 2px; }
@keyframes ff1-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ff1-ticker { overflow-x: auto; scrollbar-width: none; }
  .ff1-ticker-track { animation: none; }
  .ff1-ticker-set[aria-hidden="true"] { display: none; }
}
/* The hero fills the first screen; leave room for the banner above it. */
.ff1-has-ticker .hero { height: min(calc(100vh - 36px), 900px); height: min(calc(100svh - 36px), 900px); }

/* Seven links in the header (Blog added): switch to the menu button a little earlier so they never crowd the product switch. */
@media (max-width: 1120px) {
  .nav-links { display: none !important; }
  .nav-menu { display: inline-flex !important; }
}