/*
Theme Name: Joule Child
Theme URI: https://joule.keydesign.xyz/
Description: AI Startup Software Elementor WordPress Theme
Author: Key-Design
Author URI: http://themeforest.net/user/Key-Design
Template: joule
Version: 1.0
License: Envato Standard License
License URI: https://themeforest.net/licenses/standard
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-menu, featured-images, flexible-header, post-formats, sticky-post, translation-ready
Text Domain: joule-child
*/

/* =========================================
   WolfOS Brand Color Scheme — Arctic Blues
   Mirrors the premium-saas DaisyUI theme.
   Base surfaces shifted to Sky family for
   the cool "arctic blue" feel of the SaaS.
   =========================================

   Primary      Sky 500   #0ea5e9
   Primary dark Sky 600   #0284c7
   Primary deep Sky 700   #0369a1
   Primary ice  Sky 100   #e0f2fe
   Primary snow Sky 50    #f0f9ff
   Secondary    Slate 600 #475569
   Accent       Cyan 500  #06b6d4
   Neutral      Slate 800 #1e293b
   Base 100     White     #ffffff
   Base 200     Sky 50    #f0f9ff  ← arctic (was Slate 50 #f8fafc)
   Base 300     Sky 100   #e0f2fe  ← arctic (was Slate 200 #e2e8f0)
   Border       Sky 200   #bae6fd  ← arctic border
   Content      Slate 900 #0f172a
   ========================================= */

:root {
  /* --- WolfOS brand tokens --- */
  --wolfos-primary:          #0ea5e9;   /* Sky 500 */
  --wolfos-primary-hover:    #0284c7;   /* Sky 600 */
  --wolfos-primary-deep:     #0369a1;   /* Sky 700 */
  --wolfos-primary-light:    #e0f2fe;   /* Sky 100 — arctic ice */
  --wolfos-primary-snow:     #f0f9ff;   /* Sky 50  — arctic snow */
  --wolfos-secondary:        #475569;   /* Slate 600 — text use only */
  --wolfos-accent:           #06b6d4;   /* Cyan 500 */
  --wolfos-neutral:          #1e293b;   /* Slate 800 */
  --wolfos-base-100:         #ffffff;
  --wolfos-base-200:         #f0f9ff;   /* Sky 50  — page background */
  --wolfos-base-300:         #e0f2fe;   /* Sky 100 — surface tint */
  --wolfos-base-border:      #bae6fd;   /* Sky 200 — borders */
  --wolfos-base-content:     #0f172a;   /* Slate 900 — text */
  --wolfos-success:          #34d399;
  --wolfos-warning:          #fbbf24;
  --wolfos-error:            #f87171;

  /* --- Elementor global color overrides --- */
  --e-global-color-primary:   #0ea5e9;
  --e-global-color-secondary: #475569;
  --e-global-color-text:      #0f172a;
  --e-global-color-accent:    #06b6d4;

  /* --- KeyDesign / Joule theme overrides --- */
  --accent-color:     #0ea5e9;
  --main-color:       #0ea5e9;
  --secondary-color:  #475569;
  --heading-color:    #0f172a;
  --body-color:       #0f172a;
  --body-bg:          #f0f9ff;   /* Sky 50 — arctic page background */
}

/* Base */
body {
  color: #0f172a;
  background-color: #f0f9ff;   /* Sky 50 — arctic background */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a {
  color: #0ea5e9;
}
a:hover,
a:focus {
  color: #0284c7;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #0f172a;
}

/* =========================================
   WolfOS Logo
   ========================================= */


.wolfos-logo-wrap {
  display: inline-block;
  line-height: 1;
}

.wolfos-logo-wrap a,
.wolfos-logo-wrap a:hover,
.wolfos-logo-wrap a:focus {
  text-decoration: none;
  color: inherit;
}

.wolfos-logo {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 2rem;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #0f172a;
  display: inline-block;
}

