/* ==========================================================================
   Craftegon Corporate Services (CCS) — Master Corporate Theme
   Professional Corporate Navy, White & Slate Visual Identity
   Path: assets/css/theme.css
   ========================================================================== */
@import url('/assets/css/chat-widget.css');
@import url('/assets/css/portal.css');

/* --------------------------------------------------------------------------
   1. Base & Global Resets
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  background-color: var(--bg-primary, #FFFFFF);
  color: var(--text-main, #334155);
  font-family: var(--font-body);
  font-size: var(--text-base, 1rem);
  line-height: var(--lh-relaxed, 1.65);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Accessible Focus States */
:focus-visible {
  outline: 2px solid var(--navy-800, #0B2545);
  outline-offset: 2px;
}

::selection {
  background-color: var(--navy-800, #0B2545);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   2. Typography System
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .noble-heading {
  font-family: var(--font-heading);
  color: var(--text-dark, #0A192F);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--lh-tight, 1.25);
  margin-top: 0;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; }

p {
  margin: 0 0 1rem;
  line-height: var(--lh-relaxed, 1.65);
  color: var(--text-main, #334155);
}

a {
  color: var(--navy-800, #0B2545);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--navy-600, #1C4D82);
}

.font-mono,
.tech-label,
.meta-tag,
.status-indicator,
.pricing-figure,
.stage-tag,
.statutory-ref,
.code-snippet,
.if-pricing-price,
.cin-display,
.llpin-display,
.gstin-display {
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   3. Predictable Containers & Sections
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.container-narrow {
  max-width: var(--container-narrow, 900px);
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.section {
  padding: 4.5rem 1.5rem;
}

.section-alt,
.section-pearl,
.section-ivory {
  background-color: var(--bg-secondary, #F8FAFC);
  border-top: 1px solid var(--border-color, #E2E8F0);
  border-bottom: 1px solid var(--border-color, #E2E8F0);
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}

.section-header h2 {
  margin-bottom: 0.75rem;
}

.section-header p {
  font-size: 1.05rem;
  color: var(--text-muted, #64748B);
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. Buttons & Interactive Controls
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-md, 8px);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1.5px solid transparent;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
}

/* Primary Button: Deep Corporate Navy */
.btn-primary,
.btn-navy,
.btn-sovereign-gold,
.if-btn-primary {
  background-color: var(--navy-800, #0B2545) !important;
  color: #FFFFFF !important;
  border-color: var(--navy-800, #0B2545) !important;
  box-shadow: 0 1px 3px rgba(11, 37, 69, 0.2);
}

.btn-primary:hover,
.btn-navy:hover,
.btn-sovereign-gold:hover,
.if-btn-primary:hover {
  background-color: var(--navy-900, #071527) !important;
  border-color: var(--navy-900, #071527) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(11, 37, 69, 0.25);
}

/* Secondary Button: Clean Crisp Outline */
.btn-secondary,
.btn-outline,
.btn-sovereign-glass,
.btn-royal-outline,
.if-btn-secondary {
  background-color: #FFFFFF !important;
  color: var(--navy-800, #0B2545) !important;
  border-color: var(--border-hover, #CBD5E1) !important;
}

.btn-secondary:hover,
.btn-outline:hover,
.btn-sovereign-glass:hover,
.btn-royal-outline:hover,
.if-btn-secondary:hover {
  background-color: var(--bg-secondary, #F8FAFC) !important;
  border-color: var(--navy-800, #0B2545) !important;
  color: var(--navy-800, #0B2545) !important;
  transform: translateY(-1px);
}

/* Accent Button: Muted Gold Accent */
.btn-accent,
.btn-royal-gold {
  background-color: var(--brand-gold, #C59B27) !important;
  color: #FFFFFF !important;
  border-color: var(--brand-gold, #C59B27) !important;
}

.btn-accent:hover,
.btn-royal-gold:hover {
  background-color: var(--brand-gold-hover, #A37F1D) !important;
  border-color: var(--brand-gold-hover, #A37F1D) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   5. Standard Card System
   -------------------------------------------------------------------------- */
.card,
.noble-card,
.vertical-card,
.service-card {
  background: #FFFFFF;
  border: 1px solid var(--border-color, #E2E8F0);
  border-radius: var(--radius-md, 8px);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.05));
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.card:hover,
.noble-card:hover,
.vertical-card:hover,
.service-card:hover {
  border-color: var(--border-hover, #CBD5E1);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(15, 23, 42, 0.06));
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   6. Badges & Chips
   -------------------------------------------------------------------------- */
.noble-badge,
.badge,
.gov-statute-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full, 9999px);
  background: var(--navy-50, #F0F5FA);
  color: var(--navy-800, #0B2545);
  border: 1px solid var(--navy-100, #E6EEF7);
}

.badge-gold {
  background: rgba(197, 155, 39, 0.08);
  color: var(--brand-gold-hover, #A37F1D);
  border-color: rgba(197, 155, 39, 0.25);
}

.badge-success {
  background: var(--success-light, #ECFDF5);
  color: var(--success, #059669);
  border-color: rgba(5, 150, 105, 0.2);
}

/* --------------------------------------------------------------------------
   7. Form Inputs & Elements
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-dark, #0A192F);
  background: #FFFFFF;
  border: 1px solid var(--border-color, #E2E8F0);
  border-radius: var(--radius-md, 8px);
  padding: 0.75rem 1rem;
  outline: none;
  transition: all 0.2s ease;
  width: 100%;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--navy-800, #0B2545);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(11, 37, 69, 0.15));
}

label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark, #0A192F);
  margin-bottom: 0.4rem;
  display: block;
}

/* --------------------------------------------------------------------------
   8. Responsive Form Layouts & Touch Ergonomics
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .if-lead-form div[style*="grid-template-columns"],
  form div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   9. Standardized Filter Chips & Category Selectors
   -------------------------------------------------------------------------- */
.filter-chips-group,
.conv-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.filter-chip,
.conv-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #FFFFFF;
  border: 1px solid var(--border-color, #E2E8F0);
  border-radius: var(--radius-full, 9999px);
  padding: 0.45rem 1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main, #334155);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.filter-chip:hover,
.conv-filter-btn:hover {
  background: var(--navy-50, #F0F5FA);
  border-color: var(--navy-300, #9FB3C8);
  color: var(--navy-800, #0B2545);
}

.filter-chip.active,
.conv-filter-btn.active {
  background: var(--navy-800, #0B2545) !important;
  color: #FFFFFF !important;
  border-color: var(--navy-800, #0B2545) !important;
  box-shadow: 0 1px 4px rgba(11, 37, 69, 0.2);
}

/* --------------------------------------------------------------------------
   10. Reusable Statutory Notice & Disclosure Panels
   -------------------------------------------------------------------------- */
.statutory-notice-box,
.statutory-disclosure-panel {
  background: var(--bg-secondary, #F8FAFC);
  border: 1px solid var(--border-color, #E2E8F0);
  border-left: 4px solid var(--brand-gold, #C59B27);
  padding: 1.15rem 1.4rem;
  border-radius: var(--radius-md, 8px);
  font-size: 0.82rem;
  color: var(--text-muted, #64748B);
  line-height: 1.6;
}

.statutory-notice-box strong,
.statutory-disclosure-panel strong {
  color: var(--text-dark, #0A192F);
}

.statutory-notice-box a,
.statutory-disclosure-panel a {
  color: var(--navy-800, #0B2545);
  text-decoration: underline;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   11. Unified Diagnostic Tools Card System
   -------------------------------------------------------------------------- */
.tools-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.75rem;
  margin: 2rem 0 3.5rem;
}

@media (max-width: 640px) {
  .tools-hub-grid {
    grid-template-columns: 1fr;
  }
}

.tools-hub-card {
  background: #FFFFFF;
  border: 1px solid var(--border-color, #E2E8F0);
  border-radius: var(--radius-md, 8px);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(11, 37, 69, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  color: inherit;
  position: relative;
}

.tools-hub-card:hover {
  border-color: var(--navy-600, #1C4D82);
  box-shadow: 0 8px 24px -4px rgba(11, 37, 69, 0.08);
  transform: translateY(-2px);
}

.tools-hub-card.featured {
  border-color: var(--brand-gold, #C59B27);
  box-shadow: 0 4px 16px -2px rgba(197, 155, 39, 0.12);
}

.tools-hub-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  gap: 0.5rem;
}

.tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.65rem;
  border-radius: 4px;
  background: rgba(197, 155, 39, 0.08);
  color: var(--brand-gold-hover, #A37F1D);
  border: 1px solid rgba(197, 155, 39, 0.25);
}

.tool-category-label {
  font-size: 0.72rem;
  color: var(--text-muted, #64748B);
  font-weight: 600;
}

.tool-title {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--navy-800, #0B2545);
  margin: 0 0 0.55rem;
  line-height: 1.3;
}

.tool-desc {
  font-size: 0.86rem;
  color: var(--text-muted, #64748B);
  line-height: 1.55;
  margin: 0 0 1.25rem;
  flex-grow: 1;
}

.tool-specs-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--bg-secondary, #F8FAFC);
  border: 1px solid var(--border-color, #E2E8F0);
  border-radius: var(--radius-sm, 6px);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.78rem;
  color: var(--text-main, #334155);
  line-height: 1.45;
}

.tool-spec-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.tool-spec-item strong {
  color: var(--navy-800, #0B2545);
  white-space: nowrap;
}

.tool-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-color, #E2E8F0);
  padding-top: 0.85rem;
  margin-top: auto;
}

.tool-type-indicator {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted, #64748B);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tool-btn-action {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy-800, #0B2545);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
}

.tools-hub-card:hover .tool-btn-action {
  color: var(--brand-gold, #C59B27);
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   12. Priority 6: Mobile Refinements, Accessibility Polish & QA Controls
   -------------------------------------------------------------------------- */

/* A. Skip to Main Content Link (WCAG 2.2 AA Bypass Block) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1.5rem;
  background: var(--navy-800, #0B2545);
  color: #FFFFFF !important;
  padding: 0.65rem 1.25rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: var(--radius-sm, 6px);
  border: 1.5px solid var(--brand-gold, #C59B27);
  box-shadow: 0 4px 16px rgba(11, 37, 69, 0.35);
  z-index: 9999;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  outline: 2px solid var(--brand-gold, #C59B27);
  outline-offset: 2px;
}

/* B. Text & Word-Wrapping Safeguards for Narrow Viewports (320px - 375px) */
h1, h2, h3, h4, h5, h6, p, .noble-heading, .section-heading, .tool-title, .key-service-title {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* C. Responsive Table Container (Horizontal Scroll without Page Clipping) */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
}

table {
  max-width: 100%;
}

/* D. High-Contrast Focus Ring on Dark Surfaces */
.if-footer :focus-visible,
.btn-primary:focus-visible,
.if-btn-primary:focus-visible,
.hero-cta-primary:focus-visible,
.hero-search-inline-btn:focus-visible,
.filter-chip.active:focus-visible,
.conv-filter-btn.active:focus-visible {
  outline: 2px solid var(--brand-gold, #C59B27) !important;
  outline-offset: 2px !important;
}

/* E. Standardized Disabled & Inactive States */
button:disabled,
.btn:disabled,
.btn[aria-disabled="true"],
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* F. Mobile Viewport & Touch Target Ergonomics */
@media (max-width: 768px) {
  /* Prevent iOS Safari auto-zoom when tapping inputs */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 640px) {
  /* Comfortable Touch Targets (WCAG 2.2 AA Minimum Target Size) */
  .btn,
  .filter-chip,
  .conv-filter-btn,
  .if-mobile-nav-link,
  .quick-need-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .tools-hub-card {
    padding: 1.35rem 1.15rem;
  }

  .tools-hub-card-header {
    flex-wrap: wrap;
  }
}

/* G. Prefers Reduced Motion (WCAG 2.2 AA Motion Sensitivity) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}