/*
 * Tremhost brand layer: one typeface pairing and one palette for every page on tremhost.com.
 * Load it LAST on every page (static html15 pages, the other static templates, WordPress).
 *
 * Type:    Bricolage Grotesque for headings (h1-h3), Inter for everything else.
 * Colours: the homepage palette. Navy #13223a, deep #0b1526, coral #ff6f6f (fills, buttons, accents
 *          on navy), coral-ink #b8343a (coloured text on white), muted #4f5b6e, line #dfe3ea, soft #f4f6f9.
 * Rules:   buttons are coral with navy text (white on coral fails contrast at 2.7:1);
 *          coral text only on navy; on white, use coral-ink.
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
html:root {
  --th-navy: #13223a;
  --th-deep: #0b1526;
  --th-coral: #ff6f6f;
  --th-coral-hover: #ff8585;
  --th-coral-ink: #b8343a;
  --th-ink: #13223a;
  --th-muted: #4f5b6e;
  --th-line: #dfe3ea;
  --th-soft: #f4f6f9;
  --th-on-navy: #c9d1de;
  --th-star: #ffb648;
  --th-font-display: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --th-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Bootstrap 5 (html15 pages, main.css pages, WordPress unified CSS) */
  --bs-primary: #ff6f6f;
  --bs-primary-rgb: 255, 111, 111;
  --bs-link-color: #13223a;
  --bs-link-color-rgb: 19, 34, 58;
  --bs-link-hover-color: #b8343a;
  --bs-link-hover-color-rgb: 184, 52, 58;
  --bs-body-color: #13223a;
  --bs-body-color-rgb: 19, 34, 58;
  --bs-border-color: #dfe3ea;
  --bs-tertiary-bg: #f4f6f9;
  --bs-font-sans-serif: var(--th-font-body);
  --bs-body-font-family: var(--th-font-body);

  /* ITzen theme options (WordPress) */
  --primary-color: #ff6f6f;
  --primary-color-rgb: 255, 111, 111;
  --secondary-color: #13223a;
  --third-color: #4f5b6e;
  --third-color-rgb: 79, 91, 110;
  --fourth-color: #ff6f6f;
  --gradient-color-from: #ff6f6f;
  --gradient-color-to: #ff8585;
  --color-one: #13223a;

  /* Elementor global colours and fonts (WordPress) */
  --e-global-color-primary: #13223a;
  --e-global-color-secondary: #4f5b6e;
  --e-global-color-text: #4f5b6e;
  --e-global-color-accent: #ff6f6f;
  --e-global-typography-primary-font-family: "Bricolage Grotesque";
  --e-global-typography-secondary-font-family: "Inter";
  --e-global-typography-text-font-family: "Inter";
  --e-global-typography-accent-font-family: "Inter";

  /* style.css template (cpaneldedicated, e-commerce, managedsecurity, masterreseller) */
  --font-primary: var(--th-font-display);
  --font-secondary: var(--th-font-body);
  --color-primary: #13223a;
  --color-secondary: #13223a;
  --color-third: #ff6f6f;
  --color-secondary-dark: #0b1526;
  --btc: #4f5b6e;
  --primary-gradient: linear-gradient(180deg, #13223a 0%, #0b1526 100%);
  --secondary-gradient: linear-gradient(180deg, #f4f6f9 0%, rgba(244, 246, 249, 0) 100%);
  --banner-one-bg: linear-gradient(180deg, #13223a 0%, #0b1526 100%);
  --banner-most-used-bg: linear-gradient(180deg, #13223a 0%, #0b1526 100%);
  --banner-four-gradient: linear-gradient(90deg, #13223a 26.56%, rgba(11, 21, 38, 0) 83.83%);
  --pricing-single-bg: linear-gradient(180deg, #13223a 0%, #0b1526 100%);
  --cta-two-bg: linear-gradient(92deg, #13223a 3.85%, #0b1526 101.14%);
  --testimonial-two-bg: linear-gradient(180deg, #13223a 0%, #0b1526 100%);
  --icon-bg-1: linear-gradient(147deg, #f4f6f9 14.12%, #ffe3e1 80.26%);
  --icon-bg-2: linear-gradient(147deg, #f4f6f9 14.12%, #dfe3ea 80.26%);
  --border-gradient: linear-gradient(180deg, rgba(223, 227, 234, 0) 0%, #dfe3ea 51.04%, rgba(223, 227, 234, 0) 100%);
  --data-center-bg: linear-gradient(180deg, #f4f6f9 0%, rgba(244, 246, 249, 0) 100%);
  --data-center-shape-1: linear-gradient(180deg, #ffffff 0.14%, #f4f6f9 76.88%);
  --data-center-shape-2: linear-gradient(179deg, #ffffff 0.57%, #f4f6f9 59.7%);
  --data-center-shape-small: linear-gradient(192deg, #f4f6f9 8.69%, #f4f6f9 43%, #dfe3ea 43%);
  --accordion-active: linear-gradient(180deg, rgba(244, 246, 249, 0) 0%, #f4f6f9 100%);
  --accordion-section: linear-gradient(180deg, #f4f6f9 0%, rgba(244, 246, 249, 0) 100%);
  --footer-style-one: linear-gradient(0deg, #f4f6f9 0%, rgba(244, 246, 249, 0) 82.55%);
  --feedback-card: linear-gradient(180deg, #f4f6f9 0%, #ffffff 100%);
  --border-color: #dfe3ea;
  --light-border: #dfe3ea;
  --plan-bg: #f4f6f9;
  --placeholder: #6b7587;
  --color-warning: #ff6f6f;
  --color-danger: #b8343a;
  --color-info: #13223a;
}

/* Elementor sets its global colours and fonts on body.elementor-kit-N, which beats :root. */
html body[class*="elementor-kit-"] {
  --e-global-color-primary: #13223a;
  --e-global-color-secondary: #4f5b6e;
  --e-global-color-text: #4f5b6e;
  --e-global-color-accent: #ff6f6f;
  --e-global-typography-primary-font-family: "Bricolage Grotesque";
  --e-global-typography-secondary-font-family: "Inter";
  --e-global-typography-text-font-family: "Inter";
  --e-global-typography-accent-font-family: "Inter";
}

/* ---------- type, everywhere ---------- */
/* !important is deliberate: many pages set font-family inline (style="font-family:'Inter'" and others).
   Icon fonts are excluded so Font Awesome, Bootstrap Icons, Icomoon, Bravisicon and Flaticon keep working. */
html body,
html body :is(p, a, span, li, dd, dt, td, th, label, legend, input, select, textarea, button, option, small, strong, b, em, address, blockquote, figcaption, cite, div, section, article, aside, nav, header, footer, main, ul, ol, form, h4, h5, h6, .h4, .h5, .h6):not(i, .fa, .fas, .far, .fal, .fab, .fad, [class^="fa-"], [class*=" fa-"], .bi, [class^="bi-"], [class*=" bi-"], [class^="icon-"], [class*=" icon-"], [class^="icomoon-"], [class*=" icomoon-"], [class^="bravisicon"], [class*=" bravisicon"], [class^="flaticon-"], [class*=" flaticon-"], [class*="pxl-icon"], .dashicons, [class*="eicon"], .material-icons, [class^="ri-"], [class*=" ri-"], [class^="ti-"], [class*=" ti-"]) {
  font-family: var(--th-font-body) !important;
}
html body :is(h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
  font-family: var(--th-font-display) !important;
  letter-spacing: -0.02em;
}
html body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Prices line up in tables and plan cards */
html body :is([class*="price"], [class*="Price"], [class*="amount"], .plan-price, .pricing, td, th) {
  font-variant-numeric: tabular-nums;
}

/* ---------- colour details the templates hard-code ---------- */
::selection { background: rgba(255, 111, 111, 0.35); color: #0b1526; }
html body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #ff6f6f;
  outline-offset: 2px;
}
html body .btn-primary {
  --bs-btn-bg: #ff6f6f;
  --bs-btn-border-color: #ff6f6f;
  --bs-btn-color: #13223a;
  --bs-btn-hover-bg: #ff8585;
  --bs-btn-hover-border-color: #ff8585;
  --bs-btn-hover-color: #13223a;
  --bs-btn-active-bg: #ff5c5c;
  --bs-btn-active-border-color: #ff5c5c;
  --bs-btn-active-color: #13223a;
}
html body .btn-outline-primary {
  --bs-btn-color: #13223a;
  --bs-btn-border-color: #ff6f6f;
  --bs-btn-hover-bg: #ff6f6f;
  --bs-btn-hover-border-color: #ff6f6f;
  --bs-btn-hover-color: #13223a;
}
html body .text-primary { color: #b8343a !important; }
html body .bg-primary { background-color: #ff6f6f !important; color: #13223a; }

/* Licence pages (main.css template): Inter sets slightly wider than the old Mulish, so the
   seven-item menu wrapped onto a second line at 1366px. Tighten it a touch. */
html body .nav-wrapper nav > ul > li > a { font-size: 14.5px; letter-spacing: -0.01em; }

/* Grey body text inside the templates' dark sections: lift to the on-navy grey so it passes contrast. */
html body :is([class*="dark-bg"], .bg-dark, .section-dark) :is(p, li, span):not(.btn *):not([class*="badge"]) {
  color: var(--th-on-navy);
}
/* Feature tiles that now sit on coral (cpaneldedicated): navy text, as on every coral surface. */
html body .featured-item :is(h1, h2, h3, h4, h5, h6, p, span, a) { color: var(--th-navy) !important; }
/* Coral buttons on the security pages (style.css template): navy text until hover, as on every coral surface. */
html body .rts-btn-secondary:not(:hover):not(:focus-visible) { color: var(--th-navy) !important; }
/* Bootstrap's red text fails on the grey panels (4.2:1); use the coral-ink red (5.4:1). */
html body .text-danger { color: var(--th-coral-ink) !important; }