.wolfos-logo .wolf {
  font-weight: 700;
}

.wolfos-logo .os {
  font-weight: 400;
}

.wolfos-tagline {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.4);
  margin: 0.25rem 0 0 0.25rem;
  padding: 0;
  line-height: 1;
}

/* =========================================
   Header — always white/glass like SaaS sidebar
   The SaaS sidebar is bg-base-100/50 + backdrop-blur-sm.
   This overrides the Joule transparent-on-load behaviour
   so the dark logo is always legible.
   ========================================= */
.site-header,
.kd-sticky-header,
.kd-header .kd-header-inner {
  background: rgba(240, 249, 255, 0.95) !important; /* Sky 50 — arctic glass */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid #bae6fd !important;       /* Sky 200 — arctic border */
  box-shadow: 0 1px 8px rgba(14, 165, 233, 0.06) !important; /* subtle sky glow */
}

/* =========================================
   Section backgrounds — brand primary blue palette
   Replace generic Slate 600 grey (#475569) with Sky 600 (#0284c7),
   the "darker primary blue" in the WolfOS palette.
   White text has 5.5:1 contrast on Sky 600 — passes WCAG AA.

   NOTE: elementor-element-* IDs are Elementor-generated. If these
   sections are rebuilt in the Elementor editor the IDs will change
   and these selectors must be updated to match.
   ========================================= */

/* Hero section (also has semantic class .hero-section) */
.hero-section,
.elementor-element-c063ab2,
.elementor-element-c063ab2:not(.elementor-motion-effects-element-type-background),
.elementor-element-c063ab2 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #0284c7 !important; /* Sky 600 — primary-hover */
}

/* Footer CTA section ("Orchestrate the Hunt") */
.elementor-element-d54ccde,
.elementor-element-d54ccde:not(.elementor-motion-effects-element-type-background),
.elementor-element-d54ccde > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #0369a1 !important; /* Sky 700 — slightly deeper for visual contrast */
}

/* Light feature section — arctic Sky 100 tint */
.elementor-element-35e5778,
.elementor-element-35e5778:not(.elementor-motion-effects-element-type-background),
.elementor-element-35e5778 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #e0f2fe !important; /* Sky 100 — arctic ice surface */
}

/* Cards / inner containers: white on arctic background creates clean layering */
.elementor-widget-container,
.elementor-element .e-con-inner {
  border-color: #bae6fd; /* Sky 200 — arctic border where borders appear */
}

/* =========================================
   Feature Cards Section — Brand-aligned
   Widget IDs: 75302a8 (Train Your Pack),
               0262bd0 (Deploy Coordinated Agents),
               bae6505 (Execute Your Strategy at Scale),
               975b72e (Sync and Command)
   Row container: 0258737
   ========================================= */

/* Card: white background, sky border */
.elementor-element-75302a8 .elementskit-infobox,
.elementor-element-0262bd0 .elementskit-infobox,
.elementor-element-bae6505 .elementskit-infobox,
.elementor-element-975b72e .elementskit-infobox {
  background-color: #ffffff !important;
  border-color: #bae6fd !important; /* Sky 200 */
  box-shadow: 0 1px 4px rgba(14, 165, 233, 0.08) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Card hover: subtle sky tint */
.elementor-element-75302a8 .elementskit-infobox:hover,
.elementor-element-0262bd0 .elementskit-infobox:hover,
.elementor-element-bae6505 .elementskit-infobox:hover,
.elementor-element-975b72e .elementskit-infobox:hover {
  background-color: #f0f9ff !important; /* Sky 50 */
  border-color: #38bdf8 !important; /* Sky 400 */
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.15) !important;
}

