/* ASPAS Office - shared theme (colors, dark mode, toggle button, logo) */
:root{
  --text:#0A1B36;
  --text-muted:#66748B;
  --text-faint:#8390A2;
  --bg:#ffffff;
  --bg-alt:#F7F9FC;
  --card-bg:#ffffff;
  --border:#E2E8F0;
  --header-bg:rgba(255,255,255,.98);
}
[data-theme="dark"]{
  --text:#F3F6FA;
  --text-muted:#AEB9CC;
  --text-faint:#8B96AC;
  --bg:#0A1526;
  --bg-alt:#0F1C33;
  --card-bg:#12213B;
  --border:#22314E;
  --header-bg:rgba(10,21,38,.94);
}
/* "hidden" creates a scroll container that can prevent sticky headers from sticking. */
html,body{margin:0;padding:0;overflow-x:clip;}
body{background:var(--bg);}

/* Reserve identical geometry for the logo and theme controls in both themes. */
#aspas-logo-wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  width:180px !important;
  height:54px !important;
  flex:0 0 180px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#ffffff !important;
  border-radius:12px !important;
  transition:none !important;
}
#aspas-logo{
  display:block !important;
  width:100% !important;
  height:100% !important;
  flex:none !important;
  object-fit:contain !important;
}

#aspas-theme-toggle{
  appearance:none;-webkit-appearance:none;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;min-width:42px;min-height:42px;
  flex:0 0 42px;
  margin:0;padding:0;
  border:1px solid #F47B34;
  border-radius:11px;
  background:rgba(244,123,52,.12);
  color:#D95F1E;
  box-shadow:0 4px 13px rgba(244,123,52,.18);
  line-height:1;
  vertical-align:middle;
  transform:none;
  transition:none;
  cursor:pointer;
}
#aspas-theme-toggle:hover{background:#F47B34;color:#fff;box-shadow:0 6px 16px rgba(244,123,52,.3);}
#aspas-theme-toggle:focus-visible{outline:3px solid rgba(244,123,52,.35);outline-offset:2px;}
#aspas-theme-toggle:active{transform:none;}
#aspas-theme-toggle .aspas-theme-icon{
  display:block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  overflow:visible;
}

@media(max-width:900px){
  #aspas-logo-wrap{
    width:150px !important;
    height:46px !important;
    flex-basis:150px !important;
  }
}

/* ---- Layout containers (replaces repeated inline width:min(...) wrappers) ---- */
.container-1140{width:min(1140px,calc(100% - 44px));margin:0 auto;}
.container-1100{width:min(1100px,calc(100% - 44px));margin:0 auto;}
.container-980{width:min(980px,calc(100% - 44px));margin:0 auto;}
.container-900{width:min(900px,calc(100% - 44px));margin:0 auto;}
.container-800{width:min(800px,calc(100% - 44px));margin:0 auto;}

/* ---- Grids (replaces the [style*="grid-template-columns"] attribute-selector hack) ---- */
.grid-2-20{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;}
.grid-3-alt{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.grid-4-alt{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:58px;align-items:center;}
.hero-grid-alt{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.form-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:start;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.quote-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cta-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;}

/* Stack every grid and pull containers to the mobile gutter below 760px */
@media (max-width:759px){
  .container-1140,.container-1100,.container-980,.container-900,.container-800{
    width:calc(100% - 24px);
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }
  .grid-2-20,.grid-3,.grid-3-alt,.grid-4,.grid-4-alt,.hero-grid,.hero-grid-alt,.form-grid,.form-row,.quote-form-grid,.cta-grid{
    display:block;
  }
  .grid-2-20 > *,.grid-3 > *,.grid-3-alt > *,.grid-4 > *,.grid-4-alt > *,.hero-grid > *,.hero-grid-alt > *,.form-grid > *,.form-row > *,.quote-form-grid > *,.cta-grid > *{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    margin-bottom:16px;
  }
}