/* ============================================================
   TRINIGO 2.0: Brand class library
   brand.css  |  Loaded on every front-end page, after tokens.css
   Every reusable .tg- class is defined here, once. Apply in
   Elementor via Advanced > CSS Classes (several classes can be
   combined, separated by spaces). Full reference with usage
   notes: docs/css-class-reference.md

   Rules
   - Values come from tokens.css only; no hex or rgba here.
   - Nothing here targets bare tags, .e-con or Elementor
     containers. Classes style the element they are put on, or
     the Elementor widget inside it (.elementor-button,
     .elementor-heading-title).
   - A widget's own Style tab settings still win. Leave a field
     at its default when a class should control it.
   - Section 9 rules keep !important and also cover legal pages,
     because legal page element rules use !important.
   ============================================================ */

/* ============================================================
   1. BUTTONS
   Button widget: tg-btn tg-btn--primary (+ tg-btn--lg)
   ============================================================ */
.tg-btn .elementor-button,
a.tg-btn, button.tg-btn {
  font-family: var(--tg-font-body);
  font-size: var(--tg-ui-size);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--tg-radius-control);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tg-ease-fast), color var(--tg-ease-fast), border-color var(--tg-ease-fast);
}

/* Primary: Search, Book, Explore, Sign up */
.tg-btn.tg-btn--primary .elementor-button,
a.tg-btn--primary, button.tg-btn--primary {
  background: var(--tg-teal);
  color: var(--tg-white);
  padding: var(--tg-btn-pad);
}
.tg-btn.tg-btn--primary .elementor-button:hover,
a.tg-btn--primary:hover, button.tg-btn--primary:hover {
  background: var(--tg-teal-dark);
  color: var(--tg-white);
}

/* Secondary: Filters, Learn more, View details, Claim listing */
.tg-btn.tg-btn--secondary .elementor-button,
a.tg-btn--secondary, button.tg-btn--secondary {
  background: transparent;
  border-color: var(--tg-teal);
  color: var(--tg-teal);
  padding: var(--tg-btn-pad-secondary);
}
.tg-btn.tg-btn--secondary .elementor-button:hover,
a.tg-btn--secondary:hover, button.tg-btn--secondary:hover {
  background: var(--tg-teal);
  color: var(--tg-white);
}

/* Accent: promotions, limited offers, featured actions (sparingly).
   WCAG AA (4.5:1): charcoal on coral 4.9:1; hover inverts to white
   on charcoal 14.7:1. (White on coral 3.0:1 and charcoal on
   coral-dark 4.1:1 both fail.)                                  */
.tg-btn.tg-btn--accent .elementor-button,
a.tg-btn--accent, button.tg-btn--accent {
  background: var(--tg-coral);
  color: var(--tg-text);
  padding: var(--tg-btn-pad);
}
.tg-btn.tg-btn--accent .elementor-button:hover,
a.tg-btn--accent:hover, button.tg-btn--accent:hover {
  background: var(--tg-text);
  color: var(--tg-white);
}

/* Large: same size as default Elementor buttons (kit 14px 26px) */
.tg-btn.tg-btn--lg .elementor-button,
a.tg-btn--lg, button.tg-btn--lg {
  padding: var(--tg-btn-pad-lg);
}

/* Keyboard focus (proposal: no focus outline is specified) */
.tg-btn .elementor-button:focus-visible,
a.tg-btn:focus-visible, button.tg-btn:focus-visible {
  outline: 2px solid var(--tg-blue);
  outline-offset: 2px;
}

/* ============================================================
   2. FORM FIELDS
   Put tg-field on a form or wrapper, or directly on an input.
   ============================================================ */
