/*
Theme Name:   Gun & Country Club
Theme URI:    https://gcclub.org.pk
Description:  Child theme for Gun & Country Club. Holds the design system — palette, type scale, spacing rhythm and base styles. Every hand-coded page block inherits from here, and Club Core's shortcodes read the same custom properties, so the identity is defined once.
Author:       Your Studio
Template:     hello-elementor
Version:      1.31.0
License:      GPL-2.0-or-later
Text Domain:  club-child
*/

/* ==========================================================================
   1. Design tokens

   Change a value here and it changes everywhere — hand-coded sections,
   Club Core shortcode output, and Elementor widgets alike.
   ========================================================================== */

:root {

	/* ---- Palette ----
	   Read from the approved design's own markup (uxpilot share link,
	   22 Sep 2026), not sampled from a picture. Cream is the page itself;
	   sand and the dark green are the bands laid over it. */
	--club-olive:        #1F3327;   /* headings, and the dark bands       */
	--club-olive-deep:   #12190F;   /* footer, and the hero's overlay     */
	--club-cream:        #F7F3EA;   /* the page ground                    */
	--club-sand:         #EFE8D6;   /* the alternate band                 */
	--club-white:        #FFFFFF;   /* cards, which sit on both           */
	--club-ink:          #1F3327;   /* body copy                          */
	--club-brass:        #B98D34;   /* section labels, marks              */
	--club-gold:         #E3C98A;   /* labels on dark                     */
	--club-taupe:        #5B6350;   /* secondary text, card copy          */
	--club-sage:         #C9D0BF;   /* footer text on near-black          */

	/* The design sets its section labels in #B98D34 at 12px, which reads at
	   2.7:1 on cream where 4.5:1 is the floor. Same hue, darkened until it
	   passes on cream, sand and white (5.5 / 4.8 / 6.1). Small text on a
	   light ground uses this; rules, borders and marks keep the design's
	   gold, where contrast does not apply. */
	--club-brass-text:   #7E5C1B;

	/* Derived tints. Defined here so nothing is invented further down. */
	--club-ink-soft:     rgba(91, 99, 80, 1);
	--club-line:         rgba(31, 51, 39, 0.10);
	--club-line-strong:  rgba(31, 51, 39, 0.30);
	--club-cream-soft:   rgba(247, 243, 234, 0.75);
	--club-line-on-dark: rgba(247, 243, 234, 0.15);
	--club-shadow-sm:    0 1px 3px rgba(31, 51, 39, 0.08);
	--club-shadow-lg:    0 10px 26px rgba(31, 51, 39, 0.14);

	/* ---- Typefaces ----
	   The design pairs Playfair Display with Inter, and uses Inter for its
	   small uppercase labels too, so there is no third family. */
	--club-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--club-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--club-font-label:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* ---- Type scale ----
	   The design's own sizes: a 64px hero, section headings at 30 → 36, and
	   card titles at 18. Smaller and quieter than before. */
	--club-size-hero:    clamp(2.375rem, 1.5rem + 3.6vw, 4rem);    /* 38 → 64 */
	--club-size-h1:      clamp(2rem, 1.4rem + 2.4vw, 3rem);        /* 32 → 48 */
	--club-size-h2:      clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);  /* 28 → 36 */
	--club-size-h3:      clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); /* 22 → 28 */
	--club-size-h4:      1.125rem;                                  /* 18 — card titles */
	--club-size-h5:      1rem;                                      /* 16 */
	--club-size-body:    1rem;                                      /* 16 */
	--club-size-small:   0.875rem;                                  /* 14 */
	--club-size-label:   0.75rem;                                   /* 12 */

	--club-tracking-label: 0.18em;
	--club-tracking-tight: -0.012em;

	/* ---- Rhythm ----
	   One section padding value, used everywhere. This single piece of
	   discipline is most of why a long page still reads as composed. */
	--club-section:      96px;
	--club-section-tight: 72px;
	--club-container:    1440px;
	--club-gutter:       48px;
	--club-gap:          28px;

	/* The design rounds the large cards at 16px, the small tiles at 12px,
	   and every button into a pill. */
	/* Sampled from the Club's own photograph of itself: the brick course that
	   runs round the building below the roof line. Its one job on the site is
	   to draw that same course at the head of every dark band. */
	--club-terracotta:   #B05438;

	--club-radius:       3px;
	--club-radius-sm:    2px;
	--club-radius-pill:  4px;

	/* ---- Club Core bridge ----
	   The plugin styles its output through these names. Mapping them here
	   means every shortcode inherits the identity with no override CSS. */
	--club-accent:          var(--club-olive);
	--club-font-title:      var(--club-font-display);
	--club-title-size:      var(--club-size-h4);
	--club-label-size:      var(--club-size-label);
	--club-label-tracking:  var(--club-tracking-label);
}

