/* Start custom CSS *//* =========================================================
   TWIN SAILS — SITE-WIDE BRAND STYLING
   Applies the On Tap page brand language globally:
   - Gotham typography
   - Uppercase letter-spaced headings
   - Navy body text, deep teal headings
   - Brand red links, buttons, and accents
   - 2px squared corners on interactive elements

   Last updated: May 2026

   NOTE: WPForms form styling is handled in a separate
   stylesheet and is NOT affected by this file.
   ========================================================= */


/* ---------------------------------------------------------
   1. BRAND VARIABLES (available globally for any custom CSS)
   --------------------------------------------------------- */
:root {
  --ts-ink:        #283645;   /* primary navy — body text */
  --ts-ink-deep:   #001e24;   /* deep teal — headings */
  --ts-ink-soft:   #6e7a87;   /* muted gray — captions, meta */
  --ts-accent:     #ce3a2b;   /* brand red — CTAs, links, accents */
  --ts-accent-hover: #001e24; /* hover transitions to deep teal */
  --ts-paper:      #ffffff;   /* white */
  --ts-rule:       #d8dde2;   /* hairline divider */
  --ts-bg-soft:    #f7f8f9;   /* subtle off-white */

  --ts-font-stack: "Gotham", "Gotham Book", "GothamBook", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/* ---------------------------------------------------------
   2. BODY & BASE TYPOGRAPHY
   --------------------------------------------------------- */
body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor p {
  font-family: var(--ts-font-stack) !important;
  color: var(--ts-ink);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
}

p {
  color: var(--ts-ink);
  margin-bottom: 1em;
}

/* Muted/secondary text */
small,
.text-muted,
.elementor-widget-text-editor small {
  color: var(--ts-ink-soft);
  font-size: 0.85rem;
}


/* ---------------------------------------------------------
   3. HEADINGS — uppercase, letter-spaced (On Tap aesthetic)
   --------------------------------------------------------- */
h1, h2, h3, h4, h5
.elementor-heading-title {
  font-family: var(--ts-font-stack) !important;
  color: var(--ts-ink-deep) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  line-height: 1.2 !important;
  margin-top: 0;
  margin-bottom: 0.5em;
}

/* Heading size hierarchy */
h1, .elementor-widget-heading h1.elementor-heading-title {
  font-size: 2.5rem !important;
  letter-spacing: 0.1em !important;
}

h2, .elementor-widget-heading h2.elementor-heading-title {
  font-size: 1.875rem !important;
  letter-spacing: 0.12em !important;
}

h3, .elementor-widget-heading h3.elementor-heading-title {
  font-size: 1.375rem !important;
  letter-spacing: 0.14em !important;
}

h4, .elementor-widget-heading h4.elementor-heading-title {
  font-size: 1.125rem !important;
  letter-spacing: 0.16em !important;
}

h5, .elementor-widget-heading h5.elementor-heading-title {
  font-size: 1.125rem !important;
  letter-spacing: 0.16em !important;
}

h6, .elementor-widget-heading h6.elementor-heading-title {
  font-size: 1.375rem !important;
  letter-spacing: 0.14em !important;
}

/* Mobile: scale headings down for narrow screens */
@media (max-width: 540px) {
  h1, .elementor-widget-heading h1.elementor-heading-title { font-size: 1.875rem !important; }
  h2, .elementor-widget-heading h2.elementor-heading-title { font-size: 1.5rem !important; }
  h3, .elementor-widget-heading h3.elementor-heading-title { font-size: 1.25rem !important; }
}


/* ---------------------------------------------------------
   4. LINKS — brand red, transitions to deep teal on hover
   --------------------------------------------------------- */
a,
a:link,
a:visited,
.elementor a {
  color: var(--ts-ink);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover,
a:focus,
.elementor a:hover {
  color: var(--ts-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Links inside body paragraphs get a subtle underline by default */
p a,
.elementor-widget-text-editor a {
  text-decoration: ;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* ---------------------------------------------------------
   5. BUTTONS — Elementor button widget + generic buttons
   --------------------------------------------------------- */
.elementor-button,
.elementor-button-link,
button:not([type="submit"]):not(.wpforms-submit),
input[type="button"],
input[type="reset"],
.wp-block-button__link {
  background-color: var(--ts-accent) !important;
  color: var(--ts-paper) !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 14px 32px !important;
  font-family: var(--ts-font-stack) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, transform 0.05s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}

.elementor-button:hover,
.elementor-button-link:hover,
button:not([type="submit"]):not(.wpforms-submit):hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.wp-block-button__link:hover {
  background-color: var(--ts-ink-deep) !important;
  color: var(--ts-paper) !important;
  text-decoration: none !important;
}

.elementor-button:active,
.elementor-button-link:active,
button:not([type="submit"]):not(.wpforms-submit):active {
  transform: translateY(1px) !important;
}


/* ---------------------------------------------------------
   6. SECONDARY/OUTLINE BUTTONS
   Apply this class to Elementor buttons or any link/button
   element when you want a quieter, secondary CTA.
   Usage: add CSS class "ts-btn-outline" in Elementor's
   Advanced tab.
   --------------------------------------------------------- */
.ts-btn-outline,
.elementor-button.ts-btn-outline {
  background-color: transparent !important;
  color: var(--ts-accent) !important;
  border: 2px solid var(--ts-accent) !important;
  padding: 12px 30px !important;
}

.ts-btn-outline:hover,
.elementor-button.ts-btn-outline:hover {
  background-color: var(--ts-accent) !important;
  color: var(--ts-paper) !important;
}


/* ---------------------------------------------------------
   7. HORIZONTAL RULES — brand red short rule (On Tap style)
   --------------------------------------------------------- */
hr,
.elementor-divider-separator {
  border: 0 !important;
  border-top: 1px solid var(--ts-accent) !important;
  width: 500px !important;
  margin: 14px auto 28px !important;
}

/* Optional: full-width hairline rule.
   Add CSS class "ts-rule-full" to any divider widget. */
.ts-rule-full,
.elementor-divider-separator.ts-rule-full {
  border-top: 1px solid var(--ts-rule) !important;
  width: 100% !important;
  margin: 24px 0 !important;
}


/* ---------------------------------------------------------
   8. UTILITY CLASSES
   Add these CSS classes via Elementor's Advanced tab
   when you want specific brand treatments without
   relying on global overrides.
   --------------------------------------------------------- */

/* Brand-red eyebrow text (small uppercase intro line above headings) */
.ts-eyebrow {
  text-transform: uppercase !important;
  letter-spacing: 0.22em !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: var(--ts-accent) !important;
  margin-bottom: 6px !important;
}

/* Soft muted text for captions, dates, meta info */
.ts-meta {
  color: var(--ts-ink-soft) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.02em !important;
}

/* Centered, narrow content block */
.ts-content-narrow {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Text alignment helpers */
.ts-text-center { text-align: center !important; }
.ts-text-left { text-align: left !important; }
.ts-text-right { text-align: right !important; }


/* ---------------------------------------------------------
   9. SELECTION HIGHLIGHT
   When users highlight text, use brand red background
   --------------------------------------------------------- */
::selection {
  background-color: var(--ts-accent);
  color: var(--ts-paper);
}

::-moz-selection {
  background-color: var(--ts-accent);
  color: var(--ts-paper);
}


/* ---------------------------------------------------------
   10. FOCUS STATES (accessibility)
   Visible focus outlines for keyboard users
   --------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ts-accent) !important;
  outline-offset: 2px !important;
}/* End custom CSS */