.tg-field input[type="text"],
.tg-field input[type="search"],
.tg-field input[type="email"],
.tg-field input[type="tel"],
.tg-field select,
.tg-field textarea,
input.tg-field, select.tg-field, textarea.tg-field {
  background: var(--tg-white);
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-control);
  padding: var(--tg-field-pad);
  font-family: var(--tg-font-body);
  font-size: var(--tg-ui-size);
  color: var(--tg-text);
  transition: border-color var(--tg-ease-fast), box-shadow var(--tg-ease-fast);
}
.tg-field input:focus,
.tg-field select:focus,
.tg-field textarea:focus,
input.tg-field:focus, select.tg-field:focus, textarea.tg-field:focus {
  border-color: var(--tg-teal);
  box-shadow: var(--tg-focus-ring);
  outline: none;
}

/* ============================================================
   3. CARDS AND PANELS (listings, POIs, articles, callouts)
   ============================================================ */
.tg-card {
  background: var(--tg-white);
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-card);
  box-shadow: var(--tg-shadow-card);
  overflow: hidden;
  transition: transform var(--tg-ease-card) ease, box-shadow var(--tg-ease-card) ease;
}
.tg-card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--tg-shadow-card-hover);
}
.tg-card--featured { border-top: 3px solid var(--tg-sand); }

/* Panel: smaller containers such as comments and side boxes */
.tg-panel {
  background: var(--tg-white);
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-panel);
  box-shadow: var(--tg-shadow-box);
}

/* Dark strip: the blue bar across the top of listing cards */
.tg-strip {
  background: var(--tg-blue);
  color: var(--tg-on-dark);
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ============================================================
   4. BADGES AND PILLS
   ============================================================ */
/* Neutral badge (matches GD badges on single listings) */
.tg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--tg-badge-neutral);
  color: var(--tg-meta);
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-tag);
  padding: 2px 8px;
  font: 500 11px/1.4 var(--tg-font-body);
  text-decoration: none;
}

/* Coral badge: monetised listings only */
.tg-badge-paid {
  display: inline-block;
  background: var(--tg-coral);
  color: var(--tg-text);
  font: 500 11px/1.4 var(--tg-font-body);
  padding: 2px 8px;
  border-radius: var(--tg-radius-tag);
}

/* Category / tag pill (matches single listing pills) */
.tg-pill {
  display: inline-flex;
  align-items: center;
  background: var(--tg-teal-tint);
  color: var(--tg-teal);
  border: 1px solid var(--tg-teal-tint-border);
  border-radius: var(--tg-radius-tag);
  padding: 3px 10px;
  font: 600 var(--tg-small-size)/1.4 var(--tg-font-body);
  text-decoration: none;
  transition: background var(--tg-ease-fast), color var(--tg-ease-fast);
}
a.tg-pill:hover { background: var(--tg-teal); color: var(--tg-white); }

/* Sand pill on dark backgrounds (matches archive grid category tag) */
.tg-pill--sand {
  background: var(--tg-sand-tint);
  color: var(--tg-sand);
  border-color: var(--tg-sand-tint-border);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
a.tg-pill--sand:hover { background: var(--tg-sand); color: var(--tg-blue); }

/* ============================================================
   5. TYPOGRAPHY
   Size classes use the kit heading scale. Use them when a
   heading's look should differ from its HTML tag (e.g. an H3
   that should look like H2 for SEO structure).
   ============================================================ */
.tg-h1, .tg-h1 .elementor-heading-title { font-family: var(--tg-font-heading); font-size: var(--tg-h1-size); font-weight: var(--tg-h1-weight); line-height: var(--tg-h1-lh); }
.tg-h2, .tg-h2 .elementor-heading-title { font-family: var(--tg-font-heading); font-size: var(--tg-h2-size); font-weight: var(--tg-h2-weight); line-height: var(--tg-h2-lh); }
.tg-h3, .tg-h3 .elementor-heading-title { font-family: var(--tg-font-heading); font-size: var(--tg-h3-size); font-weight: var(--tg-h3-weight); line-height: var(--tg-h3-lh); }
.tg-h4, .tg-h4 .elementor-heading-title { font-family: var(--tg-font-heading); font-size: var(--tg-h4-size); font-weight: var(--tg-h4-weight); line-height: var(--tg-h4-lh); }
.tg-h5, .tg-h5 .elementor-heading-title { font-family: var(--tg-font-heading); font-size: var(--tg-h5-size); font-weight: var(--tg-h5-weight); line-height: var(--tg-h5-lh); }
.tg-h6, .tg-h6 .elementor-heading-title { font-family: var(--tg-font-heading); font-size: var(--tg-h6-size); font-weight: var(--tg-h6-weight); line-height: var(--tg-h6-lh); }

/* Heading with teal underline (legal H2s, GD widget titles) */
.tg-heading-rule .elementor-heading-title,
:is(h1, h2, h3, h4, h5, h6).tg-heading-rule {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--tg-teal);
}

