/*
Theme Name:     Rumler 2026 Theme
Theme URI:      https://rumler.com
Description:    Child Theme for DIVI Theme
Author:         Frank Rumler
Author URI:     https://rumler.com/
Template:       Divi
Version:        1.0.2
License:        GNU General Public License
Last edited:	2025-11-10
*/

/* -----------------------------
	Design Tokens
------------------------------ */
:root {
  --fr-bg: #0b0f17;          /* deep neutral blue/black */
  --fr-surface: #0f1623;     /* cards/sections */
  --fr-text: rgba(245,245,245,0.8); /* primary text */
  --fr-muted: #e6e7ea;       /* secondary text */
  --fr-accent: #a78bfa;      /* sky-500 */
  --fr-accent-2: #a78bfa;    /* violet-400 */
  --fr-danger: #fb7185;      /* rose-400 */
  --fr-success: #34d399;     /* emerald-400 */
  --fr-ring: rgba(96,165,250,.35);
}
/* Fluid scale controls (edit these to taste) */
:root {
  /* Viewport range (px) over which the type scales */
  --fluid-screen-min: 360;
  --fluid-screen-max: 1280;
  --fluid-range: calc(var(--fluid-screen-max) - var(--fluid-screen-min));
  /* 0 → at min width, 1 → at max width */
  --fluid-bp: clamp(0, (100vw - (var(--fluid-screen-min) * 1px)) / var(--fluid-range), 1);

  /* ===== Base (Tailwind reference) min sizes ===== */
  --text-xs-min: 0.75rem;   /* 12px  */
  --text-sm-min: 0.875rem;  /* 14px  */
  --text-base-min: 1rem;    /* 16px  */
  --text-lg-min: 1.125rem;  /* 18px  */
  --text-xl-min: 1.25rem;   /* 20px  */
  --text-2xl-min: 1.5rem;   /* 24px  */
  --text-3xl-min: 1.875rem; /* 30px  */
  --text-4xl-min: 2.25rem;  /* 36px  */
  --text-5xl-min: 3rem;     /* 48px  */
  --text-6xl-min: 3.75rem;  /* 60px  */
  --text-7xl-min: 4.5rem;   /* 72px  */
  --text-8xl-min: 6rem;     /* 96px  */
  --text-9xl-min: 8rem;     /* 128px */

  /* ===== Max sizes (gentle upscale for larger screens) ===== */
  /* Tune these independently; larger sizes scale a bit more. */
  --text-xs-max: 0.85rem;
  --text-sm-max: 0.98rem;
  --text-base-max: 1.125rem;
  --text-lg-max: 1.25rem;
  --text-xl-max: 1.5rem;
  --text-2xl-max: 1.875rem;
  --text-3xl-max: 2.25rem;
  --text-4xl-max: 2.75rem;
  --text-5xl-max: 3.5rem;
  --text-6xl-max: 4.5rem;
  --text-7xl-max: 5.25rem;
  --text-8xl-max: 6.75rem;
  --text-9xl-max: 9rem;

  /* ===== Fluid values (interpolate between min/max) ===== */
  --text-xs: clamp(var(--text-xs-min),  calc(var(--text-xs-min)  + (var(--text-xs-max)  - var(--text-xs-min))  * var(--fluid-bp)), var(--text-xs-max));
  --text-sm: clamp(var(--text-sm-min),  calc(var(--text-sm-min)  + (var(--text-sm-max)  - var(--text-sm-min))  * var(--fluid-bp)), var(--text-sm-max));
  --text-base: clamp(var(--text-base-min),calc(var(--text-base-min)+ (var(--text-base-max)- var(--text-base-min)) * var(--fluid-bp)), var(--text-base-max));
  --text-lg: clamp(var(--text-lg-min),  calc(var(--text-lg-min)  + (var(--text-lg-max)  - var(--text-lg-min))  * var(--fluid-bp)), var(--text-lg-max));
  --text-xl: clamp(var(--text-xl-min),  calc(var(--text-xl-min)  + (var(--text-xl-max)  - var(--text-xl-min))  * var(--fluid-bp)), var(--text-xl-max));
  --text-2xl: clamp(var(--text-2xl-min),calc(var(--text-2xl-min)+ (var(--text-2xl-max)- var(--text-2xl-min)) * var(--fluid-bp)), var(--text-2xl-max));
  --text-3xl: clamp(var(--text-3xl-min),calc(var(--text-3xl-min)+ (var(--text-3xl-max)- var(--text-3xl-min)) * var(--fluid-bp)), var(--text-3xl-max));
  --text-4xl: clamp(var(--text-4xl-min),calc(var(--text-4xl-min)+ (var(--text-4xl-max)- var(--text-4xl-min)) * var(--fluid-bp)), var(--text-4xl-max));
  --text-5xl: clamp(var(--text-5xl-min),calc(var(--text-5xl-min)+ (var(--text-5xl-max)- var(--text-5xl-min)) * var(--fluid-bp)), var(--text-5xl-max));
  --text-6xl: clamp(var(--text-6xl-min),calc(var(--text-6xl-min)+ (var(--text-6xl-max)- var(--text-6xl-min)) * var(--fluid-bp)), var(--text-6xl-max));
  --text-7xl: clamp(var(--text-7xl-min),calc(var(--text-7xl-min)+ (var(--text-7xl-max)- var(--text-7xl-min)) * var(--fluid-bp)), var(--text-7xl-max));
  --text-8xl: clamp(var(--text-8xl-min),calc(var(--text-8xl-min)+ (var(--text-8xl-max)- var(--text-8xl-min)) * var(--fluid-bp)), var(--text-8xl-max));
  --text-9xl: clamp(var(--text-9xl-min),calc(var(--text-9xl-min)+ (var(--text-9xl-max)- var(--text-9xl-min)) * var(--fluid-bp)), var(--text-9xl-max));

  /* ===== Line-height (Tailwind-equivalent ratios) ===== */
  /* Keep unitless for better inheritance with variable fonts. */
  --text-xs--line-height: calc(1 / 0.75);       /* 1.3333 */
  --text-sm--line-height: calc(1.25 / 0.875);   /* 1.4286 */
  --text-base--line-height: calc(1.5 / 1);      /* 1.5 */
  --text-lg--line-height: calc(1.75 / 1.125);   /* 1.5556 */
  --text-xl--line-height: calc(1.75 / 1.25);    /* 1.4 */
  --text-2xl--line-height: calc(2 / 1.5);       /* 1.3333 */
  --text-3xl--line-height: calc(2.25 / 1.875);  /* 1.2 */
  --text-4xl--line-height: calc(2.5 / 2.25);    /* 1.1111 */
  --text-5xl--line-height: 1;                   /* Tight headings */
  --text-6xl--line-height: 1;
  --text-7xl--line-height: 1;
  --text-8xl--line-height: 1;
  --text-9xl--line-height: 1;
}