/* Keep text dark on hover (Elementor defaults to white text on the dark secondary hover) */
.elementor-element-75302a8 .elementskit-infobox:hover .elementskit-info-box-title,
.elementor-element-0262bd0 .elementskit-infobox:hover .elementskit-info-box-title,
.elementor-element-bae6505 .elementskit-infobox:hover .elementskit-info-box-title,
.elementor-element-975b72e .elementskit-infobox:hover .elementskit-info-box-title,
.elementor-element-75302a8 .elementskit-infobox:hover p,
.elementor-element-0262bd0 .elementskit-infobox:hover p,
.elementor-element-bae6505 .elementskit-infobox:hover p,
.elementor-element-975b72e .elementskit-infobox:hover p,
.elementor-element-75302a8 .elementskit-infobox:hover i,
.elementor-element-0262bd0 .elementskit-infobox:hover i,
.elementor-element-bae6505 .elementskit-infobox:hover i,
.elementor-element-975b72e .elementskit-infobox:hover i {
  color: inherit !important;
}

/* Icon container: sky-100 rounded badge */
.elementor-element-75302a8 .elementskit-info-box-icon,
.elementor-element-0262bd0 .elementskit-info-box-icon,
.elementor-element-bae6505 .elementskit-info-box-icon,
.elementor-element-975b72e .elementskit-info-box-icon {
  background-color: #e0f2fe !important; /* Sky 100 */
  border-radius: 10px !important;
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}

/* Icon: sky-600 colour */
.elementor-element-75302a8 .elementskit-info-box-icon i,
.elementor-element-0262bd0 .elementskit-info-box-icon i,
.elementor-element-bae6505 .elementskit-info-box-icon i,
.elementor-element-975b72e .elementskit-info-box-icon i {
  color: #0284c7 !important; /* Sky 600 */
  font-size: 22px !important;
  line-height: 1 !important;
}

/* Equal height: stretch all 4 card columns to the same height */
.elementor-element-0258737 {
  align-items: stretch !important;
}

.elementor-element-33479ca,
.elementor-element-033d5e8,
.elementor-element-41c233c,
.elementor-element-92fa665 {
  display: flex !important;
  flex-direction: column !important;
}