/* Small uppercase label (GD field labels) */
.tg-label {
  font: 700 var(--tg-label-size)/1.4 var(--tg-font-body);
  color: var(--tg-meta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Font families */
.tg-font-heading { font-family: var(--tg-font-heading); }
.tg-font-body    { font-family: var(--tg-font-body); }

/* Text colours. Headings inside are recoloured too; links keep the
   kit link colour unless .tg-links is also applied.             */
.tg-text-dark,  .tg-text-dark  :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) { color: var(--tg-text); }
.tg-text-meta,  .tg-text-meta  :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) { color: var(--tg-meta); }
.tg-text-teal,  .tg-text-teal  :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) { color: var(--tg-teal); }
.tg-text-blue,  .tg-text-blue  :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) { color: var(--tg-blue); }
.tg-text-coral, .tg-text-coral :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) { color: var(--tg-coral); }
.tg-text-sand,  .tg-text-sand  :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) { color: var(--tg-sand); }
.tg-text-white, .tg-text-white :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) { color: var(--tg-white); }

/* ============================================================
   6. LINKS
   ============================================================ */
.tg-links a { color: var(--tg-teal); text-decoration: none; }
.tg-links a:hover { color: var(--tg-blue); }
.tg-editorial a { text-decoration: underline; }

/* Hide social or icon links that have no URL (replaces the
   per-widget custom CSS on listing hero social icons)          */
.tg-hide-empty-links a[href="#"],
.tg-hide-empty-links a:not([href]) {
  display: none;
}

/* ============================================================
   7. ICONS
   ============================================================ */
.tg-icon            { color: var(--tg-teal); }
.tg-icon--secondary { color: var(--tg-meta); }
.tg-icon--highlight { color: var(--tg-coral); }
.tg-icon--sand      { color: var(--tg-sand); }

/* GD favourite button at hero size (replaces per-widget 25px CSS) */
.tg-fav-lg a,
.tg-fav-lg i { font-size: 25px; }

/* ============================================================
   8. SECTIONS, BACKGROUNDS AND MEDIA
   ============================================================ */
.tg-section        { background: var(--tg-bg); }
.tg-section--white { background: var(--tg-white); }
.tg-section--blue  { background: var(--tg-blue); color: var(--tg-bg); }

/* Bottom fade to blue over an image (archive grid cards) */
.tg-fade-bottom {
  background: linear-gradient(transparent, var(--tg-blue-overlay));
}

/* Image zoom on hover: on an Image widget, or on a card that holds one */
.tg-img-zoom { overflow: hidden; }
.tg-img-zoom img {
  display: block;
  width: 100%;
  transition: transform var(--tg-ease-img) ease;
}
.tg-img-zoom:hover img,
.tg-card--hover:hover .tg-img-zoom img {
  transform: scale(1.05);
}

/* Footer */
.tg-footer { background: var(--tg-blue); color: var(--tg-bg); }
.tg-footer a { color: var(--tg-bg); text-decoration: none; }
.tg-footer a:hover { color: var(--tg-sand); }

