/*
Theme Name: Pin Seeker
Theme URI: https://pinseekergolf.com
Author: Pin Seeker
Description: Custom traffic-director theme for Pin Seeker Indoor Golf & Sports Grill. WordPress serves marketing pages only; bookings, food orders, gift cards and lead capture route to Golf O'Clock, Square, and GoHighLevel.
Version: 0.3.0
Requires at least: 6.0
Requires PHP: 8.0
License: Proprietary
Text Domain: pinseeker
*/

/* Self-hosted fonts (see assets/fonts/) — downloaded once from Google Fonts
   and served from this theme instead of fonts.googleapis.com/fonts.gstatic.com.
   Removes two third-party requests per visit; browsers no longer share a
   cross-site Google Fonts cache anyway (cache partitioning), so self-hosting
   is strictly faster now. Weight 400 700 on Inter reflects the source file
   actually being a variable font — Google's CSS just repeats the same file
   per static weight for older-browser compatibility, so one @font-face
   covering the whole range is equivalent and smaller. Re-fetch from
   fonts.googleapis.com/css2?family=... if the weights/families in use ever
   change. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Pathway Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/pathway-gothic-one-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Pathway Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/pathway-gothic-one-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#070807;
  --ink-2:#0d0f0d;
  --forest:#07332b;
  --forest-2:#0d4438;
  --gold:#c7a052;
  --gold-light:#e0c27c;
  --ivory:#f3eadb;
  --paper:#eee7da;
  --muted:#b7afa2;
  --line:rgba(199,160,82,.42);
  --lime:#a4d100;
  --copper:#b96a40;
  --max:1320px;
  --pad:clamp(22px,4vw,64px);
  --display:'Pathway Gothic One','Arial Narrow',sans-serif;
  --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--body);line-height:1.55}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.wrap{width:min(var(--max),calc(100% - 2*var(--pad)));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--ivory);color:var(--ink);padding:10px 14px}
.utility{background:var(--forest);border-bottom:1px solid rgba(224,194,124,.35)}
.utility__inner{min-height:34px;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;color:var(--gold-light);font:15px/1 var(--display);letter-spacing:.12em}
.header{position:sticky;top:0;z-index:30;background:rgba(7,8,7,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(199,160,82,.28)}
.header__inner{height:86px;display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:28px}
.logo img{width:176px;height:70px;object-fit:contain}
.nav{display:flex;justify-content:center;gap:clamp(15px,2.1vw,32px);font:18px/1 var(--display);letter-spacing:.08em}
.nav a{color:var(--paper);padding:12px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--gold-light);border-color:var(--gold)}
.menu{display:none;background:transparent;border:1px solid var(--gold);color:var(--ivory);padding:10px 13px;font:18px var(--display);letter-spacing:.08em}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:1px solid transparent;font:20px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;transition:.2s ease}
.button:hover{transform:translateY(-1px)}
.button--gold{background:var(--gold);color:#111;border-color:var(--gold)}
.button--outline{background:transparent;color:var(--ivory);border-color:rgba(243,234,219,.58)}
.button--forest{background:var(--forest);color:var(--ivory);border-color:var(--forest)}
.eyebrow{margin:0 0 12px;color:var(--gold-light);font:18px/1 var(--display);letter-spacing:.18em;text-transform:uppercase}
.eyebrow--dark{color:var(--forest)}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.025em;text-transform:uppercase;margin:0}
h1{font-size:clamp(70px,8vw,132px);line-height:.82}
h2{font-size:clamp(44px,5vw,82px);line-height:.92}
h3{font-size:clamp(27px,2.5vw,42px);line-height:1}
p{margin:0 0 18px}
.hero{position:relative;min-height:700px;display:grid;align-items:center;overflow:hidden}
.hero__image{position:absolute;inset:0;background:url('assets/images/hero-venue.jpg') center/cover no-repeat;filter:saturate(.88) contrast(1.05)}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,7,.98) 0%,rgba(7,8,7,.92) 33%,rgba(7,8,7,.40) 68%,rgba(7,8,7,.08) 100%),linear-gradient(0deg,rgba(7,8,7,.85),transparent 45%)}
.hero__content{position:relative;z-index:2}
.hero__copy{max-width:610px;padding:90px 0}
.hero h1 span{color:var(--gold)}
.hero__lead{max-width:580px;margin:28px 0 32px;font-size:clamp(18px,1.6vw,24px);color:#e5ddcf}
.hero__actions,.actions{display:flex;gap:12px;flex-wrap:wrap}
.promise{border-block:1px solid var(--line);background:#090b09}
.promise .wrap{text-align:center;padding:24px 0}
.promise p{margin:0;font:clamp(26px,3vw,44px)/1 var(--display);letter-spacing:.15em}
.promise p span{color:var(--gold)}
.promise small{display:block;margin-top:8px;color:var(--muted);font-size:15px}
.section{padding:clamp(70px,8vw,118px) 0}
.section--kitchen{background:linear-gradient(180deg,#0d100e,#090a09)}
.split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:clamp(36px,6vw,84px);align-items:center}
.split--reverse .split__media{order:2}
.split--reverse .split__copy{order:1}
.split__copy>p:not(.eyebrow):not(.callout){font-size:clamp(17px,1.5vw,22px);color:#d5ccbe;max-width:580px}
.callout{font:clamp(26px,2.6vw,42px)/1.06 var(--display);color:var(--gold-light);text-transform:uppercase}
.food-mosaic{display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:1fr 1fr;min-height:560px;gap:8px}
.food-mosaic img{height:100%;object-fit:cover}
.food-mosaic img:first-child{grid-row:1/3}
.section--calendar{background:var(--forest);border-block:1px solid rgba(224,194,124,.32)}
.section-head{margin-bottom:36px}
.section-head--split{display:grid;grid-template-columns:1fr minmax(320px,.72fr);gap:50px;align-items:end}
.section-head--split>p{color:#d9d0c2;max-width:560px}
/* One flat grid (see front-page.php / page-whats-on.php — no more
   .calendar-column wrappers splitting it into two separately-stacked
   lists) so days read left to right, then wrap top to bottom like a
   normal calendar, growing from 1 column up to 4 as the viewport widens
   (min-width tiers below, same 521/800/1100 breakpoints used elsewhere).
   Dividers between cells are the grid gap itself showing through (a
   background color on the gap, one on each .day) — this way the dividing
   lines are consistent whether a row ends up with 1, 2, 3 or 4 items in
   it, without needing per-column border rules keyed to a column count
   that changes by breakpoint. */
