/* ==========================================================================
   DESIGN SYSTEM — Premium B2B Law Firm (Redesign v2)
   ========================================================================== */

/* ---------- CSS VARIABLES (Light Theme — default) ---------- */
:root {
  --bg-main: #FFFFFF;
  --bg-block: #F8FAFC;
  --bg-header: rgba(255, 255, 255, 0.9);
  --color-heading: #1A202C;
  --color-text: #1A202C;
  --color-text-muted: #4A5568;
  --color-border: #E2E8F0;
  --btn-cta-bg: #0F4C3A;
  --btn-cta-bg-hover: #0a3528; /* 10% darken approx */
  --btn-cta-text: #FFFFFF;
  --btn-outline-border: #0F4C3A;
  --btn-outline-text: #0F4C3A;
  --input-bg: #F8FAFC;
  --input-border: #E2E8F0;
  --input-focus-border: #0F4C3A;
  --input-placeholder: #718096;
  --card-shadow: 0 4px 24px rgba(0,0,0,0.03);
  --card-hover-shadow: 0 12px 32px rgba(0,0,0,0.06);
  --accent-line: #0F4C3A;
  --footer-bg: #F8FAFC;
  --footer-text: #4A5568;
  --noise-overlay: none;
  --section-gap: 120px;
  --section-gap-mobile: 64px;
  --selection-bg: #0F4C3A;
  --selection-text: #FFFFFF;
  
  /* Font families */
  --font-heading: 'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Roboto, sans-serif;
}

/* ---------- CSS VARIABLES (Dark Theme) ---------- */
[data-theme="dark"],
[data-bs-theme="dark"] {
  --bg-main: #121212;
  --bg-block: #1E1E1E;
  --bg-header: rgba(18, 18, 18, 0.9);
  --color-heading: #E2E8F0;
  --color-text: #E2E8F0;
  --color-text-muted: #94A3B8;
  --color-border: #2D3748;
  --btn-cta-bg: #10B981;
  --btn-cta-bg-hover: #059669; /* approx darken */
  --btn-cta-text: #FFFFFF;
  --btn-outline-border: #10B981;
  --btn-outline-text: #10B981;
  --input-bg: #1E1E1E;
  --input-border: #2D3748;
  --input-focus-border: #10B981;
  --input-placeholder: #94A3B8;
  --card-shadow: none;
  --card-hover-shadow: none;
  --accent-line: #10B981;
  --footer-bg: #1E1E1E;
  --footer-text: #94A3B8;
  --selection-bg: #10B981;
  --selection-text: #FFFFFF;
  --noise-overlay: none;
}

/* ---------- GLOBAL RESET & BASE ---------- */
::selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

::-moz-selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px; /* Body text 10-10.5pt (~14px) */
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--bg-main);
  background-image: var(--noise-overlay);
  background-repeat: repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease, color 0.3s ease;
  margin: 0;
  padding: 0;
}

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  margin-top: 0;
  margin-bottom: 24px;
  transition: color 0.3s ease;
  text-decoration: none !important; /* No underlines for headers */
}

/* Header Accents instead of underlines */
.accent-header {
  position: relative;
  padding-left: 16px;
}
.accent-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  background-color: var(--accent-line);
  border-radius: 2px;
}

h1 { 
  font-size: 32px; /* 24pt approx */
  font-weight: 700;
  line-height: 1.2;
}
h2 { 
  font-size: 24px; /* 18pt approx */
  font-weight: 600; /* Medium/Bold */
  line-height: 1.25;
}
h3 { 
  font-size: 16px; /* 12pt approx */
  font-weight: 600; /* Semi-Bold */
  line-height: 1.3;
}
.caption, small {
  font-size: 12px; /* 9pt approx */
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text-muted);
}

p, li, td, th, label, span, div {
  transition: color 0.3s ease;
}

p {
  margin-bottom: 16px;
}

