/* Operation Fairway Finder site stylesheet (migrated from the studio sandbox 2026-09-14-1538; home page id 76). Design record: the studio's exports/off-pilot.css */
/* Operation Fairway Finder pilot, REV 3 (2026-09-09). Scoped to body.off-pilot, which
   functions.php adds on pages 1920 (frozen twin), 1921 (working), 1974 (Veterans), 1975 (Sponsors).
   Palette per reference-projects/operation-fairway-finder/DESIGN.md. */
:root { --off-navy: #071A35; --off-red: #9E1C20; --off-white: #FFFFFF; --off-grey: #838486; --off-mist: #EEF1F5; --off-sans: "Source Sans Pro", "Open Sans", sans-serif; --off-slab: "Roboto Slab", "Zilla Slab", serif; }
body.off-pilot { background: var(--off-white); }

/* ONE BUTTON SPEC everywhere on the page (D4 modules already carry it; this pins the touch target and kills vendor hover tracking) */
.off-pilot .et_pb_button, .off-pilot .et_pb_pricing_table_button { min-height: 48px; line-height: 1.2; font-family: var(--off-sans) !important; font-weight: 600 !important; font-size: 17px !important; border-radius: 6px !important; letter-spacing: 0 !important; }
.off-pilot .et_pb_button:after { display: none !important; }
.off-pilot .et_pb_button:hover { padding: 14px 34px !important; }
/* Button pairs sit side by side on desktop and tablet (Tony: never stacked) */
.off-pilot #top .et_pb_button_module_wrapper, .off-pilot #donate .et_pb_button_module_wrapper { display: inline-block; vertical-align: top; margin-right: 12px; }
.off-pilot #donate .et_pb_button_module_wrapper { margin-right: 6px; margin-left: 6px; }
@media (max-width: 767px) { .off-pilot #top .et_pb_button_module_wrapper, .off-pilot #donate .et_pb_button_module_wrapper { display: block; margin-right: 0; } .off-pilot #top .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-top: -16px; } }

/* HERO (2026-10-07, the client's choice relayed by Tony: "remove the picture of the golfer, and they would like the group photo
   as the hero"; Tony: "I still want the group to be visible, but at the same time, I want the text to be readable"). The
   client's own group photo (uploads/2026/10/off-hero-group, attachment 108). Desktop: the photo fills the hero and a navy fade
   on the left carries the type, clearing by 72% so the group stays visible; a soft shadow keeps the copy readable where the
   fade thins. Tablets and phones: the type sits on solid navy and the photo is anchored to the hero's bottom, fading up into
   the navy, so the whole group shows below the buttons (phones zoom to its centre). One image per device: 1536px from 768px
   up, 1080px on phones (the performance layer preloads the same two, read from the section's own background).
   Photo rules are HOMEPAGE ONLY (2026-09-14): inner pages carry their own distinct hero photo in the section itself. */
.off-pilot #top { position: relative; overflow: hidden; }
.off-pilot #top .et_pb_row { position: relative; z-index: 2; }
.off-pilot.page-id-76 #top .et_pb_text { text-shadow: 0 1px 14px rgba(7, 26, 53, 0.55); }
@media (min-width: 981px) { .off-pilot.page-id-76 #top { background-image: linear-gradient(90deg, rgba(7,26,53,0.88) 0%, rgba(7,26,53,0.80) 30%, rgba(7,26,53,0.58) 45%, rgba(7,26,53,0.20) 60%, rgba(7,26,53,0) 72%), url("/wp-content/uploads/2026/10/off-hero-group-1536x1152.webp") !important; background-size: cover !important; background-position: center 80% !important; } }
@media (max-width: 980px) { .off-pilot.page-id-76 #top { background-color: #071A35 !important; background-image: linear-gradient(180deg, rgba(7,26,53,1) 0%, rgba(7,26,53,0.8) 15%, rgba(7,26,53,0.3) 30%, rgba(7,26,53,0) 40%), url("/wp-content/uploads/2026/10/off-hero-group-1536x1152.webp") !important; background-size: 100% 75vw, 100% auto !important; background-position: center bottom, center bottom !important; background-repeat: no-repeat !important; padding-bottom: calc(47vw + 24px) !important; } }
@media (max-width: 767px) { .off-pilot.page-id-76 #top { background-image: linear-gradient(180deg, rgba(7,26,53,1) 0%, rgba(7,26,53,0.8) 15%, rgba(7,26,53,0.3) 30%, rgba(7,26,53,0) 40%), url("/wp-content/uploads/2026/10/off-hero-group-1080x810.webp") !important; background-size: 100% 120vw, 160% auto !important; padding-bottom: calc(76vw + 16px) !important; } }

/* HEADER: badge hangs into the hero (Tony: 20 to 25 percent), header paints above the page */
.off-pilot .et-l--header { position: relative; z-index: 30; }
.off-pilot .et-l--header .et_pb_section, .off-pilot .et-l--header .et_pb_row, .off-pilot .et-l--header .et_pb_column { overflow: visible !important; }
@media (min-width: 981px) { .off-pilot .et-l--header .et_pb_row:nth-of-type(2) .et_pb_column:first-child { min-height: 176px; } .off-pilot .et-l--header .et_pb_row:nth-of-type(2) .et_pb_column:first-child .et_pb_image { margin: 8px auto -68px !important; filter: drop-shadow(0 6px 14px rgba(7,26,53,0.28)); } }
.off-pilot .et-l--header .et_pb_menu .nav li a, .off-pilot .et-l--header .et_pb_menu .et-menu a { font-family: var(--off-sans); }
@media (min-width: 981px) { .off-pilot .et-l--header .et_pb_menu ul > li { padding-right: 6px !important; margin-right: 0; } .off-pilot .et-l--header .et_pb_menu ul > li > a { padding: 8px 12px !important; border-radius: 6px; transition: background-color 0.18s ease, color 0.18s ease; opacity: 1 !important; white-space: nowrap; } .off-pilot .et-l--header .et_pb_menu ul > li > a:hover { background-color: var(--off-red); color: #FFFFFF !important; } .off-pilot .et-l--header .et_pb_menu ul { flex-wrap: nowrap; } }
/* Placeholder social links: shown, inert until the client supplies URLs */
.off-pilot .et_pb_social_media_follow a[href="#"] { cursor: default; }

/* TYPE SAFETY: nothing on the page falls back to Open Sans (Fluent's conversational app sets its own stack) */
.off-pilot .ff_conv_app, .off-pilot .ff_conv_app *, .off-pilot .ff_conv_app_frame, .off-pilot .ff_conv_app_frame * { font-family: var(--off-sans) !important; }
.off-pilot .ff_conv_app .q-title, .off-pilot .ff_conv_app .f-label-wrap, .off-pilot .ff_conv_app .q-inner .fh2 { font-family: var(--off-slab) !important; }
.off-pilot .ff_conv_app_frame, .off-pilot .ff_conversation_app { min-height: 560px; }
.off-pilot .ff_conv_app { border-radius: 8px; overflow: hidden; }

/* PHOTO STRIP and CARDS */
.off-pilot #photos .et_pb_image img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border-radius: 6px; }
@media (hover: none) { .off-pilot #photos .et_pb_image:hover { transform: none !important; } }
.off-pilot #take-part .et_pb_divider { border-radius: 6px; background-size: cover; }
/* Cards: text grows, buttons share one baseline */
.off-pilot #take-part .et_pb_column_1_3 { display: flex; flex-direction: column; }
.off-pilot #take-part .et_pb_column_1_3 .et_pb_button_module_wrapper { margin-top: auto; }

/* PRICING TABLES: Title, Platinum, Gold in the scaffold's grid slot; every Inquire button on one baseline */
.off-pilot #sponsor .et_pb_pricing_table_wrap { display: flex; flex-wrap: wrap; align-items: stretch; }
.off-pilot #sponsor .et_pb_pricing_table { float: none; box-sizing: border-box; width: 32% !important; max-width: 32%; margin: 0 0.66% !important; display: flex; flex-direction: column; }
.off-pilot #sponsor .et_pb_pricing_table.et_pb_featured_table { margin-top: 0 !important; }
.off-pilot #sponsor .et_pb_pricing_content { flex: 1 1 auto; padding: 20px 16px; }
.off-pilot #sponsor .et_pb_pricing_table .et_pb_button_wrapper { margin-top: auto; padding-bottom: 24px; }
.off-pilot #sponsor .et_pb_pricing_heading { padding: 20px 10px; }
.off-pilot #sponsor .et_pb_sum { line-height: 1.1; }
@media (max-width: 980px) { .off-pilot #sponsor .et_pb_pricing_table { width: 100% !important; max-width: 100%; margin: 0 0 16px !important; } }
/* 2026-10-14: after the native Divi 5 conversion the tables' wrapper is the flex module .et_pb_pricing_tables (nowrap), not
   .et_pb_pricing_table_wrap, so below 981px the three tables stayed side by side at 191px and phones scrolled sideways (592px
   at 390, on the homepage and the Sponsors page): wrap them and give each the full row. */
@media (max-width: 980px) { .off-pilot #sponsor .et_pb_pricing_tables { flex-wrap: wrap; } .off-pilot #sponsor .et_pb_pricing_tables > .et_pb_pricing_table { flex: 1 1 100%; } }
/* Silver and Bronze: compact pair */
.off-pilot #sponsor .off-tier-compact h4 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.off-pilot #sponsor .off-tier-compact .off-price { font-family: var(--off-slab); font-weight: 700; font-size: 28px; color: var(--off-red); white-space: nowrap; }
.off-pilot #sponsor .off-tier-compact p { margin-bottom: 4px; }

/* COUNTERS bar: pulled up over the band above; a fixed stacking order so Divi's hover z-index on the band never covers it (Tony: it appeared and disappeared on hover) */
.off-pilot #numbers { position: relative; z-index: 3; }
/* COUNTERS bar: the scaffold pulls it up over the band above */
.off-pilot #numbers .et_pb_number_counter .title { font-family: var(--off-sans); }

/* TESTIMONIALS slider */
.off-pilot #testimonials .et_pb_slide_description { text-align: center; }
.off-pilot #testimonials .et_pb_slide_description p { font-family: var(--off-slab); }
.off-pilot #testimonials .et_pb_slide_description img { margin: 0 auto 16px; opacity: 0.85; }

/* CONTACT: the map fills the column beside the Mist panel */
.off-pilot #contact .et_pb_column:first-child { min-height: 560px; }

/* Blurb icon PNGs carry Divi's waypoint class and sit at opacity 0 until a scroll event; always visible */
.off-pilot .et_pb_main_blurb_image img { opacity: 1 !important; }
/* Inner pages: uniform 430px mini-hero already set on the section; the hanging badge needs headroom */
/* inner pages: the mini hero's own 110/50 padding stands (uniform 440px band) */

/* Inner pages carry the same hero photograph without the golfer overlay */

/* Capture mode (cookie off_capture=1 adds body.off-capture): entrance animations settle instantly so headless captures are deterministic */
body.off-capture .et_animated, body.off-capture .et_had_animation { animation: none !important; opacity: 1 !important; transform: none !important; visibility: visible !important; }

/* Text links follow the brand (Divi's default blue never appears) */
.off-pilot .et_pb_text a, .off-pilot .et_pb_slide_description a { color: var(--off-red); text-decoration: none; font-weight: 600; }
.off-pilot .et_pb_text a:hover { color: var(--off-navy); text-decoration: underline; }
/* Contact: Tony's Google Maps embed fills the column beside the Mist panel; in capture mode the static map stands in behind it (iframes never paint in the headless capture) */
.off-pilot #contact .et_pb_column:first-child { position: relative; min-height: 560px; }
.off-pilot #contact .et_pb_code, .off-pilot #contact .et_pb_code_inner { height: 100%; }
.off-pilot #contact .et_pb_code iframe { display: block; width: 100%; height: 100%; min-height: 560px; }
body.off-capture #contact .et_pb_column:first-child { background: url("/wp-content/uploads/2026/09/off-map-google.webp") center / cover no-repeat; } /* a real screenshot of the Google embed (exports/cdp-embed-shot.py) stands in for the iframe in captures */
@media (max-width: 980px) { .off-pilot #contact .et_pb_column:first-child { min-height: 420px; } .off-pilot #contact .et_pb_code iframe { min-height: 420px; } }
/* Phone: the utility strip wraps into two centered lines (email, then socials) instead of a ragged break */
@media (max-width: 767px) { .off-pilot .et-l--header .et_pb_group_0_tb_header { flex-wrap: wrap; justify-content: center; row-gap: 6px; padding-left: 12px !important; padding-right: 12px !important; } .off-pilot .et-l--header .et_pb_group_0_tb_header .et_pb_social_media_follow { margin: 0 auto !important; } }

/* Footer: long contact strings never overrun a column; on tablet the four columns run two per row */
.off-pilot .et-l--footer p, .off-pilot .et-l--footer a { overflow-wrap: anywhere; }
@media (max-width: 980px) and (min-width: 768px) { .off-pilot .et_pb_row_0_tb_footer .et_pb_column { flex: 0 0 46% !important; max-width: 46% !important; margin-bottom: 24px; } }

/* Fluent's keyboard hint carries its own face; brand body face here too */
.off-pilot .ff_conv_app .f-help, .off-pilot .ff_conv_app .f-sub, .off-pilot .ff_conv_app .f-enter-desc { font-family: var(--off-sans) !important; }

/* Nav right-aligned beside Donate (Tony 2026-09-09 trial; he may want it centered: swap flex-end for center on these two rules) */
@media (min-width: 981px) { .off-pilot .et-l--header .et_pb_menu .et_pb_menu_inner_container { justify-content: flex-end !important; } .off-pilot .et-l--header .et_pb_menu .et_pb_menu__menu > nav > ul { justify-content: flex-end; } }

/* Provides band: titles stay on one line at desktop widths (Tony 2026-09-09); icon gap tightened so the full column serves the title */
.off-pilot #provides .et_pb_blurb_container { padding-left: 10px; }
@media (min-width: 1200px) { .off-pilot #provides .et_pb_blurb .et_pb_module_header { white-space: nowrap; letter-spacing: -0.4px; } }

/* Numbers bar: the patriotic mark Tony generated sits inline before the 100 percent figure */
.off-pilot #numbers .et_pb_number_counter_0 .percent p::before { content: ""; display: inline-block; width: 40px; height: 40px; margin-right: 10px; vertical-align: -6px; background: url("/wp-content/uploads/2026/09/off-icon-star-red.webp") center / contain no-repeat; }

/* Parallax bands: Divi paints the photo in a fixed layer ABOVE the section, so the section's navy gradient never showed in a real browser
   (headless captures do not paint fixed layers, which hid the miss). The overlay now lives on the parallax layer itself. */
.off-pilot #donate .et_parallax_bg, .off-pilot #testimonials .et_parallax_bg { position: absolute; }
.off-pilot #donate .et_parallax_bg::after, .off-pilot #testimonials .et_parallax_bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.off-pilot #donate .et_parallax_bg::after { background: rgba(7,26,53,0.70); } /* Tony 2026-09-09: both bands at 0.70, the photo should still read */
.off-pilot #testimonials .et_parallax_bg::after { background: rgba(7,26,53,0.70); }

/* Sponsor marquee: logos on white cards scroll left continuously; pauses on hover; static row when the visitor prefers reduced motion */
.off-pilot .off-marquee { overflow: hidden; width: 100%; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.off-pilot .off-marquee__track { display: flex; align-items: center; gap: 28px; width: max-content; animation: off-marquee 32s linear infinite; }
.off-pilot .off-marquee:hover .off-marquee__track { animation-play-state: paused; }
.off-pilot .off-marquee__item { flex: 0 0 auto; background: var(--off-white); border: 1px solid rgba(7,26,53,0.10); border-radius: 6px; padding: 14px 26px; display: flex; align-items: center; height: 92px; box-sizing: border-box; }
.off-pilot .off-marquee__item img { height: 60px; width: auto; display: block; }
@keyframes off-marquee { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: reduce) { .off-pilot .off-marquee__track { animation: none; } }

/* Statement band: the two inline actions center (Tony 2026-09-09) */
.off-pilot #donate .et_pb_column { text-align: center; }
/* capture: parallax photos. Headless captures never paint Divi's fixed parallax layer (the flats showed solid navy), so capture mode paints
   the same photo and the same 0.70 overlay on the section itself; the browser keeps the parallax layer with its ::after overlay. */
body.off-capture #donate { background-image: linear-gradient(rgba(7,26,53,0.70), rgba(7,26,53,0.70)), url("/wp-content/uploads/2026/09/off-sponsor-band.webp") !important; background-size: cover !important; background-position: center !important; }
body.off-capture #testimonials { background-image: linear-gradient(rgba(7,26,53,0.70), rgba(7,26,53,0.70)), url("/wp-content/uploads/2026/09/off-quote-band.webp") !important; background-size: cover !important; background-position: center !important; }
body.off-capture #donate .et_parallax_bg_wrap, body.off-capture #testimonials .et_parallax_bg_wrap { display: none; }

/* Conversational question labels sit on the H4 step of the scale */
.off-pilot .ff_conv_app .fh2 .f-text, .off-pilot .ff_conv_app .f-label-wrap .f-text { font-size: 22px !important; line-height: 1.3 !important; }

/* Kit bands (inner pages): centered inline button pairs; the section paints its own photo and overlay (no parallax layer) */
.off-pilot .off-band .et_pb_column { text-align: center; }
.off-pilot .off-band .et_pb_button_module_wrapper { display: inline-block; vertical-align: top; margin: 0 6px; }
@media (max-width: 767px) { .off-pilot .off-band .et_pb_button_module_wrapper { display: block; margin: 0; } }
/* BACKGROUND VARIANTS (client ask 2026-09-17: "light beige or really light grey instead of white"). The client chose the
   GREY grounds (2026-10-07): functions.php adds body.off-bg-grey on every page; the beige rules stay unused. Page grounds change; cards, the navy bands and the photo sections keep their own colour. */
.off-pilot.off-bg-grey  { --off-ground: #F2F3F5; --off-ground-alt: #E6E9ED; }
.off-pilot.off-bg-beige { --off-ground: #F6F2EB; --off-ground-alt: #ECE5D8; }
.off-pilot.off-bg-grey #about, .off-pilot.off-bg-grey #testimonials, .off-pilot.off-bg-grey #contact, .off-pilot.off-bg-grey #photos,
.off-pilot.off-bg-beige #about, .off-pilot.off-bg-beige #testimonials, .off-pilot.off-bg-beige #contact, .off-pilot.off-bg-beige #photos { background-color: var(--off-ground) !important; }
.off-pilot.off-bg-grey #funding, .off-pilot.off-bg-grey #numbers, .off-pilot.off-bg-grey #sponsor, .off-pilot.off-bg-grey #take-part, .off-pilot.off-bg-grey .et_pb_section:last-of-type,
.off-pilot.off-bg-beige #funding, .off-pilot.off-bg-beige #numbers, .off-pilot.off-bg-beige #sponsor, .off-pilot.off-bg-beige #take-part, .off-pilot.off-bg-beige .et_pb_section:last-of-type { background-color: var(--off-ground-alt) !important; }
/* inner pages: the story split and the tiles ground follow the same variables */
.off-pilot.off-bg-grey #story, .off-pilot.off-bg-beige #story { background-color: var(--off-ground) !important; }
.off-pilot.off-bg-grey #mission, .off-pilot.off-bg-beige #mission { background-color: var(--off-ground-alt) !important; }

/* SPONSOR LOGO GRID (client request, 2026-09-17: "add more sponsors"; Tony: make all of them visible).
   Replaces the marquee on the home and About strips: every logo visible at once, four per row, two on phones. */
.off-pilot .off-logo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding: 6px 0; }
.off-pilot .off-logo-grid__item { flex: 0 1 calc(25% - 14px); min-width: 180px; background: var(--off-white); border: 1px solid rgba(7,26,53,0.10); border-radius: 6px; padding: 14px 26px; display: flex; align-items: center; justify-content: center; height: 92px; box-sizing: border-box; }
.off-pilot .off-logo-grid__item img { height: 60px; width: auto; max-width: 100%; object-fit: contain; display: block; }
@media (max-width: 767px) { .off-pilot .off-logo-grid__item { flex-basis: calc(50% - 9px); min-width: 0; height: 80px; padding: 10px 14px; } .off-pilot .off-logo-grid__item img { height: 48px; } }

/* Mobile menu (2026-09-25, gate 9): the menu's active-link navy is for the white desktop header; in the navy mobile
   menu it made Home, About Us and Contact Us (all "current" on the home page) navy on navy, 1:1. White like the rest. */
@media (max-width: 980px) { .off-pilot .et-l--header .et_pb_menu .et_mobile_menu li.current-menu-item > a, .off-pilot .et-l--header .et_pb_menu .et_mobile_menu li.current_page_item > a { color: #FFFFFF !important; } }

/* BRANDED MOBILE HEADER (2026-10-15, Tony): the studio feature in mobile-menu.css (option bys_mobile_header) in Fairway Finder's navy. */
@media (max-width: 980px) {
	body.off-pilot.bys-mobile-header { --bys-mh-ink: #071A35;
		--bys-mh-outline: drop-shadow(2px 0 0 #FFFFFF) drop-shadow(-2px 0 0 #FFFFFF) drop-shadow(0 2px 0 #FFFFFF) drop-shadow(0 -2px 0 #FFFFFF); }   /* Tony 2026-10-15: a small white outline on the badge */
}

/* Privacy Policy hero on phones (2026-10-15): its photo (golf carts on sunlit grass) is the brightest of the inner heroes
   where the lead sits, so phones get a navy veil over the photo; tablets and desktops keep the uniform fade. */
@media (max-width: 767px) {
	.off-pilot.page-id-154 #top { position: relative; }
	.off-pilot.page-id-154 #top::before { content: ""; position: absolute; inset: 0; background: rgba(7, 26, 53, 0.5); pointer-events: none; z-index: 0; }
	.off-pilot.page-id-154 #top > .et_pb_row { position: relative; z-index: 1; }
}