/* =======================================================
   Rebel Creative Solutions — Theme (Logo Colours Edition)
   Palette from your logo: #EF510A → #C2410C on charcoal.
   ======================================================= */

/* --- Variables & base --- */
:root{
  --rcs-primary: #EF510A;          /* warm orange */
  --rcs-primary-700: #C2410C;      /* burnt orange */
  --rcs-accent: #22c55e;           /* WhatsApp/positive */
  --rcs-ink: #32363A;              /* Charcoal 900 */
  --rcs-ink-600: #50565C;          /* Charcoal 600 */
  --rcs-border: rgba(50,54,58,.12);/* Soft border on light backgrounds */
  --rcs-card-bg: #ffffff;          /* Card background */
  --rcs-radius: 1.25rem;           /* ~20px */
  --rcs-shadow: 0 10px 30px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
  --rcs-shadow-strong: 0 16px 40px rgba(0,0,0,.12);
}

html, body{
  color: var(--rcs-ink);
  background:#fff;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
}

h1, .h1 {
  font-size: 2.5rem;
  font-weight: 700;
}

h2, .h2 {
  font-size: 2rem;
  font-weight: 700;
}

h3, .h3 {
  font-size: 1.75rem;
  font-weight: 700;
}

h4, .h4 {
  font-size: 1.5rem;
  font-weight: 700;
}

h5, .h5 {
  font-size: 1.25rem;
  font-weight: 700;
}

h6, .h6 {
  font-size: 1rem;
  font-weight: 700;
}

/* ================================
   TEAM MEMBER IMAGES
   ================================ */
.team-member-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
}

/* ================================
   ARTICLE CONTENT WIDTH
   ================================ */
.article-content-width {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Helpers */
.rounded-2xl{ border-radius: var(--rcs-radius) !important; }
.shadow-soft{ box-shadow: var(--rcs-shadow) !important; }
.border-soft{ border:1px solid var(--rcs-border) !important; }

/* ================================
   HEADER & NAVBAR
   ================================ */
.main-header {
    background: #fff; /* White background for light mode */
    border-bottom: 1px solid var(--rcs-border);
    padding: 0.75rem 0; /* Adjusted padding */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* Max width for content */
    margin: 0 auto; /* Center the container */
    padding: 0 1rem; /* Horizontal padding */
}

.logo img.logo-img {
    max-height: 48px; /* Slightly smaller logo */
}

.main-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav li {
    margin-left: 2rem; /* Increased spacing between links */
}

.main-nav a {
    color: var(--rcs-ink-600); /* Lighter text for links */
    font-weight: 500; /* Medium font weight */
    text-decoration: none;
    padding: 0.5rem 0; /* Vertical padding for larger click area */
    transition: color 0.2s ease-in-out;
}

.main-nav a:hover {
    color: var(--rcs-primary); /* Primary color on hover */
}

.main-nav a.active {
    color: var(--rcs-primary); /* Active link color */
    font-weight: 600; /* Bolder for active link */
}

/* mobile nav toggle */
.nav-toggle {
    display: none; /* Hidden by default on larger screens */
    border: 0;
    background: transparent;
    padding: 0.5rem; /* Padding for larger tap area */
    color: var(--rcs-ink); /* Icon color */
}

@media (max-width: 768px) {
    .main-nav {
        display: none; /* Hide nav on mobile by default */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        background: #fff; /* White background for mobile menu */
        border-top: 1px solid var(--rcs-border);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .main-nav.open {
        display: flex; /* Show nav when open */
    }

    .main-nav li {
        margin: 0;
        border-bottom: 1px solid var(--rcs-border); /* Separator for mobile links */
    }

    .main-nav a {
        padding: 1rem 1.5rem; /* Larger padding for mobile links */
        display: block;
    }

    .nav-toggle {
        display: block; /* Show toggle button on mobile */
    }
}

.hero, .page-header{
  position: relative;
  
  overflow: hidden;
}

/* Charcoal veil with subtle orange glow to echo the logo */
.hero::before, .page-header::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient( 45rem 30rem at 18% 30%, rgba(239,81,10,.35), rgba(239,81,10,0) 55%),
    linear-gradient(135deg, rgba(17,20,24,.9), rgba(17,20,24,.9));
  pointer-events:none;
}

/* Gentle texture */
.hero::after, .page-header::after{
  content:"";
  position:absolute; inset:-25%;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,255,255,.06), transparent 45%),
    radial-gradient(ellipse at 80% 0%, rgba(255,255,255,.04), transparent 50%),
    radial-gradient(ellipse at 40% 100%, rgba(0,0,0,.07), transparent 50%);
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* Glass readability layer (for .bg-dark overlays) */
.hero .bg-dark, .page-header .bg-dark{
  backdrop-filter: saturate(120%) blur(2px);
  -webkit-backdrop-filter: saturate(120%) blur(2.px);
  border: 1px solid rgba(255,255,255,.12);
}

