/*
Theme Name: MedexCore
Theme URI: https://medexcore.com
Author: MedexCore Medical Billing
Author URI: https://medexcore.com
Description: Custom lightweight WordPress theme built for MedexCore Medical Billing. Full Elementor support, SEO-structured markup, and performance-first code with no unnecessary libraries or render-blocking assets.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: medexcore
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, responsive-layout, e-commerce, healthcare
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  /* Official brand palette */
  --mc-primary: #25448F;
  --mc-primary-dark: #1D397A;
  --mc-primary-light: #E8EDF7;
  --mc-accent: #55B84A;
  --mc-accent-dark: #46A33D;
  --mc-accent-light: #EAF7E8;
  --mc-success: #55B84A;
  --mc-warning: #D97706;

  --mc-heading: #17233F;
  --mc-text: #4B5567;
  --mc-text-light: #6B7280;
  --mc-bg: #FFFFFF;
  --mc-bg-alt: #F6F8FC;
  --mc-border: #DCE3EF;

  /* System font stack = zero network requests = fastest possible text render */
  --mc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --mc-radius: 10px;
  --mc-shadow: 0 2px 8px rgba(37, 68, 143, 0.08);
  --mc-shadow-lg: 0 12px 32px rgba(37, 68, 143, 0.14);
  --mc-container: 1180px;
  --mc-transition: 0.2s ease;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--mc-font);
  color: var(--mc-text);
  background: var(--mc-bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--mc-primary); text-decoration:none; transition: color var(--mc-transition); }
a:hover{ color: var(--mc-accent); }
h1,h2,h3,h4,h5,h6{ line-height:1.25; font-weight:700; color: var(--mc-heading); margin:0 0 .5em; }
h1{ font-size: clamp(2rem, 4vw, 2.75rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3{ font-size: 1.35rem; }
p{ margin:0 0 1.2em; }
ul, ol{ padding-left: 1.3em; }
button, input, select, textarea{ font-family: inherit; font-size: 1rem; }

.container{ max-width: var(--mc-container); margin: 0 auto; padding: 0 24px; }
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.screen-reader-text:focus{
  position:fixed; top:8px; left:8px; width:auto; height:auto; z-index:100000;
  background:var(--mc-primary); color:#fff; padding:12px 18px; border-radius:6px; clip:auto;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  background: var(--mc-bg);
  border-bottom: 1px solid var(--mc-border);
  position: sticky; top:0; z-index: 999;
}
.site-header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 16px 0; gap: 24px; }
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-title{ font-size: 1.4rem; margin:0; }
.site-title a{ color: var(--mc-heading); font-weight:800; letter-spacing:-0.02em; }
.site-description{ font-size:.85rem; color: var(--mc-text-light); margin:0; }
.custom-logo{ max-height:48px; width:auto; }

.primary-navigation ul{ list-style:none; display:flex; gap:6px; margin:0; padding:0; }
.primary-navigation li{ position:relative; }
.primary-navigation a{
  display:block; padding:10px 14px; color: var(--mc-text); font-weight:600; font-size:.97rem; border-radius:6px;
}
.primary-navigation a:hover, .primary-navigation .current-menu-item > a{ background: var(--mc-primary-light); color: var(--mc-primary); }
.primary-navigation .sub-menu{
  list-style:none; position:absolute; top:100%; left:0; background:#fff; min-width:220px;
  box-shadow: var(--mc-shadow-lg); border-radius:8px; padding:8px; opacity:0; visibility:hidden;
  transform: translateY(8px); transition: all var(--mc-transition); z-index:100;
}
.primary-navigation li:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }

.header-cta{ display:flex; align-items:center; gap:14px; }
.header-cta .phone{ font-weight:700; color:var(--mc-heading); font-size:.95rem; white-space:nowrap; }

.menu-toggle{
  display:none; background:none; border:2px solid var(--mc-border); border-radius:6px;
  padding:8px 10px; cursor:pointer;
}
.menu-toggle span{ display:block; width:22px; height:2px; background:var(--mc-heading); margin:4px 0; }

/* =========================================================
   BUTTONS — animated, sliding-fill effect
   ========================================================= */
.btn, .wp-block-button__link, button[type="submit"], input[type="submit"]{
  position: relative;
  display: inline-flex; align-items:center; gap:8px;
  background: var(--mc-primary); color:#fff !important; font-weight:700;
  padding: 14px 30px; border-radius: 8px; border:none; cursor:pointer;
  overflow: hidden; isolation: isolate;
  transition: transform var(--mc-transition), box-shadow var(--mc-transition);
  box-shadow: 0 4px 14px rgba(37, 68, 143, 0.25);
}
/* sliding fill layer sweeps in from the left on hover */
.btn::before, .wp-block-button__link::before, button[type="submit"]::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: var(--mc-primary-dark);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(.65,0,.35,1);
}
.btn:hover::before, .wp-block-button__link:hover::before, button[type="submit"]:hover::before{
  transform: scaleX(1);
}
.btn:hover, .wp-block-button__link:hover, button[type="submit"]:hover{
  transform: translateY(-2px); color:#fff !important;
  box-shadow: 0 8px 22px rgba(37, 68, 143, 0.32);
}
.btn:active{ transform: translateY(0); }
/* arrow glyph that nudges right on hover — add <span class="btn-arrow">→</span> inside the button markup */
.btn-arrow{ display:inline-block; transition: transform var(--mc-transition); }
.btn:hover .btn-arrow{ transform: translateX(4px); }