@media (max-width: 680px) {
	:root {
		--club-section:       64px;
		--club-section-tight: 48px;
		--club-gutter:        22px;
		--club-gap:           22px;
	}
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
	background: var(--club-cream);
	color: var(--club-ink);
	font-family: var(--club-font-body);
	font-size: var(--club-size-body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--club-font-display);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: var(--club-tracking-tight);
	color: var(--club-olive);
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: var(--club-size-h1); }
h2 { font-size: var(--club-size-h2); }
h3 { font-size: var(--club-size-h3); }
h4 { font-size: var(--club-size-h4); line-height: 1.25; }
h5 { font-size: var(--club-size-h5); line-height: 1.3; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--club-brass);
	outline-offset: 3px;
	border-radius: 2px;
}

img { max-width: 100%; height: auto; display: block; }

/* Wide content never pushes the page sideways. */
table, pre { display: block; max-width: 100%; overflow-x: auto; }

/* ==========================================================================
   3. Layout primitives

   The small set of classes every hand-coded block is built from.
   ========================================================================== */

.club-wrap {
	max-width: var(--club-container);
	margin-inline: auto;
	padding-inline: var(--club-gutter);
}

.club-wrap--narrow { max-width: 960px; }

.club-section { padding-block: var(--club-section); }
.club-section--tight { padding-block: var(--club-section-tight); }

/* The alternating grounds that give a long page its rhythm. Cream is the page
   itself; sand is the band laid over it; olive and deep are the dark bands. */
.club-section--cream { background: var(--club-cream); }
.club-section--sand  { background: var(--club-sand); }
.club-section--white { background: var(--club-white); }

/* The brick course from the Club's own walls, at the head of each dark band. */
.club-section--olive,
.club-section--deep {
	border-top: 4px solid var(--club-terracotta);
}

/* The dark bands carry a khatam lattice — the eight-point star of the
   region's own architecture — at a weight you notice only once you look. */
.club-section--olive {
	background:
		linear-gradient(rgba(31, 51, 39, 0.94), rgba(31, 51, 39, 0.94)),
		url('assets/jali.svg') 0 0 / 118px 118px repeat,
		var(--club-olive);
	color: var(--club-cream-soft);
}

.club-section--olive h1,
.club-section--olive h2,
.club-section--olive h3,
.club-section--olive h4,
.club-section--olive h5 {
	color: var(--club-cream);
}

.club-section--deep {
	background: var(--club-olive-deep);
	color: var(--club-cream-soft);
}

/* Running text stays readable — never full container width. */
.club-lede {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--club-ink-soft);
	max-width: 62ch;
}

.club-section--olive .club-lede,
.club-section--deep .club-lede { color: var(--club-cream-soft); }

/* Contact details printed from Site Details, one span per detail. An empty
   detail leaves no gap, and the space after the address only shows when there
   is an address. */
.club-contact__line { display: block; }
.club-contact__line:empty { display: none; }
.club-contact__line:not(:empty) + .club-contact__line--gap { margin-top: 1em; }

/* label="Fax" and the like: a quiet prefix, only printed when there is a value. */
.club-contact__label {
	font-family: var(--club-font-label);
	font-size: var(--club-size-label);
	letter-spacing: var(--club-tracking-label);
	text-transform: uppercase;
	opacity: 0.7;
	margin-right: 6px;
}

.club-contact--links a { border-bottom: 1px solid var(--club-line-on-dark); }
.club-contact--links a:hover { border-color: var(--club-gold); color: var(--club-gold); }

/* ==========================================================================
   4. Typographic devices
   ========================================================================== */

/* The uppercase label that sits above almost every section heading. */
.club-eyebrow {
	display: block;
	font-family: var(--club-font-label);
	font-size: var(--club-size-label);
	font-weight: 500;
	letter-spacing: var(--club-tracking-label);
	text-transform: uppercase;
	color: var(--club-brass-text);
	margin-bottom: 14px;
}

.club-section--olive .club-eyebrow,
.club-section--deep .club-eyebrow { color: var(--club-gold); }

/* Gold emphasis inside a display heading — the hero's second line. */
.club-accent { color: var(--club-gold); font-style: normal; }