/* ============================================================
   9. CONTENT BLOCKS (shared with legal pages)
   Each rule also covers body.trinigo-legal-page so legal pages
   render exactly as before; the classes work on any page.
   ============================================================ */

/* Intro callout: wrap the opening paragraph in .tg-intro */
.tg-intro,
body.trinigo-legal-page .tg-intro {
  border-left: 3px solid var(--tg-teal) !important;
  background: var(--tg-teal-light) !important;
  padding: 16px 20px !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--tg-text) !important;
  margin-bottom: 36px !important;
  border-radius: 0 var(--tg-radius-tag) var(--tg-radius-tag) 0 !important;
}

/* "Last updated: ..." lines: <p class="tg-meta-note"> */
.tg-meta-note,
body.trinigo-legal-page .tg-meta-note {
  font-family: var(--tg-font-body) !important;
  font-size: var(--tg-small-size) !important;
  color: var(--tg-meta) !important;
  font-style: italic !important;
  margin-bottom: 32px !important;
}

/* Highlight box for important callouts: <div class="tg-highlight-box"> */
.tg-highlight-box,
body.trinigo-legal-page .tg-highlight-box {
  background: var(--tg-white) !important;
  border: 1px solid var(--tg-border) !important;
  border-radius: var(--tg-radius-panel) !important;
  padding: 20px 24px !important;
  margin: 24px 0 !important;
  box-shadow: var(--tg-shadow-box) !important;
}
.tg-highlight-box p:last-child,
body.trinigo-legal-page .tg-highlight-box p:last-child {
  margin-bottom: 0 !important;
}

/* Divider: <hr class="tg-divider">, or every <hr> on legal pages */
hr.tg-divider,
body.trinigo-legal-page hr {
  border: none !important;
  border-top: 1px solid var(--tg-border) !important;
  margin: 32px 0 !important;
}

/* Data table: <table class="tg-table">, or put tg-table on a
   wrapper; every table on legal pages                           */
table.tg-table, .tg-table table,
body.trinigo-legal-page table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--tg-font-body) !important;
  font-size: var(--tg-ui-size) !important;
  margin-bottom: 24px !important;
}
.tg-table th,
body.trinigo-legal-page th {
  background: var(--tg-blue) !important;
  color: var(--tg-white) !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  text-align: left !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.tg-table td,
body.trinigo-legal-page td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--tg-border) !important;
  color: var(--tg-meta) !important;
  vertical-align: top !important;
}
.tg-table tr:last-child td,
body.trinigo-legal-page tr:last-child td {
  border-bottom: none !important;
}
.tg-table tr:nth-child(even) td,
body.trinigo-legal-page tr:nth-child(even) td {
  background: var(--tg-teal-stripe) !important;
}

/* Dot list (matches amenities): on a Text Editor or list wrapper.
   Add tg-list-dots--2col for two columns.                       */
.tg-list-dots ul, ul.tg-list-dots {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tg-list-dots li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.4;
  margin-bottom: 6px;
}
.tg-list-dots li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--tg-teal);
}
.tg-list-dots--2col ul, ul.tg-list-dots--2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
}
.tg-list-dots--2col li { margin-bottom: 0; }

/* ============================================================
   10. CLASSES ALREADY IN USE ON LIVE TEMPLATES
   Kept under their existing names so live templates keep working.
   ============================================================ */

/* .ttgo-gd-title: ElementsKit Heading showing GeoDirectory title
   parts inline (Gas Stations archive #18381). Moved here from that
   widget's Custom CSS; remove it there once this theme is live.  */
.ttgo-gd-title .ekit-heading--title,
.ttgo-gd-title .ekit-heading--title * {
  display: inline !important;
}
.ttgo-gd-title br {
  display: none !important;
}
.ttgo-gd-title span:before {
  content: " ";
}
.ttgo-gd-title .ekit-heading--title {
  line-height: 1.15;
  letter-spacing: -0.015em;
}