/*
            Theme Name: Casa Blanca Theme
            Author: Vovance
            Description: Theme Casa Blanca created by Vovance.
            Version: 1.0
            */

:root {
  --radius: 0.75rem;
  --color-background: oklch(1 0 0);
  --color-surface: oklch(0.972 0.003 264);
  --color-foreground: oklch(0.205 0.012 264);
  --color-card: oklch(1 0 0);
  --color-card-foreground: var(--color-foreground);
  --color-popover: oklch(1 0 0);
  --color-popover-foreground: var(--color-foreground);
  --color-primary: oklch(0.205 0.012 264);
  --color-primary-foreground: oklch(1 0 0);
  --color-accent: oklch(0.685 0.216 39);
  --color-accent-foreground: oklch(1 0 0);
  --color-secondary: oklch(0.972 0.003 264);
  --color-secondary-foreground: var(--color-foreground);
  --color-muted: oklch(0.972 0.003 264);
  --color-muted-foreground: oklch(0.5 0.01 264);
  --color-destructive: oklch(0.577 0.245 27.325);
  --color-destructive-foreground: oklch(1 0 0);
  --color-border: oklch(0.92 0.005 264);
  --color-input: oklch(0.92 0.005 264);
  --color-ring: oklch(0.685 0.216 39);
  --shadow-crisp: 0 1px 2px rgba(26,28,32,0.04), 0 8px 24px rgba(26,28,32,0.06);
  --shadow-lift: 0 2px 4px rgba(26,28,32,0.04), 0 20px 48px rgba(26,28,32,0.10);
  --shadow-accent: 0 8px 24px rgba(255,87,34,0.28);
}

html {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-feature-settings: "ss01","cv11";
  letter-spacing: -0.011em;
}

.glass-card {
  background: color-mix(in oklab, white 72%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid color-mix(in oklab, #1A1C20 8%, transparent);
  box-shadow: var(--shadow-crisp);
}

.mono-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.search-focused {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(255,87,34,0.25) !important;
}

.header-brand-badge {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 9999px;
  background: var(--color-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-brand-dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  background: var(--color-accent);
}

.header-spacer {
  height: 4rem !important;
 }

@media (max-width: 767px) {
  .header-spacer {
    height: 4rem;
  }
}
  /* --- Fix: Font Awesome icon font leaking onto regular text ---
     Something upstream (the Elementor form widget's FA include) is letting
     "Font Awesome 5 Free/Brands" apply outside of actual icon tags, which
     turns normal letters into the FA fallback glyph (the diamond "tofu"
     boxes seen throughout the footer). Re-assert the real font stack with
     higher specificity on every footer element, and cage the icon font to
     genuine icon elements only. */ 
  footer.bg-foreground,
  footer.bg-foreground * {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  }
  footer.bg-foreground .mono-tag,
  footer.bg-foreground .mono-tag * {
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
  }
  footer.bg-foreground i.fas,
  footer.bg-foreground i.far,
  footer.bg-foreground i.fab,
  footer.bg-foreground i[class*="fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", sans-serif !important;
  }

.newsletter-card {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2rem !important;
  max-width: 80rem !important; /* matches max-w-7xl */
  margin: 0 auto !important;
  padding: 0 0 2.5rem 0 !important;
}

/* Variant used when the newsletter block sits between the section divider
   and the copyright row, instead of at the very top of the footer. */
.newsletter-card--inline {
  padding: 0 0 2rem 0 !important;
  border-bottom: none !important;
}

.newsletter-heading {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--background, #fff) !important;
}

.newsletter-sub {
  margin-top: 0.25rem !important;
  font-size: 0.875rem !important;
  color: rgba(255, 255, 255, 0.6) !important; /* matches text-background/60 used elsewhere */
}

/* --- Fix: Elementor's default section/column/widget wrapper styling
   (white background, padding, box-shadow, border-radius) bleeding into
   the dark footer, the same way the icon font did. Elementor's own
   frontend stylesheet applies a light "card" look to sections by default;
   strip it back to transparent/flush at every wrapper level so only our
   .newsletter-card rules control the look. */
/* --- Fix: Elementor's default page/section "Kit" background (white)
   is applied at the top-level .elementor / .elementor-1419 wrapper and
   .elementor-section-wrap, a level above the section/column/widget
   wrappers — so it was still showing through underneath the dark
   footer. Blanket-clear every element inside .elementor to transparent;
   the more specific .elementor-field / .elementor-button rules further
   down still win because they're more specific selectors. */
footer.bg-foreground .elementor,
footer.bg-foreground .elementor * {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

footer.bg-foreground .elementor-section,
footer.bg-foreground .elementor-container,
footer.bg-foreground .elementor-column,
footer.bg-foreground .elementor-column-wrap,
footer.bg-foreground .elementor-widget-wrap,
footer.bg-foreground .elementor-widget,
footer.bg-foreground .elementor-widget-container {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2px !important;
  margin: 0 !important;
}

footer.bg-foreground .elementor-form-fields-wrapper {
  display: flex !important;
  align-items: flex-end !important;
  gap: 1rem !important;
}

/* Form field: dark, bordered, no bright white fill */
footer.bg-foreground .elementor-field-group label {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

footer.bg-foreground .elementor-field {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  padding: 0.6rem 0.75rem !important;
  border-radius: 4px !important;
}

footer.bg-foreground .elementor-field::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Button: swap to the accent color already used for the dots/period marks */
footer.bg-foreground .elementor-button {
  background: var(--accent, #f97316) !important;
  color: #0a0a0a !important;
  border: none !important;
  font-weight: 700 !important;
  padding: 0.6rem 1.25rem !important;
  border-radius: 4px !important;
}

footer.bg-foreground .elementor-button:hover {
  opacity: 0.9 !important;
}
.newshead{
	padding-left: 16px !important;
}