/* Utility classes (apply in Divi module → Advanced → CSS Class) */
.text-xs   { font-size: var(--text-xs);   line-height: var(--text-xs--line-height); }
.text-sm   { font-size: var(--text-sm);   line-height: var(--text-sm--line-height); }
.text-base { font-size: var(--text-base); line-height: var(--text-base--line-height); }
.text-lg   { font-size: var(--text-lg);   line-height: var(--text-lg--line-height); }
.text-xl   { font-size: var(--text-xl);   line-height: var(--text-xl--line-height); }
.text-2xl  { font-size: var(--text-2xl);  line-height: var(--text-2xl--line-height); }
.text-3xl  { font-size: var(--text-3xl);  line-height: var(--text-3xl--line-height); }
.text-4xl  { font-size: var(--text-4xl);  line-height: var(--text-4xl--line-height); }
.text-5xl  { font-size: var(--text-5xl);  line-height: var(--text-5xl--line-height); }
.text-6xl  { font-size: var(--text-6xl);  line-height: var(--text-6xl--line-height); }
.text-7xl  { font-size: var(--text-7xl);  line-height: var(--text-7xl--line-height); }
.text-8xl  { font-size: var(--text-8xl);  line-height: var(--text-8xl--line-height); }
.text-9xl  { font-size: var(--text-9xl);  line-height: var(--text-9xl--line-height); }
/* -----------------------------
   Local Geist (Variable)
------------------------------ */
@font-face{
  font-family:"Geist";
  src:url("/wp-content/themes/rumler-2026/fonts/Geist[wght].woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  font-synthesis-weight: none;
  font-synthesis-style: none;
}

/* -----------------------------
   Global Base — Dark Only
------------------------------ */
/* Variable-font friendly defaults */
html {
  font-optical-sizing: auto;              /* lets variable fonts auto-adjust for size */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  background: var(--fr-bg);
  color: var(--fr-text);
}

/* Make our variable declarations more specific than Divi's :root */
body.et_divi_theme,
.et-db #et-boc,                 /* Builder canvas */
#page-container {               /* Front-end wrapper */
  /* Global fonts */
  --et_global_heading_font: "Geist", system-ui, -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;
  --et_global_body_font: "Geist", system-ui, -apple-system, "Segoe UI", Arial, Helvetica, sans-serif;

  /* If you want to align headings to your fluid scale (optional): */
  --et_h1_font_size: var(--text-5xl);
  --et_h2_font_size: var(--text-4xl);
  --et_h3_font_size: var(--text-3xl);
  --et_h4_font_size: var(--text-2xl);
  --et_h5_font_size: var(--text-xl);
  --et_h6_font_size: var(--text-lg);

  /* Line-heights to match your scale (optional): */
  --et_h1_line_height: var(--text-5xl--line-height);
  --et_h2_line_height: var(--text-4xl--line-height);
  --et_h3_line_height: var(--text-3xl--line-height);
  --et_h4_line_height: var(--text-2xl--line-height);
  --et_h5_line_height: var(--text-xl--line-height);
  --et_h6_line_height: var(--text-lg--line-height);
}

