/*
Theme Name: Folio3 Managed IT Services
Theme URI: https://manageditservices.folio3.com
Author: Folio3
Author URI: https://folio3.com
Description: Custom WordPress theme for Folio3 Managed IT Services - converted from React/Node.js
Version: 1.0.12
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Private
Text Domain: folio3-mspit
*/

/* =====================================================
   CSS CUSTOM PROPERTIES
   ===================================================== */
:root {
  --header-height: 72px;   /* mobile: navbar only */
  --color-primary:      #0A1628;
  --color-accent:       #DB3D41;
  --color-accent-dark:  #B5343A;
  --color-accent-light: #FFF0F0;
  --color-white:        #ffffff;
  --color-neutral-50:   #F9FAFB;
  --color-neutral-100:  #F3F4F6;
  --color-neutral-200:  #E5E7EB;
  --color-neutral-300:  #D1D5DB;
  --color-neutral-400:  #9CA3AF;
  --color-neutral-500:  #6B7280;
  --color-neutral-600:  #4B5563;
  --color-neutral-700:  #374151;
  --color-neutral-800:  #1F2937;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container-max: 1200px;
  --container-padding: 1.5rem;
}

/* =====================================================
   RESET & BASE
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--color-neutral-700);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* =====================================================
   LAYOUT
   ===================================================== */
.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
#main-content { flex-grow: 1; padding-top: var(--header-height); }
@media (min-width: 1024px) {
  :root { --header-height: 112px; } /* desktop: utility-bar (40px) + navbar (72px) */
  #main-content { padding-top: 112px; }
}

/* WP admin bar offset */
.admin-bar #site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #site-header { top: 46px; } }
.container-custom { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }
.section-padding { padding: 5rem 0; }

/* =====================================================
   BUTTONS
   ===================================================== */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--color-accent); color: var(--color-white);
  font-weight: 700; font-size: 0.9375rem; padding: 0.875rem 2rem;
  border-radius: 50px; border: none; cursor: pointer;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
.btn-primary:hover {
  background-color: var(--color-accent-dark); transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(219,61,65,0.35); color: var(--color-white);
}
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--color-primary);
  font-weight: 600; font-size: 0.9375rem; padding: 0.875rem 2rem;
  border-radius: 50px; border: 1.5px solid var(--color-neutral-300);
  cursor: pointer; transition: all 0.2s; text-decoration: none;
}
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-white {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-white); color: var(--color-accent);
  font-weight: 700; font-size: 0.9375rem; padding: 0.875rem 2rem;
  border-radius: 50px; border: none; cursor: pointer;
  transition: background-color 0.2s; text-decoration: none;
}
.btn-white:hover { background-color: var(--color-neutral-50); color: var(--color-accent); }