/*
Theme Name:   Raven Web Designs Theme
Theme URI:    https://ravenwebdesigns.com/
Author:       Raven Web Designs
Author URI:   https://ravenwebdesigns.com/
Description:  A custom WordPress landing page theme for Raven Web Designs, built with Bootstrap 5.
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  raven
Tags:         bootstrap, landing-page, business, responsive
*/

/* ─── Design Tokens ───────────────────────────────────────────────────────── */

:root {
  /* Backgrounds */
  --bg-base:        #0C0E13;
  --bg-surface:     #161921;
  --bg-raised:      #1E2230;
  --bg-overlay:     #252A3A;

  /* Borders */
  --border-subtle:  #252A3A;
  --border-default: #2F374F;
  --border-strong:  #3D4866;

  /* Text */
  --text-primary:   #F0F2F7;
  --text-secondary: #8392A8;
  --text-muted-rwd: #4A556A;

  /* Brand / Trust */
  --indigo-light:   #818CF8;
  --indigo:         #6366F1;
  --indigo-dark:    #4338CA;
  --indigo-subtle:  rgba(99, 102, 241, 0.12);

  /* CTA — orange on dark converts best */
  --orange:         #F97316;
  --orange-hover:   #EA6C0A;
  --orange-deep:    #C2570A;
  --orange-subtle:  rgba(249, 115, 22, 0.12);

  /* Status */
  --success:        #22C55E;
  --success-subtle: rgba(34, 197, 94, 0.12);
  --warning:        #EAB308;
  --warning-subtle: rgba(234, 179, 8, 0.12);
  --error:          #EF4444;
  --error-subtle:   rgba(239, 68, 68, 0.12);

  /* Typography */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

/* ─── Base ────────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-base) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-size: 15px;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em;
}

p    { color: var(--text-secondary); }
strong { color: var(--text-primary); }
small  { color: var(--text-secondary); }

a            { color: var(--indigo-light); transition: color 0.15s ease; }
a:hover      { color: var(--indigo); }

.bi { vertical-align: -0.125em; }

/* ─── Bootstrap utility overrides ────────────────────────────────────────── */
/* Prefix with [data-bs-theme="dark"] to match Bootstrap's dark-mode specificity */

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-white,
.bg-light,
.bg-white {
  background-color: var(--bg-surface) !important;
}

.text-muted    { color: var(--text-secondary) !important; }
.text-dark     { color: var(--text-primary)   !important; }

.border-top,
.border-bottom { border-color: var(--border-subtle) !important; }

.lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary) !important;
}

.display-3 { font-family: var(--font-display) !important; font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary) !important; }
.display-4 { font-family: var(--font-display) !important; font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary) !important; }
.display-5 { font-family: var(--font-display) !important; font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary) !important; }
.display-6 { font-family: var(--font-display) !important; font-weight: 700; font-size: 2.5rem; color: var(--indigo-light) !important; }

.letter-spacing-1 { letter-spacing: 0.08em; }

/* ─── Navbar ──────────────────────────────────────────────────────────────── */

.rwd-navbar {
  background-color: rgba(12, 14, 19, 0.97) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle) !important;
  min-height: 60px;
}

.rwd-navbar .navbar-brand { color: var(--text-primary) !important; }

.rwd-navbar .nav-link {
  font-family: var(--font-body) !important;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary) !important;
  transition: color 0.15s ease;
}

.rwd-navbar .nav-link:hover { color: var(--text-primary) !important; }

.rwd-navbar .navbar-toggler {
  border-color: var(--border-default);
  color: var(--text-secondary);
}

.rwd-navbar .navbar-toggler-icon { filter: invert(0.6); }

.rwd-navbar .navbar-collapse {
  /* handled below in responsive */
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  font-family: var(--font-body) !important;
  font-weight: 600;
  transition: all 0.15s ease;
}

/* CTA buttons — orange background, off-white text, no gradient */
[data-bs-theme="dark"] .btn-primary,
.btn-primary,
.btn-cta {
  --bs-btn-bg:                 #F97316;
  --bs-btn-border-color:       #F97316;
  --bs-btn-hover-bg:           #EA6C0A;
  --bs-btn-hover-border-color: #EA6C0A;
  --bs-btn-color:              #F0F2F7;
  --bs-btn-hover-color:        #F0F2F7;
  --bs-gradient:               none;
  background-color:  #F97316 !important;
  background-image:  none !important;
  border-color:      #F97316 !important;
  color:             #F0F2F7 !important;
}
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus,
[data-bs-theme="dark"] .btn-primary:active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-cta:hover,     .btn-cta:focus,     .btn-cta:active {
  --bs-gradient:     none;
  background-color:  #EA6C0A !important;
  background-image:  none !important;
  border-color:      #EA6C0A !important;
  color:             #F0F2F7 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(249, 115, 22, 0.35) !important;
}