/* Map headings to your variables (if Divi hasn’t already) */
h1 { font-family: var(--et_global_heading_font); font-size: var(--et_h1_font_size); line-height: var(--et_h1_line_height); }
h2 { font-family: var(--et_global_heading_font); font-size: var(--et_h2_font_size); line-height: var(--et_h2_line_height); }
h3 { font-family: var(--et_global_heading_font); font-size: var(--et_h3_font_size); line-height: var(--et_h3_line_height); }
h4 { font-family: var(--et_global_heading_font); font-size: var(--et_h4_font_size); line-height: var(--et_h4_line_height); }
h5 { font-family: var(--et_global_heading_font); font-size: var(--et_h5_font_size); line-height: var(--et_h5_line_height); }
h6 { font-family: var(--et_global_heading_font); font-size: var(--et_h6_font_size); line-height: var(--et_h6_line_height); }

body, .et_pb_text, .et_pb_blurb, .et_pb_module {
  font-family: "Segoe UI Variable Display","Segoe UI Variable","Segoe UI","Segoe UI Web (West European)","Encode Sans","Open Sans",Arial,Helvetica,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family:"Geist", system-ui, -apple-system, Segoe UI, Arial, Helvetica, sans-serif;
  color: var(--fr-text);
  letter-spacing: -0.01em;
}

/* Service Blurb Module */
.et_pb_blurb {
	border-radius: 10px;
    border-width: 1px;
    border-color: color: rgb(204 204 204 / 50%);
    border-style: solid;
    box-shadow: 0px 0px 20px 0px var(--gcid-primary-color);
}
.et_pb_blurb > .et_pb_blurb_content {
	padding: 2rem 1rem;
}
.et_pb_blurb > .et_pb_blurb_content .et_pb_blurb_description p {
	font-size: small;
    font-weight: 400;
    line-height: 1.4em;
}

.et_pb_blurb > .et_pb_blurb_content .et_pb_blurb_container h3.et_pb_module_header {
	line-height: 1.1em !important;
	font-size: xx-large !important;
}

.geist { font-family:"Geist",system-ui,-apple-system,Segoe UI,Arial,Helvetica,sans-serif; }
.white {color: #fcfcfc;}
.weight-800 { font-weight:800; }
.weight-700 { font-weight:700; }
.weight-600 { font-weight:600; }
.weight-500 { font-weight:500; }
.weight-400 { font-weight:400; }
.weight-300 { font-weight:300; }
.weight-200 { font-weight:200; }
.weight-100 { font-weight:100; }

/* Fluid Type Scale for Divi Tailwind-like utilities (.text-xs … .text-9xl) with variable-friendly, fluid sizing. */

/* Specificity bump to beat selectors like .et_pb_blurb_0 .et_pb_module_header */
#page-container .et_pb_blurb .et_pb_module_header.et_pb_module_header {
  font-size: inherit;        /* or var(--et_h3_font_size) */
  line-height: inherit;      /* or var(--et_h3_line_height) */
}

/* Optional helpers (handy for your “kicker” line and blurb body) */
.kicker { letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--text-sm); line-height: var(--text-sm--line-height); opacity: .8; }
.lead   { font-size: var(--text-lg); line-height: var(--text-lg--line-height); }

/* Links & interactive */
a { 
	color: var(--fr-accent-2);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
a:hover {
	color: var(--fr-accent-2);
	text-decoration: underline;
	cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--fr-ring);
  outline-offset: 2px;
}

/* Divi containers/cards on dark */
.et_pb_section {
  background: transparent;
  padding-top: clamp(32px, 6vw, 96px);
  padding-bottom: clamp(32px, 6vw, 96px);
}
.et_pb_row {
  max-width: 1200px;
}
.fr-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 60%), var(--fr-surface);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 10px 40px rgba(0,0,0,0.35);
}

/* Hero utilities */
.fr-hero-title { font-size: clamp(40px, 6.5vw, 88px); }
.fr-hero-sub   { color: var(--fr-muted); font-size: clamp(16px, 2vw, 22px); }

/* Buttons */
.fr-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.1rem; border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  color:#fff; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;
}
.fr-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(16,24,40,.45); }
.fr-btn--primary { background-color: var(--fr-accent); border-color: transparent; }
.fr-btn--outline { background: transparent; border-color: rgba(255,255,255,.16); }

/* -----------------------------
   Gradient Text Utilities
   (Apply via Divi module → Advanced → CSS Class)
------------------------------ */
.text-gradient-sky {
  background: linear-gradient(90deg, #60a5fa, #34d399);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-gradient-aurora {
  background: linear-gradient(90deg, #7dd3fc, #a78bfa, #fca5a5);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-gradient-neon {
  background: linear-gradient(90deg, #22d3ee 0%, #a3e635 50%, #fb7185 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-gradient-royal {
  background: linear-gradient(90deg, #93c5fd, #a78bfa, #f472b6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Optional soft glow for headings */
.glow {
  text-shadow: 0 0 20px rgba(96,165,250,.25), 0 0 60px rgba(167,139,250,.18);
}

/* Divider accent */
.hr-accent {
  height:1px; border:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  margin: 32px 0;
}