.elementor-element-75302a8,
.elementor-element-0262bd0,
.elementor-element-bae6505,
.elementor-element-975b72e {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.elementor-element-75302a8 .ekit-wid-con,
.elementor-element-0262bd0 .ekit-wid-con,
.elementor-element-bae6505 .ekit-wid-con,
.elementor-element-975b72e .ekit-wid-con,
.elementor-element-75302a8 .elementskit-infobox,
.elementor-element-0262bd0 .elementskit-infobox,
.elementor-element-bae6505 .elementskit-infobox,
.elementor-element-975b72e .elementskit-infobox {
  flex: 1 1 auto !important;
  height: 100% !important;
}

/* =========================================
   Buttons — comprehensive brand alignment
   Primary buttons: Sky 500 fill, Sky 600 hover.
   Buttons inside blue sections: white fill with primary text.
   All button text: white on coloured bg, primary on white bg.
   ========================================= */

/* Base primary button — any theme/plugin class */
.btn-primary,
.button-primary,
[class*="kd-button"],
.elementor-button,
.elementskit-btn {
  background-color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
  color: #ffffff !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
.btn-primary:hover,
.btn-primary:focus,
.button-primary:hover,
.button-primary:focus,
[class*="kd-button"]:hover,
[class*="kd-button"]:focus,
.elementor-button:hover,
.elementor-button:focus,
.elementskit-btn:hover,
.elementskit-btn:focus {
  background-color: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

/* All text inside primary-blue sections must be white and fully opaque */
.hero-section *,
.elementor-element-c063ab2 *,
.elementor-element-d54ccde * {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Flip-button animation fix:
   The `*` rule above forces opacity:1 on all children, which suppresses the
   flip animation's exit fade on .button-wrapper (normally opacity:0 on hover).
   Re-apply opacity:0 on hover so the exiting text disappears correctly. */
.hero-section .elementskit-btn:hover .button-wrapper,
.elementor-element-c063ab2 .elementskit-btn:hover .button-wrapper,
.elementor-element-d54ccde .elementskit-btn:hover .button-wrapper {
  opacity: 0 !important;
}

/* Buttons inside the primary-blue hero / CTA sections:
   white background with primary-blue text (inverted style)
   so they pop against the Sky 600/700 section background. */
.hero-section .elementor-button,
.hero-section .elementskit-btn,
.hero-section [class*="kd-button"],
.elementor-element-c063ab2 .elementor-button,
.elementor-element-c063ab2 .elementskit-btn,
.elementor-element-d54ccde .elementor-button,
.elementor-element-d54ccde .elementskit-btn {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #0284c7 !important;
}

/* The `*` rule above makes all children of the hero section white,
   which includes button text spans — re-force them to brand blue.
   Targets both .elementor-button and .elementskit-btn variants. */
.hero-section .elementor-button *,
.hero-section .elementor-button span,
.hero-section .elementskit-btn *,
.hero-section .elementskit-btn span,
.elementor-element-c063ab2 .elementor-button *,
.elementor-element-c063ab2 .elementor-button span,
.elementor-element-c063ab2 .elementskit-btn *,
.elementor-element-c063ab2 .elementskit-btn span,
.elementor-element-d54ccde .elementor-button *,
.elementor-element-d54ccde .elementor-button span,
.elementor-element-d54ccde .elementskit-btn *,
.elementor-element-d54ccde .elementskit-btn span {
  color: #0284c7 !important;
}
.hero-section .elementor-button:hover,
.hero-section .elementor-button:focus,
.hero-section .elementskit-btn:hover,
.hero-section [class*="kd-button"]:hover,
.elementor-element-c063ab2 .elementor-button:hover,
.elementor-element-c063ab2 .elementor-button:focus,
.elementor-element-c063ab2 .elementskit-btn:hover,
.elementor-element-d54ccde .elementor-button:hover,
.elementor-element-d54ccde .elementor-button:focus,
.elementor-element-d54ccde .elementskit-btn:hover {
  background-color: #e0f2fe !important; /* Sky 100 — subtle light blue tint on hover */
  border-color: #e0f2fe !important;
  color: #0284c7 !important;
}

/* =========================================
   Hero Screenshot — bottom alignment + border + shadow
   Container 9e8cafa is the right-column flex container
   holding the image widget in the hero section.
   ========================================= */

/* Stretch the image column wrapper to match the left text column height,
   and push the image container to the bottom (flex-direction: column on e9a3466) */
.elementor-element-e9a3466 {
  align-self: stretch !important;
  justify-content: flex-end !important;
}

/* Clip shadow bleed at the bottom only. Extend the clip region far enough in
   all other directions that the viewport edge does the clipping, not this rule.
   Using 100vw on top/left/right ensures any screen width is covered. */
.elementor-element-9e8cafa {
  clip-path: inset(-100px -100vw 0 -100px) !important;
}

/* Border top/left/right only — no bottom; shadow left and top only */
.elementor-element-9e8cafa .elementor-widget-image img {
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-bottom: none !important;
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.20), 0 -6px 24px rgba(0, 0, 0, 0.20) !important;
}

/* =========================================
   Login buttons — header & footer
   a1b2c3d4 = header "Log in" (ghost, light bg)
   b2c3d4e5 = footer "Log in" (ghost, dark bg)
   ========================================= */

/* Header Log in — ghost outline, no fill, no wrapping */
.elementor-element[data-id="a1b2c3d4"] .elementskit-btn {
  background-color: transparent !important;
  border: 1px solid rgba(23, 25, 25, 0.28) !important;
  color: #171919 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.elementor-element[data-id="a1b2c3d4"] .elementskit-btn:hover {
  background-color: rgba(23, 25, 25, 0.06) !important;
  border-color: rgba(23, 25, 25, 0.4) !important;
  color: #171919 !important;
}

/* Header buttons container — more space between buttons, push right */
.elementor-element[data-id="54f53cf"] {
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
  gap: 24px !important;
}

/* Footer buttons container — row layout so Log in sits beside Start the hunt */
.elementor-element[data-id="e8761fe"] {
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

/* Footer Log in — ghost outline with solid white border and white text
   Vertical padding reduced by 2px each side to compensate for the 2px border,
   keeping the overall height equal to "Start the hunt" (both 44px). */
.elementor-element[data-id="b2c3d4e5"] .elementskit-btn {
  background-color: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.elementor-element[data-id="b2c3d4e5"] .elementskit-btn * {
  color: #ffffff !important;
}

.elementor-element[data-id="b2c3d4e5"] .elementskit-btn:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.elementor-element[data-id="b2c3d4e5"] .elementskit-btn:hover * {
  color: #ffffff !important;
}

/* =========================================
   Feature card screenshots — rounded corners
   Widget IDs: 094490d, f3a92b1, 0efef92, 4e05cad, 8e78b19
   ========================================= */
.elementor-element[data-id="094490d"] img,
.elementor-element[data-id="f3a92b1"] img,
.elementor-element[data-id="0efef92"] img,
.elementor-element[data-id="4e05cad"] img,
.elementor-element[data-id="8e78b19"] img {
  border-radius: 8px !important;
  border: 1px solid #e0f2fe !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.10) !important;
}

/* =========================================
   Subpage hero sections — brand Sky 600
   c412979 = Request demo hero
   921b069 = Contact hero
   ========================================= */
.elementor-element-c412979,
.elementor-element-c412979:not(.elementor-motion-effects-element-type-background),
.elementor-element-c412979 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-921b069,
.elementor-element-921b069:not(.elementor-motion-effects-element-type-background),
.elementor-element-921b069 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: #0284c7 !important;
}

/* White text inside these hero sections */
.elementor-element-c412979 *,
.elementor-element-921b069 * {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Keep button animation exit-fade working */
.elementor-element-c412979 .elementskit-btn:hover .button-wrapper,
.elementor-element-921b069 .elementskit-btn:hover .button-wrapper {
  opacity: 0 !important;
}

/* Form inputs/textareas must stay dark-on-white */
.elementor-element-c412979 input:not([type="submit"]),
.elementor-element-c412979 textarea,
.elementor-element-c412979 select,
.elementor-element-921b069 input:not([type="submit"]),
.elementor-element-921b069 textarea,
.elementor-element-921b069 select {
  color: #0f172a !important;
  background-color: #ffffff !important;
}
.elementor-element-c412979 label,
.elementor-element-c412979 .elementor-field-label,
.elementor-element-921b069 label,
.elementor-element-921b069 .elementor-field-label {
  color: #0f172a !important;
}

/* Subpage content sections — Slate 50 → Sky 50 */
.elementor-element-83c0405,
.elementor-element-a50b5ec,
.elementor-element-52a18e5,
.elementor-element-a736dd7,
.elementor-element-4c9c5bf {
  background-color: #f0f9ff !important;
}

/* Tallinn section — transparent so it blends with the page body */
.elementor-element-cd29533 {
  background-color: transparent !important;
}

/* =========================================
   Privacy policy (27265) & Terms (27264)
   Standard Joule page template
   ========================================= */
.page-id-27264 .site-content,
.page-id-27264 #content,
.page-id-27265 .site-content,
.page-id-27265 #content {
  background-color: #f0f9ff !important;
}

/* Page title area */
.page-id-27264 .entry-header,
.page-id-27264 .kd-page-header,
.page-id-27264 .kd-inner-banner,
.page-id-27265 .entry-header,
.page-id-27265 .kd-page-header,
.page-id-27265 .kd-inner-banner {
  background-color: #f0f9ff !important;
}

/* Body text — brand content color */
.page-id-27264 .entry-content,
.page-id-27264 .entry-content p,
.page-id-27264 .entry-content li,
.page-id-27264 .entry-content h2,
.page-id-27264 .entry-content h3,
.page-id-27264 .entry-content h4,
.page-id-27265 .entry-content,
.page-id-27265 .entry-content p,
.page-id-27265 .entry-content li,
.page-id-27265 .entry-content h2,
.page-id-27265 .entry-content h3,
.page-id-27265 .entry-content h4 {
  color: #0f172a !important;
}

/* Sidebar anchor links */
.page-id-27264 .kd-toc a,
.page-id-27264 .kd-sidebar a,
.page-id-27265 .kd-toc a,
.page-id-27265 .kd-sidebar a {
  color: #0ea5e9 !important;
}

/* =========================================
   Contact page icon boxes — match front-page feature card style
   Widget IDs: 1a8c4e2 (Customer support)
               b3df6af (Contact sales)
               85039f6 (Schedule a call)
   ========================================= */

/* Card: white background, sky border */
.elementor-element-1a8c4e2 .elementskit-infobox,
.elementor-element-b3df6af .elementskit-infobox,
.elementor-element-85039f6 .elementskit-infobox {
  background-color: #ffffff !important;
  border: 1px solid #bae6fd !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(14, 165, 233, 0.08) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Card hover: subtle sky tint */
.elementor-element-1a8c4e2 .elementskit-infobox:hover,
.elementor-element-b3df6af .elementskit-infobox:hover,
.elementor-element-85039f6 .elementskit-infobox:hover {
  background-color: #f0f9ff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.15) !important;
}

/* Keep text dark on hover */
.elementor-element-1a8c4e2 .elementskit-infobox:hover .elementskit-info-box-title,
.elementor-element-b3df6af .elementskit-infobox:hover .elementskit-info-box-title,
.elementor-element-85039f6 .elementskit-infobox:hover .elementskit-info-box-title,
.elementor-element-1a8c4e2 .elementskit-infobox:hover p,
.elementor-element-b3df6af .elementskit-infobox:hover p,
.elementor-element-85039f6 .elementskit-infobox:hover p,
.elementor-element-1a8c4e2 .elementskit-infobox:hover i,
.elementor-element-b3df6af .elementskit-infobox:hover i,
.elementor-element-85039f6 .elementskit-infobox:hover i {
  color: inherit !important;
}

/* Icon container: sky-100 rounded badge */
.elementor-element-1a8c4e2 .elementskit-info-box-icon,
.elementor-element-b3df6af .elementskit-info-box-icon,
.elementor-element-85039f6 .elementskit-info-box-icon {
  background-color: #e0f2fe !important;
  border-radius: 10px !important;
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}

/* Icon: sky-600 colour */
.elementor-element-1a8c4e2 .elementskit-info-box-icon i,
.elementor-element-b3df6af .elementskit-info-box-icon i,
.elementor-element-85039f6 .elementskit-info-box-icon i {
  color: #0284c7 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

/* =========================================
   Mobile responsive fixes
   ========================================= */

/* Footer CTA buttons: Elementor sets align-self: flex-start and margin-top:10px
   on the "Start the hunt" widget, which inflates its flex-item height to 53px
   and causes "Log in" (42px) to be miscentered within the row.
   Zero the margin and force center on both. */
.elementor-element-3d8a0ef,
.elementor-element-b2c3d4e5 {
  align-self: center !important;
  margin-top: 0 !important;
}

/* Header "Log in" button: Elementor hides it on mobile/tablet via
   elementor-hidden-mobile class. Override to show it — there is enough
   space in the header between the logo and the hamburger icon.
   Reduce vertical padding on mobile so the button height matches the logo. */
@media (max-width: 767px) {
  .elementor-element-a1b2c3d4 {
    display: flex !important;
  }
  .elementor-element[data-id="a1b2c3d4"] .elementskit-btn {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    font-size: 14px !important;
  }
}