/* ==========================================================================
   LexCall Luxury Legal UI Design System & Comprehensive Utility Stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary-dark: #0F1722;
  --primary-dark-hover: #162232;
  --premium-gold: #CF9E5B;
  --gold-hover: #E4C08C;
  --gold-dark: #A87B3F;
  --gold-text-light: #8A6230;
  --accent-green: #0A3D38;
  --accent-green-hover: #0E524B;
  --bg-light: #F8F6F2;
  --bg-cream: #FAF8F5;
  --text-dark: #1E1E1E;
  --font-heading: "IBM Plex Sans", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-cta: "IBM Plex Sans", sans-serif;
}

/* Typography Tokens
   NOTE: .font-heading / .font-body / .font-cta are generated by the compiled
   Tailwind build (see tailwind.config.js -> theme.extend.fontFamily). They are
   intentionally NOT redeclared here — duplicating them with !important made it
   impossible to override the family on a per-element basis. */

/* Fluid Responsive Typography with CSS clamp()

   Applies to *unstyled* headings only. These deliberately carry no !important
   so that an explicit Tailwind size utility (e.g. `text-3xl sm:text-4xl
   lg:text-5xl` on the hero h1) wins. Bare <h1>/<h2>/<h3> still get the fluid
   luxury scale. */
h1,
.hero-title {
  font-size: clamp(2.25rem, 5vw + 0.75rem, 3.75rem);
  line-height: clamp(2.5rem, 5.5vw + 0.5rem, 4.25rem);
}

h2,
.section-title {
  font-size: clamp(1.75rem, 3.5vw + 0.5rem, 3rem);
  line-height: clamp(2rem, 4vw + 0.5rem, 3.5rem);
}

h3,
.card-title {
  font-size: clamp(1.2rem, 1.8vw + 0.5rem, 1.75rem);
  line-height: clamp(1.5rem, 2.2vw + 0.5rem, 2.25rem);
}

/* Section padding (.py-24/.py-20/.py-16/.py-12) and container widths
   (.max-w-7xl, .max-w-5xl ... .max-w-xl, .mx-auto) are Tailwind utility names
   and are owned by the compiled Tailwind build. They used to be redeclared
   here with !important, which overrode every Tailwind spacing utility on the
   page. In particular `.max-w-7xl { max-width: clamp(100%, 92vw, 80rem) }`
   resolved to 100% at every viewport, so capped containers spanned full width. */

/* Metallic & Gradient Utilities */
.bg-gold-gradient {
  background: linear-gradient(135deg, #F3D291 0%, #D4A24C 50%, #B88E3E 100%) !important;
}

.bg-gold-gradient-hover:hover {
  background: linear-gradient(135deg, #FBE0AA 0%, #E7B85B 50%, #C99A46 100%) !important;
}

.text-gold-gradient {
  background: linear-gradient(135deg, #F3D291 0%, #E7B85B 50%, #D4A24C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.bg-hero-gradient {
  background: linear-gradient(135deg, #0F1722 0%, #111827 50%, rgba(10, 61, 56, 0.85) 100%) !important;
}

/* Glassmorphism Cards & Hero Panels */
.glass-hero {
  background: rgba(15, 23, 34, 0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(212, 162, 76, 0.25) !important;
}

.glass-card-dark {
  background: rgba(15, 23, 34, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.glass-card-dark:hover {
  border-color: rgba(212, 162, 76, 0.4) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

.glass-card-light {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(233, 227, 214, 0.8) !important;
}

/* Neumorphic UI Accents */
.neumorphic-card {
  background: #F8F6F2;
  box-shadow: 8px 8px 20px #e6e2d8, -8px -8px 20px #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.neumorphic-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 12px 12px 28px #ddd8cb, -12px -12px 28px #ffffff;
}

.neumorphic-button {
  background: #F8F6F2;
  box-shadow: 5px 5px 12px #e3e0da, -5px -5px 12px #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.9);
}

.neumorphic-button:hover {
  box-shadow: 7px 7px 16px #ddd9d3, -7px -7px 16px #ffffff;
}

/* Skeuomorphic Metallic Rims & Wax Seals */
.skeuo-gold-ring {
  background: linear-gradient(135deg, #F3D291 0%, #D4A24C 45%, #B88E3E 75%, #7C5513 100%);
  padding: 3px;
  border-radius: 9999px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.9), inset 0 -1.5px 1.5px rgba(0, 0, 0, 0.4);
}

.skeuo-wax-seal {
  background: radial-gradient(circle at 35% 35%, #F3D291 0%, #D4A24C 45%, #8E651D 90%, #5E400E 100%);
  border: 1px solid #F3D291;
  box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.9), inset 0 -1.5px 2px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.25);
}

.skeuo-icon-badge {
  background: linear-gradient(135deg, #FFFFFF 0%, #F4F1EA 100%);
  box-shadow: 0 4px 10px rgba(15, 23, 34, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
  border: 1px solid #E9E3D6;
}

/* Shadows & Glows
   .shadow-gold-glow now ships from tailwind.config.js (theme.extend.boxShadow). */
.shadow-gold-hover:hover {
  box-shadow: 0 0 30px rgba(231, 184, 91, 0.6) !important;
}

/* ---------------------------------------------------------------------------
   REMOVED: "Layout Fallbacks for Tailwind Utility Classes"

   This block hand-rolled display / flex / grid / gap / rounded / max-width
   utilities under the exact Tailwind class names, every one of them flagged
   !important. It predates the real Tailwind build (npm run build:css ->
   public/assets/css/tailwind.css) and is now not just redundant but harmful:
   !important beats the compiled Tailwind rules regardless of link order, so
   the real utilities silently lost. Concretely it caused:

     - Only a partial variant set existed (lg:col-span-3..7, no col-span-8;
       grid-cols-1/2/7 but no 3/4), so layouts that used anything outside the
       hand-written list mixed overridden and non-overridden columns.
     - .max-w-xl .. .max-w-5xl forced `margin-left/right: auto`, centring
       left-aligned content such as the hero sub-headline.
     - Every gap/rounded value was frozen, ignoring per-element utilities
       like gap-3.5 or rounded-2xl variants.

   The compiled Tailwind sheet generates all of these correctly, on demand,
   for every class actually present in the Blade templates.
   --------------------------------------------------------------------------- */

/* Conflict resolution safeguards against old style.css

   REMOVED: `header.fixed { background-color: transparent !important }`

   This was meant to suppress the white sticky bar that style.css:432 applies
   via `header.fixed { background-color: var(--white) }`. But transparent is
   not the right answer for the redesigned navbar, which is solid dark navy
   with white text: once assets/js/script.js added .fixed on scroll (>130px),
   the bar went see-through and the white nav text sat on the cream page
   background, becoming unreadable.

   The redesigned header is styled in lexcall-redesign.css instead, under
   `header#mainHeader`, which also neutralises the `position: fixed` half of
   the legacy rule. See "6. Sticky Header Reclamation" there. */

.search-modal .modal-content {
  background-color: #0F1722 !important;
  border: 1px solid rgba(212, 162, 76, 0.4) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

a.text-decoration-none {
  text-decoration: none !important;
}

.btn:focus,
.btn:active {
  box-shadow: none !important;
  outline: none !important;
}