/*
Theme Name: EI Services - Clean Rebuild (Option B) + Swirls
Theme URI: https://example.com/
Author: ChatGPT
Author URI: https://example.com/
Description: Custom WordPress theme for EI Services. Option B (Home uses block editor content). Adds yellow swirl banner styling and fixed nav/scroll.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eis-theme
Tags: custom-logo, one-column, accessibility-ready, responsive-layout
*/

/* =========== CSS Reset (light) =========== */
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}

/* =========== Layout =========== */
:root{
  --eis-bg:#0d1b2a;
  --eis-primary:#1b263b;
  --eis-accent:#415a77;
  --eis-text:#0a0a0a;
  --eis-light:#ffffff;
  --eis-max:1200px;
}

body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;color:var(--eis-text);background:#fff}

.container{max-width:var(--eis-max);margin-inline:auto;padding:0 16px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--eis-primary);color:var(--eis-light);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px}
.site-brand{display:flex;align-items:center;gap:12px}
.site-brand .site-title{font-weight:600;font-size:1.125rem}

/* Nav */
.main-nav .menu{display:flex;gap:12px;align-items:center}
.main-nav .menu .menu-item a{display:block;padding:10px 12px;border-radius:8px}
.main-nav .menu .menu-item a:focus,.main-nav .menu .menu-item a:hover{background:var(--eis-accent)}

#nav-toggle{display:none;background:none;border:0;color:var(--eis-light);font-size:28px;line-height:1;padding:6px;border-radius:8px}
#nav-toggle:focus{outline:2px solid #fff;outline-offset:2px}

/* Mobile menu */
@media (max-width: 880px){
  .main-nav{position:relative}
  .main-nav .menu{
    position:absolute;right:0;top:calc(100% + 8px);
    background:var(--eis-primary);
    flex-direction:column;align-items:stretch;
    min-width:220px;padding:8px;
    border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);
    display:none;
  }
  .main-nav .menu.menu-open{display:flex}
  #nav-toggle{display:inline-block}
}

/* Content */
main{min-height:50vh}
.page-header{padding:40px 0;background:#f6f8fb;border-bottom:1px solid #e7ebf3}
.page-header h1{margin:0}

/* Footer */
.site-footer{margin-top:48px;background:var(--eis-bg);color:#cfd8e3}
.site-footer a{color:#cfd8e3;text-decoration:underline}
.site-footer .footer-inner{display:grid;grid-template-columns:1fr;gap:16px;padding:24px 16px}
@media (min-width: 640px){
  .site-footer .footer-inner{grid-template-columns:2fr 1fr 1fr}
}
.site-footer .copyright{border-top:1px solid #2a3a4f;margin-top:8px;padding-top:12px;text-align:center;font-size:.9rem}

/* Gutenberg content niceties */
.entry-content{padding:24px 0}
.entry-content .alignwide{max-width: min(1100px, 92vw); margin-left:auto;margin-right:auto}
.entry-content .alignfull{width:100vw;margin-left:50%;transform:translateX(-50%)}
.entry-content p{line-height:1.7}
.entry-content h2,.entry-content h3{scroll-margin-top:90px}

/* Prevent layout jank and stray horizontal scroll */
html, body{overflow-x:hidden}

/* =========== Yellow Swirls Banner Styles =========== */
.swirl-bg{
  background-image: url('assets/images/swirl-yellow.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  isolation: isolate;
}
.swirl-bg::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  z-index: -1;
}
.swirl-inset{
  background-image: url('assets/images/swirl-yellow.svg');
  background-size: 1200px auto;
  background-repeat: no-repeat;
  background-position: right top;
}
.banner-inner{
  padding: 80px 0;
  color: #fff;
}
.banner-inner h1, .banner-inner h2, .banner-inner p{ color:#fff; }
@media (max-width: 880px){
  .banner-inner{ padding: 56px 0; }
}