.club-section-head { margin-bottom: 56px; }
.club-section-head--center { text-align: center; }
.club-section-head--center .club-lede { margin-inline: auto; }

/* The short gold rule the design sets under every section heading. */
.club-rule-short {
	display: block;
	width: 56px;
	height: 1px;
	background: var(--club-brass);
	margin: 24px 0;
}

.club-section-head--center .club-rule-short { margin-inline: auto; }

.club-section--olive .club-rule-short,
.club-section--deep .club-rule-short { background: var(--club-gold); }

.club-rule {
	border: 0;
	border-top: 1px solid var(--club-line);
	margin-block: var(--club-section-tight);
}

.club-section--olive .club-rule,
.club-section--deep .club-rule { border-color: var(--club-line-on-dark); }

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.club-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--club-font-label);
	font-size: var(--club-size-label);
	font-weight: 500;
	letter-spacing: var(--club-tracking-label);
	text-transform: uppercase;
	padding: 15px 30px;
	border: 1px solid var(--club-olive);
	background: var(--club-olive);
	color: var(--club-cream);
	border-radius: var(--club-radius-pill);
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.club-btn:hover {
	background: var(--club-olive-deep);
	border-color: var(--club-olive-deep);
	color: var(--club-cream);
}

.club-btn--ghost {
	background: transparent;
	color: var(--club-olive);
}

/* The design's filled gold pill, for the one action it wants taken. */
.club-btn--gold {
	background: var(--club-brass);
	border-color: var(--club-brass);
	color: #FFFFFF;
}

.club-btn--gold:hover {
	background: var(--club-brass-text);
	border-color: var(--club-brass-text);
	color: #FFFFFF;
}

/* Its quieter companion: an outline in the hairline grey the design uses. */
.club-btn--quiet {
	background: transparent;
	border-color: var(--club-line-strong);
	color: var(--club-ink);
}

.club-btn--quiet:hover {
	background: transparent;
	border-color: var(--club-olive);
	color: var(--club-olive);
}

.club-btn--ghost:hover {
	background: var(--club-olive);
	color: var(--club-cream);
}

/* On dark grounds the pair inverts. */
.club-section--olive .club-btn,
.club-section--deep .club-btn,
.club-btn--on-dark {
	background: var(--club-cream);
	border-color: var(--club-cream);
	color: var(--club-olive);
}

.club-section--olive .club-btn:hover,
.club-section--deep .club-btn:hover,
.club-btn--on-dark:hover {
	background: var(--club-gold);
	border-color: var(--club-gold);
	color: var(--club-olive-deep);
}

.club-section--olive .club-btn--ghost,
.club-section--deep .club-btn--ghost,
.club-btn--ghost.club-btn--on-dark {
	background: transparent;
	border-color: var(--club-line-on-dark);
	color: var(--club-cream);
}

.club-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