.calendar-grid{display:grid;grid-template-columns:1fr;gap:1px;border:1px solid rgba(224,194,124,.4);background:rgba(224,194,124,.4)}
.day{display:grid;grid-template-columns:94px 1fr;gap:18px;align-items:center;min-height:100px;padding:18px 24px;background:rgba(6,22,18,.45)}
.day>span{font:25px/1 var(--display);letter-spacing:.08em;color:var(--gold)}
.day strong{display:block;font:25px/1.05 var(--display);letter-spacing:.035em}
.day small{display:block;margin-top:7px;color:#c8c0b3}
.day--featured{background:rgba(199,160,82,.09)}
.day--monthly{background:rgba(164,209,0,.08)}
.center{text-align:center;margin-top:28px}
.section--offers{background:#0b0d0b}
.offers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.offer{min-height:350px;padding:28px;border:1px solid var(--line);display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(13,68,56,.52),rgba(7,8,7,.8))}
.offer__label{font:16px/1 var(--display);letter-spacing:.14em;color:var(--gold-light)}
.offer h3{margin:18px 0}
.offer__price{font:24px/1.15 var(--display);text-transform:uppercase;color:var(--ivory)}
.offer__price strong{font-size:46px;color:var(--gold-light)}
.offer p{color:#d1c8ba}
.offer__note{font-size:13px;color:var(--gold-light)}
.offer>a{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font:20px var(--display);letter-spacing:.06em;color:var(--gold-light)}
.mini-rates{margin:10px 0 20px}
.mini-rates div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(224,194,124,.22)}
.mini-rates span{font-size:12px;color:#c7bfb2}
.mini-rates strong{font:20px var(--display);color:var(--gold-light)}
.mini-rates__strike{color:var(--muted);text-decoration:line-through;font-size:.85em;margin-right:12px}
.section--memberships{background:var(--paper);color:#151714}
.section--memberships .section-head>p{color:#494d46}
/* Comparison table (see inc/memberships.php) — the only Flex Memberships
   layout at every screen size (2026-08-15; a separate desktop card grid
   used to sit above this, but the table read better everywhere so it was
   dropped). Base rules below are the tightest (mobile) tier; the
   min-width tiers further down scale typography/padding up for
   tablet/desktop instead of the table just sitting tiny on a big screen.
   The "MOST POPULAR" plan's whole column is tinted (.is-featured on every
   cell, not just the header) since the cards used to carry that emphasis
   via a gold border/shadow and this is the only visual treatment doing
   that job now. */
.member-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:20px}
.member-table{width:100%;min-width:480px;border-collapse:collapse;background:#f7f1e7;font-size:14px}
.member-table th,.member-table td{padding:8px;border:1px solid rgba(7,51,43,.18);text-align:center;vertical-align:middle}
.member-table thead th{font:18px var(--display);letter-spacing:.04em;color:var(--forest)}
.member-table thead th.is-featured,.member-table td.is-featured{background:rgba(199,160,82,.18)}
.member-table__flag{display:block;width:88%;margin:0 auto 6px;padding:5px 0;border-radius:999px;background:var(--gold);color:#111;text-align:center;font:12px var(--display);letter-spacing:.08em}
.member-table tbody th{text-align:left;font:18px var(--display);letter-spacing:.06em;color:var(--forest);background:#f7f1e7;position:sticky;left:0}
.member-table tbody tr:nth-child(even) td:not(.is-featured){background:rgba(7,51,43,.03)}
.member-table td strong{font-size:19px;color:#111}
.member-table__strike{color:#7a7568;text-decoration:line-through;font-size:.9em;margin-right:4px}
.member-table__annual-price{font:17px var(--display);color:#111}
.member-table__hourly{display:inline-block;margin-top:4px;font-size:13px;color:var(--forest);letter-spacing:.02em}
.member-table__details td ul{margin:0;padding:0;list-style:none;text-align:left;font-size:13px;line-height:1.5;color:#3a3f3a}
.member-table__details td li{padding:3px 0}
.member-table__cta td{padding:10px 4px}
.member-table__cta .button{width:100%;font-size:16px;font-weight:700;padding:12px 6px}

@media (min-width:521px){
  .member-table{min-width:560px;font-size:16px}
  .member-table th,.member-table td{padding:10px 12px}
  .member-table thead th{font-size:20px}
  .member-table__flag{font-size:13px}
  .member-table tbody th{font-size:20px}
  .member-table td strong{font-size:22px}
  .member-table__annual-price{font-size:19px}
  .member-table__hourly{font-size:14px}
  .member-table__details td ul{font-size:14px}
  .member-table__cta td{padding:14px 8px}
  .member-table__cta .button{font-size:18px;padding:14px 8px}
  .calendar-grid{grid-template-columns:1fr 1fr}
}

@media (min-width:800px){
  .member-table{min-width:680px;font-size:18px}
  .member-table th,.member-table td{padding:14px 16px}
  .member-table thead th{font-size:24px}
  .member-table__flag{font-size:14px}
  .member-table tbody th{font-size:24px}
  .member-table td strong{font-size:29px}
  .member-table__annual-price{font-size:21px}
  .member-table__hourly{font-size:15px}
  .member-table__details td ul{font-size:16px}
  .member-table__cta td{padding:16px 10px}
  .member-table__cta .button{font-size:21px;padding:16px 10px}
  .calendar-grid{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:1100px){
  .calendar-grid{grid-template-columns:repeat(4,1fr)}
  .member-table{font-size:19px}
  .member-table th,.member-table td{padding:18px 22px}
  .member-table thead th{font-size:27px}
  .member-table__flag{font-size:15px}
  .member-table tbody th{font-size:27px}
  .member-table td strong{font-size:33px}
  .member-table__annual-price{font-size:24px}
  .member-table__hourly{font-size:16px}
  .member-table__details td ul{font-size:17px;line-height:1.6}
  .member-table__cta td{padding:18px 12px}
  .member-table__cta .button{font-size:24px;padding:18px 12px}
}
.membership-note{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;padding:26px 0 0;color:#42483f}
.membership-note strong{color:var(--forest)}
.section--kaboom{background:linear-gradient(180deg,#081d18,#07110f)}
.split__media img{width:100%;height:100%;max-height:620px;object-fit:cover}
.text-stats{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin:24px 0}
.text-stats span{padding:14px 0;border-top:1px solid var(--line);font:18px var(--display);letter-spacing:.05em;color:var(--gold-light)}
.section--golf{background:#090a09}
.section--more{background:var(--forest)}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.more-grid article{padding:26px;border-top:2px solid var(--gold);background:rgba(0,0,0,.18)}
.more-grid h3{font-size:32px}
.more-grid p{color:#d5ccbe}
.more-grid a{font:18px var(--display);letter-spacing:.07em;color:var(--gold-light);border-bottom:1px solid var(--gold)}
.signup{padding:58px 0;background:#0b0c0b;border-block:1px solid var(--line)}
.signup__grid{display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:center}
.signup h2{font-size:54px}
.signup__form{display:grid;grid-template-columns:1fr auto;gap:10px}
.signup__form label span{position:absolute;left:-9999px}
.signup__form input{width:100%;min-height:50px;background:#121612;color:var(--ivory);border:1px solid rgba(243,234,219,.4);padding:12px 16px}
.visit{padding:70px 0;background:#111311}
.visit__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:55px;align-items:center}
.visit img{max-height:440px;object-fit:cover}
.visit a:not(.button){color:var(--gold-light);text-decoration:underline}
.footer{padding:30px 0;background:#030403;border-top:1px solid var(--line)}
.footer__grid{display:grid;grid-template-columns:180px 1fr auto auto auto;align-items:center;gap:28px;font:16px var(--display);letter-spacing:.08em}
.footer img{width:160px;height:80px;object-fit:contain}
.social-links{display:flex;gap:14px}
.social-links a{color:var(--muted);transition:color .15s ease}
.social-links a:hover,.social-links a:focus-visible{color:var(--gold)}
.mobile-bar{display:none}

@media (max-width:1100px){
  .header__inner{grid-template-columns:160px 1fr auto}
  .logo img{width:150px}
  .nav{gap:14px}
  .offers-grid{grid-template-columns:1fr 1fr}
  .more-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:800px){
  body{padding-bottom:64px}
  .utility__inner{font-size:12px;gap:10px;padding:8px 0}
  .header__inner{height:70px;grid-template-columns:130px 1fr auto}
  .logo img{width:126px;height:58px}
  .nav{display:none;position:absolute;left:0;right:0;top:70px;background:#090a09;border-bottom:1px solid var(--line);padding:22px var(--pad);flex-direction:column;align-items:flex-start}
  .nav--open{display:flex}
  .header__cta{display:none}
  .menu{display:block;grid-column:3}
  .hero{min-height:700px;align-items:end}
  .hero__image{background-position:62% center}
  .hero__shade{background:linear-gradient(0deg,rgba(7,8,7,.99) 0%,rgba(7,8,7,.95) 38%,rgba(7,8,7,.26) 78%,rgba(7,8,7,.05) 100%)}
  .hero__copy{padding:280px 0 48px;max-width:100%}
  h1{font-size:78px}
  .hero__lead{font-size:18px}
  .hero__actions{display:grid;grid-template-columns:1fr 1fr}
  .hero__actions .button:first-child{grid-column:1/3}
  .promise p{font-size:26px;letter-spacing:.1em}
  .split,.split--reverse{grid-template-columns:1fr}
  .split--reverse .split__media,.split--reverse .split__copy{order:initial}
  .food-mosaic{min-height:470px}
  .section-head--split{grid-template-columns:1fr;gap:15px}
  .day{grid-template-columns:54px 1fr;gap:10px;min-height:110px;padding:15px 12px}
  .day>span{font-size:20px}
  .day strong{font-size:20px}
  .day small{font-size:12px;line-height:1.35}
  .offers-grid{grid-template-columns:1fr}
  .offer{min-height:300px}
  .more-grid{grid-template-columns:1fr}
  .signup__grid,.visit__grid{grid-template-columns:1fr}
  .signup__form{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;text-align:center;justify-items:center}
  .mobile-bar{position:fixed;display:grid;grid-template-columns:1fr 1fr;left:0;right:0;bottom:0;z-index:40;background:#030403;border-top:1px solid var(--gold)}
  .mobile-bar a{display:flex;align-items:center;justify-content:center;min-height:60px;font:20px var(--display);letter-spacing:.06em}
  .mobile-bar a:last-child{background:var(--gold);color:#111}
}

@media (max-width:520px){
  :root{--pad:18px}
  h1{font-size:68px}
  h2{font-size:48px}
  .section{padding:64px 0}
  .hero{min-height:680px}
  .hero__copy{padding-top:260px}
  .hero__actions{grid-template-columns:1fr}
  .hero__actions .button:first-child{grid-column:auto}
  .button{width:100%}
  .promise p{font-size:22px}
  .food-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:230px 160px;min-height:0}
  .food-mosaic img:first-child{grid-column:1/3;grid-row:auto}
  .day{grid-template-columns:1fr;align-content:start;min-height:155px}
  .day>span{font-size:22px}
  .day strong{font-size:18px}
  .day small{font-size:11px}
  .offers-grid{gap:12px}
  .offer{padding:22px}
  .text-stats{grid-template-columns:1fr}
  .signup h2{font-size:44px}
  .visit__grid{gap:28px}
}
.hero__image img{width:100%;height:100%;object-fit:cover}

/* Sub-page intro banner (menu, golf, memberships, parties, more, etc.) */
.page-intro{background:var(--forest);border-bottom:1px solid rgba(224,194,124,.32);padding:56px 0 44px}
.page-intro__back{display:inline-block;margin-bottom:20px;font:16px/1 var(--display);letter-spacing:.08em;color:var(--gold-light)}
.page-intro__back:hover{color:var(--ivory)}
.page-intro h1{font-size:clamp(48px,6vw,90px)}
.page-intro__lead{max-width:640px;color:#d9d0c2;font-size:clamp(17px,1.4vw,20px);margin:18px 0 0}
.page-cta{padding:0 0 clamp(70px,8vw,118px)}
@media (max-width:800px){
  .page-intro{padding:40px 0 32px}
}

/* Blog / articles (magazine layout). The whole .article wrapper (title
   band, hero image, content + sidebar) shares one continuous paper
   background -- a single light "page," editorial-site style (The
   Athletic / Golf.com), rather than separate light cards floating on
   the sitewide dark body background. Sitewide .page-intro on every
   OTHER sub-page is untouched and stays dark green. */
.article{background:var(--paper);padding-bottom:64px}
.article .page-intro{background:none;border-bottom:1px solid rgba(7,51,43,.18)}
.article .page-intro__back{color:var(--forest)}
.article .page-intro__back:hover{color:var(--forest-2)}
.article .page-intro h1{color:var(--forest)}
.article .page-intro__lead{color:#2c2e2a}
.article__byline{color:#6b6455;font:16px var(--display);letter-spacing:.06em}
/* Byline + share icons on one row, right above the hero image, instead
   of the share icons sitting atop the body text further down -- reads
   as "date · share this" the way most editorial sites place it. */
.article__meta-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:14px}
.article__hero{margin:0 auto 40px;max-width:1052px}
.article__hero img{width:100%;height:auto;display:block;border-radius:4px}

/* Content + sidebar area. This, .article__hero above, and
   .article__intro-inner below are deliberately capped to the SAME
   1052px (720 content + 32 gap + 300 sidebar) so the page-intro title
   band and hero image both line up with the two-column area under
   them, instead of the sitewide 1320px default -- if this number
   changes, update all three rules together. */
.article__intro-inner{max-width:1052px}
.article__layout{display:grid;grid-template-columns:1fr;gap:32px;max-width:1052px}
.article__main{min-width:0}
.article__body{max-width:none;margin:0;padding:48px 40px 0;color:#2c2e2a;font-size:20px;line-height:1.7}
.article__body p{margin:0 0 24px}
.article__share{display:flex;gap:10px;flex-shrink:0}
.article__share a,.article__share-copy{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(7,51,43,.08);color:var(--forest);border:none;cursor:pointer;transition:background .15s ease,color .15s ease}
.article__share a:hover,.article__share a:focus-visible,.article__share-copy:hover,.article__share-copy:focus-visible{background:var(--forest);color:var(--ivory)}
.article__share-copy.is-copied{background:var(--gold);color:#111}

.article__sidebar{display:flex;flex-direction:column;gap:24px}
.ad-tile{background:#fff;border-radius:8px;border-top:3px solid var(--gold);box-shadow:0 2px 10px rgba(7,51,43,.09);overflow:hidden;color:#2c2e2a}
.ad-tile img{width:100%;height:150px;object-fit:cover;display:block}
.ad-tile__body{padding:18px}
.ad-tile h4{font:24px var(--display);letter-spacing:.02em;margin:4px 0 8px;color:var(--forest)}
.ad-tile p{margin:0 0 14px;font-size:16px;line-height:1.5}
.ad-tile .button{width:100%;text-align:center;font-size:15px;padding:10px 12px}
.ad-tile .eyebrow{color:#6b6455;font-size:14px}
.recent-articles{list-style:none;margin:0;padding:0}
.recent-articles li{border-top:1px solid rgba(7,51,43,.12);padding:12px 0}
.recent-articles li:first-child{border-top:none;padding-top:8px}
.recent-articles a{color:#2c2e2a;font-size:16px;line-height:1.4;text-decoration:none}
.recent-articles a:hover{color:var(--forest)}
.recent-articles__flag{display:inline-block;margin-left:6px;font:12px var(--display);letter-spacing:.05em;color:#8a5a1a;background:rgba(199,160,82,.25);padding:2px 6px;border-radius:4px;vertical-align:middle}
.recent-articles li.is-current{cursor:default}
.recent-articles li.is-current strong{color:var(--forest);font-size:16px}
.recent-articles__current{display:inline-block;margin-left:6px;font:12px var(--display);letter-spacing:.05em;color:var(--ivory);background:var(--forest);padding:2px 7px;border-radius:4px;vertical-align:middle}

/* "This week" sidebar events tile -- reuses the same feed as
   /whats-on/ (see pinseeker_article_events_tile()), just a shorter
   7-day window rendered as a compact list instead of the wider
   .events-list grid (which is styled for the sitewide dark theme, not
   this white card). */
.sidebar-events{list-style:none;margin:0 0 14px;padding:0}
.sidebar-events li{padding:9px 0;border-top:1px solid rgba(7,51,43,.12)}
.sidebar-events li:first-child{border-top:none;padding-top:0}
.sidebar-events__date{display:block;font:14px var(--display);letter-spacing:.04em;color:var(--forest)}
.sidebar-events__title{display:block;font-size:16px;line-height:1.35;margin-top:2px}

/* Recent-articles block repeated at the end of the article body
   (in addition to the sidebar tile) -- a wider list, so it gets its
   own 2-column treatment on larger screens rather than reusing the
   sidebar's cramped single column. */
/* Responsive 16:9 embed wrapper for real official YouTube videos inside
   an article body -- embedding is the officially-sanctioned way to use
   third-party video (no rehosting), unlike the static reference images
   this project is more cautious about. */
.article__video{position:relative;aspect-ratio:16/9;margin:28px 0 8px;border-radius:6px;overflow:hidden;background:#000}
.article__video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.article__video-caption{margin:0 0 24px;color:#6b6455;font-size:15px}
/* Required photo-credit line for real, licensed reference photography
   (public domain / Creative Commons) -- sits directly under the image
   it credits, pulled tight against it (negative top margin cancels
   .article__body img's own bottom margin) since it's a caption, not a
   new block of body copy. */
.photo-credit{margin:-16px 0 24px;color:#6b6455;font-size:13px;font-style:italic}
.photo-credit a{color:inherit;text-decoration:underline;text-decoration-color:rgba(107,100,84,.5)}
.photo-credit a:hover,.photo-credit a:focus-visible{color:var(--forest);text-decoration-color:currentColor}

.article__more{margin:48px 0 0;padding-top:32px;border-top:1px solid rgba(7,51,43,.15)}
.article__more .recent-articles{margin-top:14px}
@media (min-width:600px){
  .article__more .recent-articles{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
  .article__more .recent-articles li:nth-child(2){border-top:none;padding-top:8px}
}

@media (min-width:1100px){
  .article__layout{grid-template-columns:720px 300px}
}
/* Sitewide h2 (clamp(44px,5vw,82px), uppercase) is sized for big section
   banners -- overwhelming and hard to read as an inline article
   subheading, especially for a full phrase rather than a short label.
   Editorial-appropriate size/case instead: a clear step up from body
   text, not a competing headline. */
.article__body h2{font-size:28px;line-height:1.25;text-transform:none;letter-spacing:.01em;color:var(--forest);margin:40px 0 18px}
.article__body h2:first-child{margin-top:0}
.article__float{float:right;width:44%;max-width:320px;margin:0 0 22px 28px}
.article__float-image{width:100%;height:auto;display:block;border-radius:4px}
.article__gallery,.article__body .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:36px 0 0;clear:both}
.article__body .gallery-item{margin:0}
.article__body .gallery img{width:100%;height:180px;object-fit:cover;border-radius:4px}
.article__tags{clear:both;margin-top:36px;padding-top:20px;border-top:1px solid rgba(7,51,43,.15);display:flex;gap:10px;flex-wrap:wrap}
.article__tags a{font:13px var(--display);letter-spacing:.05em;color:var(--forest);background:rgba(7,51,43,.08);padding:6px 14px;border-radius:999px}
.article__body img{width:100%;height:auto;display:block;border-radius:6px;margin:0 0 24px}

/* Multi-part series nav: "Part N of M" interlinks + previous/next --
   only rendered at all when an article has a _pinseeker_series value
   (see pinseeker_article_series_nav() in inc/articles.php). */
.article__series-nav{clear:both;margin:40px 0 0;padding-top:28px;border-top:1px solid rgba(7,51,43,.15)}
.series-nav__list{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:10px 0 22px;padding:0}
.series-nav__list a,.series-nav__list li.is-current span{display:inline-block;font:14px var(--display);letter-spacing:.05em;padding:7px 15px;border-radius:999px}
.series-nav__list a{color:var(--forest);background:rgba(7,51,43,.08);text-decoration:none}
.series-nav__list a:hover{background:var(--forest);color:var(--ivory)}
.series-nav__list li.is-current span{background:var(--forest);color:var(--ivory)}
.series-nav__prevnext{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.series-nav__prev,.series-nav__next{font:16px var(--display);letter-spacing:.02em;color:var(--forest);text-decoration:none;max-width:48%}
.series-nav__prev:hover,.series-nav__next:hover{text-decoration:underline}
.series-nav__next{margin-left:auto;text-align:right}
/* Same tiered-breakpoint scaling already used elsewhere (e.g. the
   memberships table) rather than a fluid clamp(), for consistency --
   base size is tuned for mobile, steps up at the same 800/1100px tiers.
   Column width (max-width:680px above) deliberately does NOT widen here
   -- a readable ~65-75 character line length is the point of a narrow
   article column, at any viewport size. */
@media (min-width:800px){
  .article__body{font-size:21px}
  .article__body h2{font-size:30px}
}
@media (min-width:1100px){
  .article__body{font-size:22px}
  .article__body h2{font-size:32px}
}
@media (max-width:700px){
  .article__float{float:none;width:100%;max-width:none;margin:0 0 22px}
  .article__gallery,.article__body .gallery{grid-template-columns:1fr 1fr}
  .article__body{padding:32px 22px 0}
}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{background:rgba(0,0,0,.18);border-top:2px solid var(--gold)}
.blog-card__media{display:block;aspect-ratio:16/10;overflow:hidden;background:rgba(0,0,0,.3)}
.blog-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card__body{padding:22px}
.blog-card__body h3{font-size:24px;margin:6px 0 8px}
.blog-card__body p{color:#d5ccbe}
.blog-card__link{display:inline-block;margin-top:10px;font:15px var(--display);letter-spacing:.06em;color:var(--gold-light);border-bottom:1px solid var(--gold)}
@media (max-width:1100px){
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .blog-grid{grid-template-columns:1fr}
}

/* Legacy content widget — temporary/dev only, deliberately muted so it
   never reads as a real site feature. See functions.php PINSEEKER_SHOW_LEGACY_WIDGET. */
.legacy-widget{position:fixed;right:16px;bottom:24px;z-index:50;font-family:var(--body)}
.legacy-widget__toggle{display:flex;align-items:center;gap:8px;background:#1b1d1a;color:#a49c8e;border:1px solid rgba(183,175,162,.4);border-radius:999px;padding:9px 16px;font-size:13px;letter-spacing:.04em;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.legacy-widget__toggle:hover{color:var(--ivory);border-color:rgba(183,175,162,.7)}
.legacy-widget__panel{display:none;position:absolute;right:0;bottom:calc(100% + 10px);width:230px;background:#1b1d1a;border:1px solid rgba(183,175,162,.35);border-radius:10px;padding:10px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.legacy-widget--open .legacy-widget__panel{display:block}
.legacy-widget__panel a{display:block;padding:9px 10px;border-radius:6px;font-size:14px;color:#c9c2b4}
.legacy-widget__panel a:hover{background:rgba(255,255,255,.06);color:var(--ivory)}
.legacy-widget__panel small{display:block;padding:4px 10px 8px;color:#7a746a;font-size:11px;letter-spacing:.06em}
@media (max-width:800px){
  .legacy-widget{bottom:76px}
}

/* /legacy/ archive page */
.legacy-section{padding:36px 0;border-bottom:1px solid rgba(224,194,124,.18)}
.legacy-section h2{font-size:clamp(28px,3vw,40px);margin-bottom:10px}
.legacy-section ul{margin:12px 0 0;padding:0;list-style:none}
.legacy-section li{padding:8px 0;color:#c8c0b3;border-top:1px solid rgba(224,194,124,.12)}

/* /faq/ page */
.faq-item{padding:28px 0;border-bottom:1px solid rgba(224,194,124,.18)}
.faq-item h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:10px}
.faq-item p{color:#d1c8ba;margin:0}

/* Video placeholder — same idea as the placeholder photos: real asset TBD */
.video-placeholder{position:relative;max-width:900px;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line)}
.video-placeholder img{width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.video-placeholder__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:74px;height:74px;border-radius:50%;background:rgba(199,160,82,.92);color:#111;display:flex;align-items:center;justify-content:center;font-size:26px;padding-left:4px}
.video-placeholder__label{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:16px/1 var(--display);letter-spacing:.1em;color:var(--gold-light);white-space:nowrap}
.legacy-note{display:inline-block;margin-top:10px;padding:6px 12px;border:1px solid rgba(224,194,124,.35);border-radius:999px;font:14px var(--display);letter-spacing:.04em;color:var(--gold-light)}

/* Native forms (see inc/forms.php) */
.form-grid{display:grid;gap:18px;max-width:640px;margin-top:20px}
.form-grid>label{display:grid;gap:6px}
.form-grid>label>span{font:14px/1 var(--display);letter-spacing:.06em;color:var(--gold-light)}
.form-grid input[type="text"],.form-grid input[type="email"],.form-grid input[type="tel"],.form-grid input[type="date"],.form-grid select,.form-grid textarea{min-height:48px;background:#121612;color:var(--ivory);border:1px solid rgba(243,234,219,.4);padding:10px 14px;color-scheme:dark;font-family:var(--body);font-size:16px}
.form-grid textarea{min-height:96px;resize:vertical}
.form-grid fieldset{border:1px solid rgba(224,194,124,.3);padding:16px;display:flex;flex-wrap:wrap;gap:10px 20px;margin:0}
.form-grid legend{padding:0 8px;font:15px var(--display);letter-spacing:.06em;color:var(--gold-light)}
.form-grid .checkbox{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:#d1c8ba;cursor:pointer;line-height:1.4}
.form-grid .checkbox input{width:auto;min-height:0;margin-top:3px;flex-shrink:0}
.form-grid button{justify-self:start}
.native-form__thanks{font:24px/1.1 var(--display);letter-spacing:.04em;color:var(--gold-light);margin:0}
/* Honeypot field (see pinseeker_honeypot_field() in inc/forms.php) --
   positioned off-screen rather than display:none/opacity:0, which some
   spam bots specifically check for and skip. */
.native-form__hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* Upcoming events list (see inc/calendar.php) */
.events-list{display:grid;gap:1px;background:rgba(224,194,124,.22);border:1px solid rgba(224,194,124,.4);margin-top:20px}
.events-list__item{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;padding:16px 20px;background:rgba(6,22,18,.45)}
.events-list__item time{font:17px/1.2 var(--display);letter-spacing:.03em;color:var(--gold)}
.events-list__item strong{display:block;font:20px var(--display);letter-spacing:.03em}
.events-list__item small{display:block;margin-top:4px;color:#c8c0b3;letter-spacing:.06em}
@media (max-width:600px){
  .events-list__item{grid-template-columns:1fr;gap:6px}
}

/* /golf-ball-promo/ */
.promo-steps{list-style:none;counter-reset:promo-step;margin:20px 0;padding:0;display:grid;gap:14px}
.promo-steps li{counter-increment:promo-step;padding-left:44px;position:relative;color:#d5ccbe}
.promo-steps li::before{content:counter(promo-step);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#111;font:18px/30px var(--display);text-align:center}