/* Indigo outline — secondary actions */
.btn-outline-primary {
  --bs-btn-color:              var(--indigo-light);
  --bs-btn-border-color:       var(--indigo);
  --bs-btn-hover-bg:           var(--indigo);
  --bs-btn-hover-border-color: var(--indigo);
  --bs-btn-hover-color:        #F0F2F7;
  background: transparent !important;
  color: var(--indigo-light) !important;
  border: 1px solid var(--indigo) !important;
}
.btn-outline-primary:hover {
  background: var(--indigo-light) !important;
  border-color: var(--indigo-light) !important;
  color: #0C0E13 !important;
}

/* Hero outline button */
.btn-outline-hero {
  background: transparent;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default);
  font-family: var(--font-body);
  font-weight: 600;
}
.btn-outline-hero:hover {
  background: var(--bg-raised);
  border-color: var(--border-strong);
  color: var(--text-primary) !important;
}

/* Portfolio card outline variants */
.btn-outline-success  { color: var(--success) !important; border-color: var(--success) !important; background: transparent !important; }
.btn-outline-success:hover  { background: var(--success-subtle) !important; }

.btn-outline-warning  { color: var(--warning) !important; border-color: var(--warning) !important; background: transparent !important; }
.btn-outline-warning:hover  { background: var(--warning-subtle) !important; }

.btn-outline-info     { color: #60A5FA !important; border-color: #60A5FA !important; background: transparent !important; }
.btn-outline-info:hover     { background: rgba(96,165,250,0.12) !important; }

.btn-outline-secondary { color: var(--text-secondary) !important; border-color: var(--border-default) !important; background: transparent !important; }
.btn-outline-secondary:hover { background: var(--bg-raised) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; }

.btn-outline-danger   { color: var(--error) !important; border-color: var(--error) !important; background: transparent !important; }
.btn-outline-danger:hover   { background: var(--error-subtle) !important; }

/* ─── Cards ───────────────────────────────────────────────────────────────── */

.card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
}

.card-footer {
  background-color: transparent !important;
  border-top-color: var(--border-subtle) !important;
}

.rwd-card-raised {
  background-color: var(--bg-raised) !important;
  border-color: var(--border-default) !important;
  border-radius: 12px !important;
}

/* Popular pricing card */
.card.border-primary { border-color: var(--indigo) !important; overflow: visible; }

/* Hover lift */
.hover-lift,
.portfolio-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover,
.portfolio-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-default) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

.portfolio-card .card-img-top { transition: opacity 0.2s ease; }
.portfolio-card:hover .card-img-top { opacity: 0.88; }

/* ─── Badges ──────────────────────────────────────────────────────────────── */

.badge { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }

.badge.bg-primary   { background-color: var(--indigo-subtle) !important;    color: var(--indigo-light) !important; border: 1px solid rgba(99,102,241,0.25); }
.badge.bg-success   { background-color: var(--success-subtle) !important;   color: var(--success) !important;      border: 1px solid rgba(34,197,94,0.25); }
.badge.bg-warning   { background-color: var(--warning-subtle) !important;   color: var(--warning) !important;      border: 1px solid rgba(234,179,8,0.25); }
.badge.bg-danger    { background-color: var(--error-subtle) !important;     color: var(--error) !important;        border: 1px solid rgba(239,68,68,0.25); }
.badge.bg-info      { background-color: rgba(96,165,250,0.12) !important;   color: #60A5FA !important;             border: 1px solid rgba(96,165,250,0.25); }
.badge.bg-secondary { background-color: rgba(131,146,168,0.12) !important;  color: var(--text-secondary) !important; border: 1px solid rgba(131,146,168,0.2); }

/* ─── Icon circles ────────────────────────────────────────────────────────── */

.rounded-circle.bg-primary,
.bg-primary.bg-opacity-10   { background-color: var(--indigo-subtle) !important; }
.rounded-circle.bg-success,
.bg-success.bg-opacity-10   { background-color: var(--success-subtle) !important; }
.rounded-circle.bg-warning,
.bg-warning.bg-opacity-10   { background-color: var(--warning-subtle) !important; }
.rounded-circle.bg-danger,
.bg-danger.bg-opacity-10    { background-color: var(--error-subtle) !important; }
.rounded-circle.bg-info,
.bg-info.bg-opacity-10      { background-color: rgba(96,165,250,0.12) !important; }
.rounded-circle.bg-secondary,
.bg-secondary.bg-opacity-10 { background-color: rgba(131,146,168,0.12) !important; }

.text-primary   { color: var(--indigo-light) !important; }
.text-success   { color: var(--success) !important; }
.text-warning   { color: var(--warning) !important; }
.text-danger    { color: var(--error) !important; }
.text-info      { color: #60A5FA !important; }
.text-secondary { color: var(--text-secondary) !important; }

/* ─── Forms ───────────────────────────────────────────────────────────────── */

.form-control,
.form-select {
  background-color: var(--bg-raised) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 8px;
  color: var(--text-primary) !important;
  font-family: var(--font-body);
  font-size: 14px;
}

.form-control::placeholder { color: var(--text-muted-rwd); }

.form-control:focus,
.form-select:focus {
  background-color: var(--bg-raised) !important;
  border-color: var(--indigo) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
}

.form-label {
  color: var(--text-secondary) !important;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.form-check-label { color: var(--text-secondary) !important; font-size: 14px; }

.form-check-input {
  background-color: var(--bg-raised) !important;
  border-color: var(--border-default) !important;
}
.form-check-input:checked {
  background-color: var(--indigo) !important;
  border-color: var(--indigo) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
}

.form-select option {
  background-color: var(--bg-overlay);
  color: var(--text-primary);
}

/* ─── Sections ────────────────────────────────────────────────────────────── */

section { position: relative; }

#services  { background-color: var(--bg-surface) !important; }
#portfolio { background-color: var(--bg-base) !important; }
#pricing   { background-color: var(--bg-surface) !important; }
#why-us    { background-color: var(--bg-base) !important; }
#about     { background-color: var(--bg-surface) !important; }
#contact   { background-color: var(--bg-base) !important; }
#trust     { background-color: var(--bg-surface) !important; }

/* ─── Hero ────────────────────────────────────────────────────────────────── */

.hero-section { position: relative; overflow: hidden; }
.min-vh-75    { min-height: 75vh; }

/* ─── Shadows ─────────────────────────────────────────────────────────────── */

.shadow-sm { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important; }
.shadow    { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important; }
.shadow-lg { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55) !important; }

/* ─── Pricing ─────────────────────────────────────────────────────────────── */

.card .display-4 { color: var(--text-primary) !important; }
#pricing .list-unstyled li { color: var(--text-secondary); }

/* ─── Portfolio result callout borders ────────────────────────────────────── */

.border-start.border-3   { border-left-width: 3px !important; }
.border-primary          { border-color: var(--indigo) !important; }
.border-success          { border-color: var(--success) !important; }
.border-warning          { border-color: var(--warning) !important; }
.border-danger           { border-color: var(--error) !important; }
.border-info             { border-color: #60A5FA !important; }
.border-secondary        { border-color: var(--border-strong) !important; }

/* ─── Contact ─────────────────────────────────────────────────────────────── */

#contact .card.shadow-lg {
  border-color: var(--border-subtle) !important;
  box-shadow: 0 0 0 1px var(--border-subtle), 0 24px 48px rgba(0,0,0,0.4) !important;
}
#contact a { color: var(--indigo-light); }
#contact a:hover { color: var(--indigo); }
#contact p { color: var(--text-secondary); }

/* ─── About ───────────────────────────────────────────────────────────────── */

#about .text-primary.text-uppercase {
  color: var(--indigo-light) !important;
  font-size: 12px;
}

/* ─── Trust Signals ───────────────────────────────────────────────────────── */

#trust p, #trust small { color: var(--text-secondary) !important; }

/* ─── Why Choose Us ───────────────────────────────────────────────────────── */

#why-us p { color: var(--text-secondary); }
#why-us h3 { color: var(--text-primary) !important; }

/* ─── Footer ──────────────────────────────────────────────────────────────── */

.rwd-footer {
  background-color: var(--bg-surface) !important;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary) !important;
}
.rwd-footer p { color: var(--text-secondary) !important; }
footer a        { color: inherit; text-decoration: none; }
footer a:hover  { color: var(--indigo-light); text-decoration: underline; }

/* ─── Portfolio Card Redesign ─────────────────────────────────────────────── */

.portfolio-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 48px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.portfolio-section-label:first-of-type { margin-top: 0; }
.portfolio-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.project-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-raised);
  overflow: hidden;
  position: relative;
}
.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease;
}
.portfolio-card:hover .project-thumb img { opacity: 0.88; }

.project-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 4px;
  font-weight: 500;
}
.project-tag--industry {
  background: var(--indigo-subtle);
  color: var(--indigo-light);
  border: 1px solid rgba(99,102,241,0.25);
}
.project-tag--service {
  background: var(--bg-overlay);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.project-tag--brand {
  background: rgba(168,85,247,0.12);
  color: #C084FC;
  border: 1px solid rgba(168,85,247,0.25);
}

.project-desc {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.project-tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.project-tech-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 3px 10px;
}

.project-card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.btn-site {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--orange);
  color: var(--text-primary) !important;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background 0.15s;
  flex-shrink: 0;
}
.btn-site:hover { background: var(--orange-hover); }
.btn-site--indigo             { background: var(--indigo); }
.btn-site--indigo:hover       { background: var(--indigo-dark); }

.project-domain {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .hero-section { min-height: auto !important; }
  .display-3    { font-size: 2.25rem !important; }
  .display-4    { font-size: 1.9rem  !important; }

  .rwd-navbar .navbar-collapse {
    background-color: var(--bg-overlay);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px;
  }
}

@media (max-width: 767.98px) {
  .display-3 { font-size: 1.9rem  !important; }
  .display-4 { font-size: 1.65rem !important; }
  .lead      { font-size: 1rem    !important; }
}