a {
  color: var(--accent-line);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover { color: var(--btn-cta-bg-hover); }

/* ---------- CONTAINER ---------- */
.container {
  max-width: 1440px; /* Adapting for Desktop 1440px+ */
  margin: 0 auto;
  padding: 0 32px; /* multiple of 8 */
}

/* ==========================================================================
   HEADER — Minimalist sticky
   ========================================================================== */
header.sticky-top {
  z-index: 1030;
  background: var(--bg-header) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.4s ease, border-color 0.3s ease;
}

.social-nav {
  display: none; /* Moved top nav functionality to main nav if needed, or keep minimal */
}

/* Main nav */
.main-nav {
  padding: 16px 0;
}

#mobile-header-wrapper {
  width: 100%;
}
@media (min-width: 768px) {
  #mobile-header-wrapper {
    width: auto;
  }
}

/* Navbar brand */
.navbar-brand span {
  color: var(--color-heading) !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
}

/* Navbar toggler */
.navbar-toggler {
  border-color: var(--color-border) !important;
  padding: 8px;
}
.navbar-toggler-icon {
  filter: var(--color-heading) == '#FFFFFF' ? invert(1) : none;
}
[data-theme="dark"] .navbar-toggler-icon,
[data-bs-theme="dark"] .navbar-toggler-icon {
  filter: invert(1);
}

/* Nav links */
.main-nav .nav-link {
  color: var(--color-text-muted) !important;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 16px !important;
  position: relative;
  transition: all 0.3s ease;
  border-radius: 8px;
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active {
  color: var(--color-heading) !important;
  background-color: var(--bg-block);
}

/* Social + lang buttons in header */
.custom-social-lang-btn {
  padding: 8px 16px !important;
  font-size: 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none !important;
  color: var(--color-text-muted) !important;
  background: transparent !important;
  transition: color 0.3s ease;
  min-height: 44px; /* Touch target size */
}
.custom-social-lang-btn:hover {
  color: var(--color-heading) !important;
}

/* Dropdown menus */
.dropdown-menu {
  background: var(--bg-block) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--card-shadow);
  border-radius: 8px;
  padding: 8px;
}
.dropdown-menu .dropdown-item {
  color: var(--color-text) !important;
  border-radius: 6px;
  padding: 8px 16px;
  transition: background-color 0.2s ease;
}
.dropdown-menu .dropdown-item:hover {
  background: var(--bg-main) !important;
  color: var(--color-heading) !important;
}

/* ==========================================================================
   THEME SWITCH — Minimalist toggle
   ========================================================================== */
.theme-switch-wrapper {
  display: inline-flex;
  align-items: center;
  margin-left: 16px;
}
.theme-switch {
  display: inline-block;
  height: 32px;
  position: relative;
  width: 60px;
  margin-bottom: 0;
  user-select: none;
}
.theme-switch input { display: none; }

.slider {
  background-color: var(--bg-main);
  bottom: 0; cursor: pointer; left: 0;
  position: absolute; right: 0; top: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  border: 1px solid var(--color-border);
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0; overflow: hidden;
  border-radius: 32px;
}

.slider .knob {
  background-color: var(--bg-block);
  bottom: 3px; left: 3px; position: absolute;
  height: 24px; width: 24px; z-index: 3;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background-color 0.3s ease;
}

.sun-icon-wrapper, .moon-icon-wrapper {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none; z-index: 1;
}
.sun-icon-wrapper { right: 6px; opacity: 1; }
.moon-icon-wrapper { left: 6px; opacity: 0; transform: translateY(-50%) scale(0.6); }
.sun-icon, .moon-icon { width: 14px; height: 14px; color: var(--color-text-muted); }

.theme-switch.is-dark .slider {
  background-color: #1A1A1E;
  border-color: #2A2A2E;
}
.theme-switch.is-dark .slider .knob {
  background-color: #2D3748;
}
.theme-switch.is-dark .slider .sun-icon-wrapper { opacity: 0; transform: translateY(-50%) scale(0.6); }
.theme-switch.is-dark .slider .moon-icon-wrapper { opacity: 1; transform: translateY(-50%) scale(1); }

/* ==========================================================================
   BUTTONS — CTA & Outline
   ========================================================================== */
.btn-cta, .btn-primary, .btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--btn-cta-bg) !important;
  color: var(--btn-cta-text) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  min-height: 44px; /* Target touch size */
  border: none !important;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
}
.btn-cta:hover, .btn-primary:hover, .btn-submit:hover {
  background-color: var(--btn-cta-bg-hover) !important;
}

