/* ============================================================
   A004 — Shared styles (tokens, header, footer, sidebar, primitives)
   Palette re-measured from nail-a004.aiopromotion.com (elementor-kit-10)
   ============================================================ */
:root{
  --primary:#FF744D;   /* coral      (--e-global-color-primary)  */
  --secondary:#FFD8CD; /* peach      (--e-global-color-secondary)*/
  --text:#000000;      /* text       (--e-global-color-text)     */
  --accent:#FFFFFF;    /* white      (--e-global-color-accent)    */
  --white2:#FFFFFF;    /* (--e-global-color-8741f2a)             */
  --container:1120px;
}

/* ---- base (trap #4: body MUST be 1rem) ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-size:1rem;                     /* 16px base — em tokens author against this */
  font-family:"Poppins",sans-serif;
  color:var(--text);
  line-height:1.5;
  margin:0;
  background:var(--accent);
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---- layout primitive: e-con-boxed ----
   outer (.sec) carries horizontal padding; inner carries max-width + vertical padding */
.sec{padding-left:0;padding-right:0}
.sec-inner{width:100%;max-width:var(--container);margin-inline:auto;padding-block:80px}
@media(max-width:1024px){ .sec{padding-left:30px;padding-right:30px} }
@media(max-width:767px){ .sec{padding-left:20px;padding-right:20px}
  .sec-inner{padding-block:60px} }