/* A quieter text link with a rule under it. */
.club-link {
	display: inline-block;
	font-family: var(--club-font-label);
	font-size: var(--club-size-label);
	font-weight: 500;
	letter-spacing: var(--club-tracking-label);
	text-transform: uppercase;
	color: var(--club-olive);
	border-bottom: 1px solid var(--club-brass);
	padding-bottom: 4px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.club-link:hover { color: var(--club-brass); }

.club-section--olive .club-link,
.club-section--deep .club-link {
	color: var(--club-cream);
	border-color: var(--club-gold);
}

/* ==========================================================================
   6. Grid
   ========================================================================== */

.club-grid {
	display: grid;
	gap: var(--club-gap);
	grid-template-columns: repeat(var(--club-cols, 3), minmax(0, 1fr));
}

.club-grid--2 { --club-cols: 2; }
.club-grid--3 { --club-cols: 3; }
.club-grid--4 { --club-cols: 4; }

@media (max-width: 1024px) {
	.club-grid { grid-template-columns: repeat(min(var(--club-cols, 3), 2), minmax(0, 1fr)); }
}

@media (max-width: 680px) {
	.club-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Consistent media boxes, so cards line up whatever the image. */
.club-media {
	overflow: hidden;
	background: var(--club-line);
	border-radius: var(--club-radius);
}

.club-media > img { width: 100%; height: 100%; object-fit: cover; }

.club-media--4x3 { aspect-ratio: 4 / 3; }
.club-media--3x2 { aspect-ratio: 3 / 2; }
.club-media--1x1 { aspect-ratio: 1 / 1; }
.club-media--16x9 { aspect-ratio: 16 / 9; }

/* ==========================================================================
   7. Club Core output on dark grounds

   The plugin styles its body text for a light ground, which is right almost
   everywhere. Inside a dark section those colours would put olive on olive,
   so the theme — which owns the grounds — states the contract explicitly.
   ========================================================================== */

/* The plugin sets its small labels in gold, which only reads on a dark
   ground. Since the design draws every card in white — even inside a dark
   band — anything on a card needs the darker brass instead. Two classes
   deep, so this beats the plugin's own single-class rule. */
.club-section :is(
	.club-event__date,
	.club-facility__index,
	.club-person__role,
	.club-doc__ref,
	.club-reciprocal__place,
	.club-doc__soon,
	.club-timing__hours
) {
	color: var(--club-brass-text);
}

/* Timings are the one list that sits straight on the dark band rather than
   on a card, so there the gold is right. Same weight as the rule above, so
   it has to come after it. */
.club-section--olive .club-timing__hours,
.club-section--deep  .club-timing__hours {
	color: var(--club-gold);
}

.club-section--olive :is(
	.club-outlet__tagline,
	.club-outlet__hours,
	.club-facility__summary,
	.club-facility__timings,
	.club-event__meta,
	.club-event__summary,
	.club-person__role,
	.club-doc__summary,
	.club-empty
),
.club-section--deep :is(
	.club-outlet__tagline,
	.club-outlet__hours,
	.club-facility__summary,
	.club-facility__timings,
	.club-event__meta,
	.club-event__summary,
	.club-person__role,
	.club-doc__summary,
	.club-empty
) {
	color: var(--club-cream-soft);
}

/* Names in plugin lists sit on the dark ground at full cream. */
.club-section--olive :is( .club-timing__name, .club-reciprocal__name ),
.club-section--deep  :is( .club-timing__name, .club-reciprocal__name ) {
	color: var(--club-cream);
}

/* Labels and dates take the gold, which reads on olive. */
.club-section--olive :is( .club-event__date, .club-facility__index, .club-doc__ref, .club-reciprocal__place ),
.club-section--deep  :is( .club-event__date, .club-facility__index, .club-doc__ref, .club-reciprocal__place ) {
	color: var(--club-gold);
}

/* Hairlines inside the plugin's lists need the on-dark value too. */
.club-section--olive,
.club-section--deep {
	--club-line: var(--club-line-on-dark);
}

/* ==========================================================================
   8. Cards, and what they do on hover

   The design draws every repeating item as a white card on the cream or sand
   ground: 16px corners, a hairline, a soft shadow, and the picture bleeding
   to the card's own edges.

   On hover the shadow deepens and the picture grows a little inside its
   frame. The card itself does NOT move — the design has no lift, and adding
   one was what made the first attempt feel wrong.

   Only grid cards take this. The numbered sports list shares the
   .club-facility class but is a list of rows, so it is left alone.
   ========================================================================== */

.club-outlet,
.club-person,
.club-facilities--grid .club-facility,
.club-events--grid .club-event {
	background: var(--club-white);
	border: 1px solid var(--club-line);
	border-radius: var(--club-radius);
	overflow: hidden;
	box-shadow: var(--club-shadow-sm);
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.club-outlet:hover,
.club-person:hover,
.club-facilities--grid .club-facility:hover,
.club-events--grid .club-event:hover {
	box-shadow: var(--club-shadow-lg);
}

/* The picture already sits flush to the card edge, so it loses its own
   rounding and its bottom margin. */
.club-outlet__media,
.club-person__media,
.club-facilities--grid .club-facility__media,
.club-events--grid .club-event__media {
	border-radius: 0;
	margin-bottom: 0;
}

/* Text gets the design's p-6. */
.club-outlet__body,
.club-facilities--grid .club-facility__body,
.club-events--grid .club-event__body {
	padding: 24px;
}

.club-person { text-align: center; }
.club-person .club-person__name { padding-inline: 20px; }
.club-person .club-person__role { padding: 0 20px 24px; }

/* The picture grows inside the frame that clips it. */
.club-outlet__media > img,
.club-person__media > img,
.club-facility__media > img,
.club-event__media > img {
	transition: transform 0.5s ease;
}

.club-outlet:hover .club-outlet__media > img,
.club-person:hover .club-person__media > img,
.club-facilities--grid .club-facility:hover .club-facility__media > img,
.club-events--grid .club-event:hover .club-event__media > img {
	transform: scale(1.05);
}

/* A picture that is not in a card grows on its own hover. */
.club-media > img { transition: transform 0.5s ease; }
.club-media:hover > img { transform: scale(1.04); }

/* A card on a dark band keeps its ground, so its own text colours hold. */
.club-section--olive :is(.club-outlet, .club-person, .club-facility, .club-event),
.club-section--deep  :is(.club-outlet, .club-person, .club-facility, .club-event) {
	border-color: rgba(31, 51, 39, 0.10);
}

.club-section--olive :is(.club-outlet, .club-event) :is(.club-outlet__title, .club-event__title) a,
.club-section--deep  :is(.club-outlet, .club-event) :is(.club-outlet__title, .club-event__title) a {
	color: var(--club-olive);
}

.club-section--olive :is(.club-outlet__tagline, .club-event__summary, .club-event__meta, .club-person__role),
.club-section--deep  :is(.club-outlet__tagline, .club-event__summary, .club-event__meta, .club-person__role) {
	color: var(--club-taupe);
}

@media (prefers-reduced-motion: reduce) {
	.club-outlet,
	.club-person,
	.club-facility,
	.club-event,
	.club-media > img,
	.club-outlet__media > img,
	.club-person__media > img,
	.club-facility__media > img,
	.club-event__media > img {
		transition: none !important;
		transform: none !important;
	}
}

/* ==========================================================================
   9. Hello Elementor corrections

   The parent theme and Elementor both assume a container width. Ours wins.
   ========================================================================== */

.e-con, .elementor-section-wrap { max-width: none; }

/* Elementor's HTML widget wraps our markup — make it transparent to layout. */
.elementor-widget-html,
.elementor-widget-html > .elementor-widget-container { display: contents; }

/* With the wrapper gone, each block is a flex item of the Elementor container.
   Containers default to a wrapping column, and a wrapping column is as wide as
   its widest item's content: on a 375px phone the utility bar stretched every
   block to 616px. Cap blocks at the container's width. :where() keeps this at
   zero specificity, so a block that sets its own max-width still wins. */
:where(.elementor-widget-html, .elementor-widget-html > .elementor-widget-container) > * { max-width: 100%; }


/* Premium facility and dining cards: photograph, name and inset gold frame. */
:is(.club-facilities--grid .club-facility, .club-outlet):has([class$="__media"]){position:relative;isolation:isolate;height:480px;border:0;border-radius:0;background:#1f3327;box-shadow:none;overflow:hidden}
:is(.club-facilities--grid .club-facility, .club-outlet):has([class$="__media"])::after{content:"";position:absolute;inset:8px;border:1px solid #d9bc72;opacity:0;z-index:3;pointer-events:none;transition:inset 550ms ease,opacity 550ms ease}
:is(.club-facilities--grid .club-facility, .club-outlet):has([class$="__media"]):is(:hover,:focus-within)::after{inset:16px;opacity:1}
:is(.club-facilities--grid .club-facility__media,.club-outlet__media){position:absolute;inset:0;height:100%;aspect-ratio:auto;margin:0}
:is(.club-facilities--grid .club-facility__media,.club-outlet__media)::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#08160f05 25%,#08160f3d 55%,#08160fcf);pointer-events:none}
:is(.club-facilities--grid .club-facility__media,.club-outlet__media) img{width:100%;height:100%;object-fit:cover}
:is(.club-facilities--grid .club-facility__body,.club-outlet:has(.club-outlet__media) .club-outlet__body){position:absolute;inset:auto 0 0;padding:44px 30px 54px;text-align:center;z-index:2;pointer-events:none}
:is(.club-facilities--grid .club-facility__title,.club-outlet:has(.club-outlet__media) .club-outlet__title){margin:0;font:500 clamp(25px,2.2vw,34px)/1.25 var(--club-font-title);color:#fff9ed;text-shadow:0 2px 14px #0006}
:is(.club-facilities--grid .club-facility__title,.club-outlet:has(.club-outlet__media) .club-outlet__title) a{color:inherit;pointer-events:auto;text-decoration:none}
:is(.club-facilities--grid .club-facility__title,.club-outlet:has(.club-outlet__media) .club-outlet__title) a::after{content:"";position:absolute;inset:0}
@media(max-width:680px){:is(.club-facilities--grid .club-facility,.club-outlet):has([class$="__media"]){height:420px}}
@media(hover:none){:is(.club-facilities--grid .club-facility,.club-outlet):has([class$="__media"])::after{inset:14px;opacity:.65}}
@media(prefers-reduced-motion:reduce){:is(.club-facilities--grid .club-facility,.club-outlet)::after{transition:none}}