.btn-outline, .btn-outline-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent !important;
  color: var(--btn-outline-text) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 23px; /* 1px less because of border */
  min-height: 44px;
  border: 1px solid var(--btn-outline-border) !important;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-outline:hover, .btn-outline-secondary:hover {
  background-color: var(--btn-cta-bg) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  background: var(--bg-block);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.4s ease;
  padding: 24px;
}
.card:hover {
  /* No transform on hover for mobile, maybe keep minimal for desktop */
  @media (min-width: 1024px) {
    transform: translateY(-4px);
    box-shadow: var(--card-hover-shadow);
  }
}
.card-img-top { height: 240px; overflow: hidden; border-radius: 8px; margin-bottom: 24px; }
.card-img-top img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s ease;
}
[data-theme="dark"] .card-img-top img,
[data-bs-theme="dark"] .card-img-top img {
  filter: brightness(0.85); /* Darken image slightly in dark mode */
}
.card-body { padding: 0; display: flex; flex-direction: column; }
.card-title {
  font-family: var(--font-heading);
  font-size: 24px; font-weight: 600;
  margin-bottom: 16px; color: var(--color-heading);
}
.card-text {
  font-size: 14px; color: var(--color-text-muted);
  margin-bottom: 24px; flex-grow: 1;
}

/* ==========================================================================
   FORMS
   ========================================================================== */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="url"],
textarea, select {
  display: block;
  width: 100%;
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--color-text) !important;
  border-radius: 8px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  min-height: 44px;
  transition: border-color 0.3s ease, background-color 0.4s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--input-focus-border) !important;
  outline: none !important;
  background-color: var(--bg-main) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--input-placeholder) !important;
}

/* ==========================================================================
   SERVICE CARDS (2-column layout)
   ========================================================================== */
.service-card {
  background-color: var(--bg-block);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  margin-bottom: 48px;
  overflow: hidden;
  transition: background-color 0.4s ease;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: 1px solid var(--color-border);
}
.service-card.service-card-reverse {
  flex-direction: row-reverse;
}
.service-content {
  flex: 1;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.service-image {
  flex: 1;
  min-height: 400px;
}
.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-theme="dark"] .service-image img,
[data-bs-theme="dark"] .service-image img {
  filter: brightness(0.8);
}
.service-title h2 {
  color: var(--color-heading);
  font-size: 32px; font-weight: 700;
  margin-bottom: 24px;
}
.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.service-tag {
  background: var(--bg-main);
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  border-radius: 32px;
  font-size: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.service-tag:active {
  background: var(--color-border);
}
.service-buttons {
  display: flex; flex-wrap: wrap;
  gap: 16px;
}

/* ==========================================================================
   TEAM
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 48px;
}
.team-member {
  background: var(--bg-block);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  padding: 24px;
}
.team-member-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 24px;
  background: var(--bg-main);
}
.team-member h3 {
  margin-bottom: 8px;
  font-size: 20px;
}
.team-member .position {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: 16px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer, footer.bg-dark {
  background-color: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  transition: background-color 0.4s ease;
  border-top: 1px solid var(--color-border);
  padding: 64px 0;
}
footer a { color: var(--footer-text) !important; }
footer a:hover { color: var(--accent-line) !important; }
footer p { color: var(--footer-text) !important; margin: 0; }

/* ==========================================================================
   LISTS & CHECKBOXES (Collaboration)
   ========================================================================== */
ul.custom-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}
ul.custom-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px;
  color: var(--color-text-muted);
}
ul.custom-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-line);
  font-weight: 700;
  font-size: 16px;
}

/* ==========================================================================
   SECTION SPACING — "Air" concept
   ========================================================================== */
.section-gap {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .service-card,
  .service-card.service-card-reverse {
    flex-direction: column;
  }
  .service-image {
    min-height: 300px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px; /* 16px side padding on mobile */
  }
  .section-gap {
    padding-top: var(--section-gap-mobile);
    padding-bottom: var(--section-gap-mobile);
  }
  .navbar-collapse {
    background: var(--bg-block);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    margin-top: 16px;
  }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  .service-content {
    padding: 24px;
  }
  .service-buttons .btn {
    width: 100%;
  }
  
  /* Reset hover states on mobile to avoid sticking */
  .btn-cta:hover, .btn-outline:hover {
    transform: none;
  }
  .service-tag:hover {
    background: var(--bg-main);
  }
}