/* ---- button (Elementor .elementor-button; trap #2: line-height 1) ---- */
.btn{
  display:inline-block;
  line-height:1;
  font-family:"Poppins",sans-serif;
  font-size:1rem;font-weight:500;
  color:var(--accent);
  background-color:var(--primary);
  border:2px solid var(--primary);
  padding:10px 25px;
  box-shadow:0 0 10px 0 rgba(0,0,0,.5);
  cursor:pointer;
  transition:transform .9s,background-color .3s,color .3s;
  transform-origin:left;
}
.btn:hover,.btn:focus{background-color:#FFFFFF78;color:var(--primary);transform:scaleX(1.1)}
@media(max-width:767px){ .btn{font-size:1rem;padding:8px 12px} }

/* ============================================================
   HEADER  (post-14) — position:fixed, z-index 500, peach bg
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:500;
  background-color:var(--secondary);
  border-radius:0 0 20px 20px;
  box-shadow:0 2px 20px 0 rgba(0,0,0,.5);
  padding:10px 0;
}
.hdr-inner{
  width:100%;max-width:1350px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:0 20px;
}
.hdr-logo{flex:0 0 18%}
.hdr-logo img{height:70px;object-fit:contain;object-position:center left}
.hdr-nav{flex:0 0 60%;display:flex;justify-content:center;align-items:center}
.hdr-cta{flex:0 0 15%;display:flex;justify-content:center}

/* desktop menu */
.nav-list{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.nav-list a{font-family:"Lato",sans-serif;font-size:1.1rem;font-weight:600;line-height:1.14;color:var(--text);transition:color .2s}
.nav-list a:hover,.nav-list a.active{color:var(--primary)}

/* burger + mobile dropdown */
.burger{display:none;background:none;border:0;cursor:pointer;padding:4px;margin:0 auto;color:var(--text)}
.burger svg{width:28px;height:28px;fill:currentColor;display:block}
.burger .icon-close{display:none}
.burger[aria-expanded="true"] .icon-open{display:none}
.burger[aria-expanded="true"] .icon-close{display:block}
.burger:hover{color:var(--primary)}

/* dropdown resolves against .site-header (position:fixed) -> spans full header width,
   not the narrow .hdr-nav flex track */
.mobile-menu{
  position:absolute;top:100%;left:0;right:0;
  background-color:var(--primary);
  border-radius:0 0 15px 15px;
  box-shadow:0 6px 20px 0 rgba(0,0,0,.5);
  list-style:none;margin:0;padding:0;overflow:hidden;
  max-height:0;transform:scaleY(0);transform-origin:top;
  transition:max-height .3s ease-out,transform .3s ease-out;
}
.mobile-menu.open{max-height:320px;transform:scaleY(1)}
.mobile-menu a{
  display:block;padding:12px 20px;
  font-family:"Roboto",sans-serif;font-size:1rem;font-weight:500;
  color:var(--accent);text-align:center;
}
.mobile-menu a:hover,.mobile-menu a.active{background-color:var(--accent);color:var(--primary)}
.mobile-menu li:last-child a{border-radius:0 0 15px 15px}

@media(max-width:1024px){
  .site-header{padding:5px 30px}
  .hdr-inner{padding:0}
  .hdr-logo{flex:0 0 18%}
  .hdr-nav{flex:1 1 auto}
  .nav-list{display:none}
  .burger{display:block}
  .hdr-cta{flex:0 0 auto}
}
@media(max-width:767px){
  .site-header{padding:5px 20px}
  .hdr-logo{flex:0 0 35%}
  .hdr-logo img{height:60px}
  .hdr-nav{flex:0 0 10%}
  .hdr-cta{flex:0 0 35%;justify-content:flex-end}
  .site-header .btn{font-size:1rem;padding:8px 12px}
}

/* ============================================================
   STICKY SOCIAL SIDEBAR (footer template, position:fixed)
   3 icons — Facebook / Instagram / Google — stacked, coral, rounded
   ============================================================ */
.side-social{position:fixed;left:0;top:24vh;z-index:99;display:flex;flex-direction:column}
.side-social a{
  width:34px;height:36px;margin-bottom:6px;   /* +6px line-box (trap #6) via margin */
  display:flex;align-items:center;justify-content:center;
  background-color:var(--primary);border-radius:5px;
  transition:background-color .3s;
}
.side-social a:hover{background-color:var(--secondary)}
.side-social svg{width:18px;height:18px;fill:var(--accent);display:block}
@media(max-width:767px){
  .side-social a{width:30px;height:32px}
  .side-social svg{width:16px;height:16px}
}

/* ============================================================
   FOOTER (post-12) — peach bg, 4 cols flex space-between
   ============================================================ */
.site-footer{background-color:var(--secondary)}
.footer-main{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  width:80%;margin-inline:auto;padding:80px 0;
}
.footer-col h2{
  font-family:"Archivo",sans-serif;font-size:1.5rem;font-weight:600;
  color:var(--primary);margin:0;line-height:1;
}
.footer-about{flex:0 0 25%;display:flex;flex-direction:column;gap:20px}
.footer-about p{margin:0;font-family:"Poppins",sans-serif;font-size:1rem;font-weight:400;color:var(--text);line-height:1.2}
.footer-about .biz{font-family:"Poppins",sans-serif;font-weight:600;color:var(--primary)}

.footer-contact{flex:0 0 20%;display:flex;flex-direction:column;gap:20px}
.contact-list{display:flex;flex-direction:column;gap:5px}
.contact-row{display:flex;align-items:center;gap:10px;min-height:30px}
.contact-row svg{width:24px;height:24px;flex:none;fill:var(--primary)}
.contact-row span,.contact-row a{font-family:"Poppins",sans-serif;font-size:1rem;font-weight:400;line-height:1;color:var(--text)}
.social-row{display:flex;gap:10px}
.social-row a{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background-color:var(--primary);transition:background-color .3s;
}
.social-row a:hover{background-color:var(--secondary)}
.social-row svg{width:20px;height:20px;fill:var(--accent)}

.footer-hours{flex:0 0 20%;display:flex;flex-direction:column;gap:20px}
.footer-hours .hours{font-family:"Poppins",sans-serif;font-size:1rem;font-weight:400;color:var(--text);margin:0;line-height:1.5}
.footer-hours .seo{font-family:"Poppins",sans-serif;font-size:1em;font-weight:600;line-height:1;color:var(--primary);display:block}
.footer-hours .seo.second{margin-top:-15px}   /* trap #7: negative margin on 2nd SEO tag */

.footer-map{flex:0 0 28%;display:flex}
.footer-map iframe{width:100%;height:280px;border:0}

.footer-copy{
  display:flex;flex-wrap:wrap;justify-content:center;gap:5px;
  border-top:1px solid var(--primary);
  padding:20px 0;text-align:center;
  font-family:"Poppins",sans-serif;font-size:1rem;font-weight:400;line-height:1.2;color:var(--text);
}
.footer-copy .biz{font-family:"Poppins",sans-serif;font-weight:600;color:var(--primary)}

@media(max-width:1024px){
  .footer-main{width:100%;padding:60px 30px;gap:40px}
  .footer-about,.footer-contact,.footer-hours,.footer-map{flex:0 0 47%}
  .footer-copy{padding:20px 30px}
}
@media(max-width:767px){
  .footer-main{padding:60px 20px;gap:40px 0}
  .footer-about,.footer-contact,.footer-hours,.footer-map{flex:0 0 100%}
  .footer-col h2{font-size:1.4rem}
  .footer-copy{padding:20px}
}

/* ============================================================
   WATERMARK HEADING (small label + big Alex Brush script behind)
   ============================================================ */
.wm{position:relative;display:inline-block}
.wm .wm-label{
  position:relative;z-index:2;margin:0;
  font-family:"Lato",sans-serif;font-size:1.4rem;font-weight:400;
  text-transform:uppercase;color:var(--text);line-height:1;
}
.wm .wm-big{
  position:absolute;top:-10px;z-index:1;margin:0;white-space:nowrap;
  font-family:"Alex Brush",cursive;font-size:4rem;font-weight:500;
  color:var(--secondary);line-height:1;pointer-events:none;
}
@media(max-width:767px){
  .wm .wm-label{font-size:1.2rem}
  .wm .wm-big{font-size:3.5rem}
}