/*
Theme Name:   Keowee Child
Theme URI:    https://keoweemarina.com
Description:  Child theme of Hello Elementor for Keowee Marina, Keowee Luxury Cottages and Palmetto Paradise Houseboat. Holds the design tokens and the self-hosted fonts only; layout is built in Elementor Pro.
Author:       Hawk Web Marketing
Author URI:   https://hawkwebmarketing.com
Template:     hello-elementor
Version:      1.0.0
Requires PHP: 7.4
Text Domain:  keowee-child
License:      GNU General Public License v2 or later
*/

/* ------------------------------------------------------------------
   Fonts, self-hosted (no Google Fonts request).
   Variable woff2, latin subset. Family names match the Google names so
   picking "Plus Jakarta Sans" / "Inter" in Elementor Global Fonts uses
   these files. Licences: assets/fonts/LICENSE-*.txt (SIL OFL 1.1).
   ------------------------------------------------------------------ */
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url('assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations'),
	     url('assets/fonts/plus-jakarta-sans-latin-wght-normal.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-display: swap;
	font-weight: 100 900;
	src: url('assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'),
	     url('assets/fonts/inter-latin-wght-normal.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;
}

/* ------------------------------------------------------------------
   Design tokens (handoff section 2.1).
   Mirror the colours into Elementor > Site Settings > Global Colors and
   the fonts into Global Fonts. Widgets read these; never hard-code.
   ------------------------------------------------------------------ */
:root {
	/* colour */
	--sky:        #DDF1F8;   /* page tints            */
	--blue:       #0E7FB8;
	--blue-deep:  #085B86;
	--navy:       #0B3954;   /* CTA + footer          */
	--navy-deep:  #062A3F;
	--ink:        #123A4E;   /* body copy             */
	--dim:        #4E7285;   /* secondary copy        */
	--teal:       #1B7F8E;   /* primary button        */
	--teal-deep:  #136674;   /* button hover          */
	--aqua:       #8FE3EC;   /* accent on dark        */
	--sun:        #FFA928;   /* badges                */

	/* shape */
	--radius:     22px;      /* every card and button */
	--shadow:     0 16px 44px rgba(11,57,84,.14);
	--shadow-sm:  0 8px 24px rgba(11,57,84,.10);

	/* type */
	--head: 'Plus Jakarta Sans', system-ui, sans-serif;   /* 500, 600, 700, 800 */
	--body: 'Inter', system-ui, sans-serif;               /* 400, 500, 600 */

	/* layout */
	--container: 1180px;
	--gutter:    clamp(18px, 4vw, 40px);
	--section-y: 96px;       /* 70px under 768px, below */

	/* from the design source (home-v2.html), used by glass header / buttons */
	--glass:     rgba(255,255,255,.58);
	--glass-brd: rgba(255,255,255,.85);
	--line:      #DCEDF4;    /* hairline borders on white sections */
	--page:      #F3FAFD;    /* page background */
}

@media (max-width: 767px) {
	:root { --section-y: 70px; }
}

/* ------------------------------------------------------------------
   Base. Kept minimal: Elementor's global kit is the main source of type
   styles. These are the fallbacks for anything outside Elementor.
   ------------------------------------------------------------------ */
body {
	font-family: var(--body);
	font-size: 16.5px;
	color: var(--ink);
	background: var(--page);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--head);
	color: var(--navy);
	line-height: 1.1;
	font-weight: 700;
}

/* "letter-spacing:-.02em on anything 28px and up" — h1/h2 always are.
   For smaller tags set larger in Elementor, add the class km-tight. */
h1, h2, .km-tight { letter-spacing: -.02em; }