.hero h1, .page-header h1,
.hero p, .page-header p{
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.hero .container, .page-header .container{
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}



/* ================================
   BUTTONS (orange gradient)
   ================================ */
.btn {
  padding: 0.8rem 1.5rem;
  font-weight: 600;
}

.btn-primary{
  background-image: linear-gradient(135deg, var(--rcs-primary), var(--rcs-primary-700));
  border:0;
  box-shadow: 0 6px 18px rgba(239,81,10,.25);
}
.btn-primary:hover, .btn-primary:focus{
  filter: brightness(1.03);
  box-shadow: 0 10px 24px rgba(239,81,10,.32);
}

.btn-outline-primary{
  border-color: var(--rcs-primary);
  color: var(--rcs-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus{
  background: linear-gradient(135deg, rgba(239,81,10,.08), rgba(194,65,12,.08));
  color: var(--rcs-primary-700);
  border-color: var(--rcs-primary-700);
}

/* WhatsApp/positive stays green */
.btn-success{
  background-image: linear-gradient(135deg, var(--rcs-accent), #16a34a);
  border:0;
  box-shadow: 0 6px 18px rgba(34,197,94,.25);
}

/* ================================
   CARDS & HOVERS
   ================================ */
.card{
  border:1px solid var(--rcs-border);
  border-radius: var(--rcs-radius);
  box-shadow: var(--rcs-shadow);
  background: var(--rcs-card-bg);
}

.card-body {
  padding: 2rem;
}
.feature-card, .value-card, .team-member-card{
  transition: transform .25s ease, box-shadow .25s ease;
  text-align: center;
}
.feature-card:hover, .value-card:hover, .team-member-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--rcs-shadow-strong);
}

/* Badges/pills */
.badge{
  border-radius: 999px;
  padding: .35rem .6rem;
}

/* ================================
   SECTION TITLES & DIVIDERS
   ================================ */
.display-6.fw-bold + .text-muted,
.display-5.fw-bold + .text-muted{
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.section-divider{
  height: 1px; background: var(--rcs-border); margin: 2rem 0;
}

/* ================================
   CTAs (orange gradient)
   ================================ */
.cta{
  background: linear-gradient(135deg, var(--rcs-primary), var(--rcs-primary-700));
}
.cta h2, .cta p{ color:#fff; }

/* ================================
   IMAGE TREATMENTS
   ================================ */
img.rounded, .img-fluid.rounded, .img-fluid.rounded.shadow-sm{
  border-radius: var(--rcs-radius) !important;
}
.img-frame{
  border-radius: var(--rcs-radius);
  box-shadow: var(--rcs-shadow);
  border: 1px solid var(--rcs-border);
}

/* ================================
   BLOG GRID HOVER
   ================================ */
#postGrid .card:hover .card-img-top{
  filter: saturate(1.05) contrast(1.02);
}

/* Accessibility & Motion */
 @media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

/* Optional coloured blur blobs (use for subtle orange glow accents) */
.blur-blob{ position:absolute; width:38vmin; height:38vmin; border-radius:50%;
  filter: blur(40px); opacity:.35; z-index:0; pointer-events:none; }
.blob-1{ background:#EF510A; top:-10%; left:-6%; }
.blob-2{ background:#C2410C; bottom:-12%; right:-8%; }

/* ================================
   Mobile / small-screen optimizations
   Improves tap targets, reduces padding, and makes CTAs full-width
   ================================ */
@media (max-width: 768px){
  :root{ --rcs-radius: .9rem; }

  html, body{ font-size: 1rem; }

  .header-container{ padding: 0.5rem 1rem; }

  /* compact logo */
  .logo img.logo-img { max-height: 42px; }

  /* stack nav items and hide by default; will be toggled with JS */
  .main-nav{ display: none; position: absolute; left: 0; right: 0; top: 58px; background: #fff; border-top: 1px solid var(--rcs-border); z-index: 1050; }
  .main-nav.open{ display: block; }
  .main-nav ul{ flex-direction: column; padding: .5rem 0; }
  .main-nav li{ margin: 0; }
  .main-nav a{ display:block; padding: .75rem 1rem; font-weight:600; color:var(--rcs-ink-600); }

  /* hamburger toggle button */
  .nav-toggle{ display: inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:8px; background:transparent; border:1px solid var(--rcs-border); color:var(--rcs-ink-600); }

  /* animated mobile nav: use max-height for smooth slide (no display:none) */
  .main-nav{
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 320ms ease, opacity 220ms ease;
    -webkit-transition: max-height 320ms ease, opacity 220ms ease;
  }
  .main-nav.open{ opacity: 1; max-height: 640px; }

  /* reduce hero paddings for mobile data/speed and readability */
  .hero .container, .page-header .container{ padding-top: 2.25rem; padding-bottom: 2.25rem; }
  .hero h1, .page-header h1{ font-size: 1.6rem; }

  /* make primary CTAs full-width on narrow screens */
  .btn-lg{ width:100%; padding: .95rem 1rem; }
  .d-sm-flex .btn { width: 100%; }

  /* Cards and content padding reduced */
  .card-body{ padding: 1rem; }

  /* larger touch targets for list/feature icons */
  .feature-card, .value-card, .team-member-card{ padding: 1rem; }

  /* blog grid stacks as single column on extra small devices */
  @media (max-width: 420px){
    #postGrid .post-card{ flex: 0 0 100%; max-width: 100%; }
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.75rem; }
    h3, .h3 { font-size: 1.5rem; }
  }

  /* ensure whatsapp button doesn't cover content — slightly higher and larger tap area */
  #whatsapp-button{ width:68px; height:68px; bottom:18px; right:14px; }
  #whatsapp-button i{ font-size: 34px; }
}