.btn-outline{
  background:transparent; color: var(--mc-primary) !important; border:2px solid var(--mc-primary);
  padding:12px 28px; box-shadow:none;
}
.btn-outline::before{ background: var(--mc-primary); }
.btn-outline:hover{ color:#fff !important; box-shadow: 0 8px 22px rgba(37, 68, 143, 0.2); }

.btn-accent{ background: var(--mc-accent); box-shadow: 0 4px 14px rgba(85, 184, 74, 0.28); }
.btn-accent::before{ background: var(--mc-accent-dark); }
.btn-accent:hover{ box-shadow: 0 8px 22px rgba(85, 184, 74, 0.35); }

/* =========================================================
   HERO / SECTIONS (generic building blocks for Elementor & fallback templates)
   ========================================================= */
.mc-hero{ background: linear-gradient(135deg, var(--mc-primary-light), #fff); padding: 72px 0; }
.mc-section{ padding: 64px 0; }
.mc-section-alt{ background: var(--mc-bg-alt); }
.mc-eyebrow{
  display:inline-block; color: var(--mc-accent-dark); background: rgba(0,169,157,.1);
  font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:20px; margin-bottom:14px;
}
.mc-grid{ display:grid; gap:28px; }
.mc-grid-2{ grid-template-columns: repeat(2, 1fr); }
.mc-grid-3{ grid-template-columns: repeat(3, 1fr); }
.mc-grid-4{ grid-template-columns: repeat(4, 1fr); }

.mc-card{
  background:#fff; border:1px solid var(--mc-border); border-radius: var(--mc-radius);
  padding: 28px; box-shadow: var(--mc-shadow); transition: box-shadow var(--mc-transition), transform var(--mc-transition);
}
.mc-card:hover{ box-shadow: var(--mc-shadow-lg); transform: translateY(-3px); }
.mc-card .icon{ width:48px; height:48px; border-radius:10px; background:var(--mc-primary-light); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--mc-primary); }

.mc-stats{ display:flex; flex-wrap:wrap; gap:40px; justify-content:center; text-align:center; }
.mc-stats .num{ font-size:2.2rem; font-weight:800; color: var(--mc-primary); }
.mc-stats .label{ color: var(--mc-text-light); font-size:.9rem; }

/* =========================================================
   FORMS
   ========================================================= */
input[type=text], input[type=email], input[type=tel], input[type=url], textarea, select{
  width:100%; padding:12px 14px; border:1px solid var(--mc-border); border-radius:8px;
  background:#fff; margin-bottom:14px; transition: border-color var(--mc-transition);
}
input:focus, textarea:focus, select:focus{ outline:none; border-color: var(--mc-primary); }

/* =========================================================
   BLOG / SINGLE
   ========================================================= */
.entry-header{ margin-bottom: 24px; }
.entry-meta{ color: var(--mc-text-light); font-size:.9rem; }
.entry-content img{ border-radius: var(--mc-radius); }
.post-thumbnail{ border-radius: var(--mc-radius); overflow:hidden; margin-bottom:24px; }
.mc-breadcrumbs{ font-size:.85rem; color: var(--mc-text-light); margin-bottom:18px; }
.mc-breadcrumbs a{ color: var(--mc-text-light); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--mc-heading); color: #c9d3e8; padding: 56px 0 24px; }
.site-footer a{ color:#fff; }
.site-footer a:hover{ color: var(--mc-accent); }
.footer-widgets{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 36px; }
.footer-widgets h3{ color:#fff; font-size:1rem; text-transform:uppercase; letter-spacing:.04em; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.15); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.85rem; color:#a9c3dc; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .primary-navigation{ display:none; width:100%; }
  .primary-navigation.is-open{ display:block; }
  .primary-navigation ul{ flex-direction:column; }
  .primary-navigation .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; display:none; }
  .primary-navigation li.sub-menu-open > .sub-menu{ display:block; }
  .menu-toggle{ display:block; }
  .site-header-inner{ flex-wrap:wrap; }
  .mc-grid-2, .mc-grid-3, .mc-grid-4{ grid-template-columns: 1fr; }
  .footer-widgets{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .footer-widgets{ grid-template-columns: 1fr; }
  body{ font-size:16px; }
}

/* Respect Elementor's own container so pages built there aren't double-padded */
.elementor-page .site-main > .container{ max-width:none; padding:0; }