/* ============================================================
   SWS site-wide polish layer
   - scroll-reveal animations (classes added by sws-enhance.js;
     nothing is hidden without JS)
   - hover micro-interactions
   - responsive hardening for tablet/mobile
   ============================================================ */

/* ---------- global feel ---------- */
::selection{background:#DAA959;color:#2A160D}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* slim branded scrollbar (webkit) */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#F6F6F6}
::-webkit-scrollbar-thumb{background:#2A160D;border-radius:8px;border:2px solid #F6F6F6}
::-webkit-scrollbar-thumb:hover{background:#DAA959}

/* accessible gold focus */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid #DAA959;outline-offset:3px;border-radius:4px}

/* ---------- scroll reveal (JS adds .sws-reveal, IO adds .sws-in) ---------- */
.sws-reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.sws-reveal.sws-in{opacity:1;transform:none}
.sws-reveal-img{opacity:0;transform:scale(.96);
  transition:opacity .8s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.sws-reveal-img.sws-in{opacity:1;transform:scale(1)}
/* stagger siblings slightly */
.sws-in.sws-d1{transition-delay:.08s}.sws-in.sws-d2{transition-delay:.16s}.sws-in.sws-d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .sws-reveal,.sws-reveal-img{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- buttons & links micro-interactions ---------- */
.elementor-button,.sws-links a{
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,
             background-color .28s ease,color .28s ease!important}
.elementor-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(42,22,13,.45)!important}
.elementor-button:active{transform:translateY(0);transition-duration:.1s}

/* gold underline sweep on text links inside content */
.sws-seo p a,.sws-faq .sws-a a{
  background-image:linear-gradient(#DAA959,#DAA959);background-repeat:no-repeat;
  background-size:0% 2px;background-position:0 96%;transition:background-size .35s ease}
.sws-seo p a:hover,.sws-faq .sws-a a:hover{background-size:100% 2px}

/* ---------- cards / portfolio hover ---------- */
.sws-card{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease}
.sws-card:hover{transform:translateY(-5px);border-color:#DAA959;
  box-shadow:0 18px 36px -16px rgba(42,22,13,.28)}
.elementor-post,.e-loop-item{transition:transform .3s ease,box-shadow .3s ease}
.elementor-post:hover,.e-loop-item:hover{transform:translateY(-4px)}

/* image hover life in galleries / portfolio / instagram feed */
.elementor-widget-image-gallery a,.e-gallery-item,.sbi_photo,.elementor-post__thumbnail{overflow:hidden}
.elementor-widget-image-gallery img,.e-gallery-image,.sbi_photo img,.elementor-post__thumbnail img{
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.elementor-widget-image-gallery a:hover img,.e-gallery-item:hover .e-gallery-image,
.sbi_photo:hover img,.elementor-post:hover .elementor-post__thumbnail img{transform:scale(1.05)}

/* icon boxes: lift the icon on hover */
.elementor-icon-box-wrapper .elementor-icon,.elementor-icon-list-icon{
  transition:transform .3s ease,color .3s ease}
.elementor-widget-icon-box:hover .elementor-icon{transform:translateY(-3px) scale(1.06)}

/* ---------- FAQ opening animation ---------- */
@keyframes swsFaqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sws-faq details[open] .sws-a{animation:swsFaqIn .32s ease both}
.sws-faq summary::after{transition:transform .25s ease}
.sws-faq details[open] summary::after{transform:rotate(180deg)}

/* subtle gold tick under sws h2s */
.sws-seo h2{position:relative;padding-bottom:14px}
.sws-seo h2::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;
  border-radius:2px;background:linear-gradient(90deg,#DAA959,#FFBC7D)}

/* ---------- scroll progress bar ---------- */
#sws-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:99999;
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,#DAA959,#FFBC7D)}
@media(prefers-reduced-motion:reduce){#sws-progress{display:none}}

/* ---------- hero entrance (classes added on load by JS) ---------- */
.sws-hero-in{opacity:0;transform:translateY(30px);
  animation:swsHeroIn .9s cubic-bezier(.22,.61,.36,1) forwards}
.sws-hero-in.sws-hd1{animation-delay:.15s}
.sws-hero-in.sws-hd2{animation-delay:.3s}
.sws-hero-in.sws-hd3{animation-delay:.45s}
@keyframes swsHeroIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.sws-hero-in{animation:none;opacity:1;transform:none}}

/* ---------- button shine sweep ---------- */
.elementor-button{position:relative;overflow:hidden}
.elementor-button::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.elementor-button:hover::after{left:130%}

/* ---------- back to top ---------- */
#sws-top{position:fixed;left:18px;bottom:18px;z-index:9998;width:46px;height:46px;
  border-radius:50%;background:#2A160D;color:#DAA959;border:1.5px solid rgba(218,169,89,.55);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s ease,transform .35s ease,visibility .35s;box-shadow:0 8px 22px -8px rgba(0,0,0,.5)}
#sws-top.sws-show{opacity:1;visibility:visible;transform:none}
#sws-top:hover{background:#DAA959;color:#2A160D}
#sws-top svg{width:20px;height:20px}

/* ============================================================
   RESPONSIVE HARDENING
   ============================================================ */
/* never allow sideways scroll from stray content.
   body gets an explicit full width so overflow-x:clip can't let it shrink-wrap
   (older Chrome would left-align the block-level footer/CTA otherwise). */
html{overflow-x:clip}
body{overflow-x:clip;width:100%;max-width:100%;margin:0}
img,video,iframe{max-width:100%}
/* structural sections must always span the viewport, never flex-shrink to content */
[data-elementor-type="footer"],
[data-elementor-type="header"],
[data-elementor-type="wp-page"]{width:100%!important;max-width:100%}
[data-elementor-type="footer"]>.e-con,
[data-elementor-type="footer"]>.elementor-section{width:100%}

@media(max-width:1024px){
  /* keep big display headings from awkward wrapping on tablets */
  h1,.elementor-heading-title{text-wrap:balance}
}
@media(max-width:880px){
  .sws-seo h2{font-size:29px}
  .sws-seo{padding:44px 0}
  .sws-section{margin-bottom:42px}
}
@media(max-width:767px){
  /* generous tap targets */
  .sws-links a{padding:11px 20px}
  .sws-faq summary{padding:15px 18px;font-size:17px}
  .sws-faq .sws-a{padding:0 18px 16px;font-size:15.5px}
  .sws-answer{padding:15px 16px;font-size:16px}
  .sws-seo p{font-size:16px}
  .sws-seo h2{font-size:25.5px;line-height:1.22}
  .sws-seo h3{font-size:20px}
  .sws-card{padding:18px}
  /* oversized display text safety: elementor headings that stay huge on phones */
  h1.elementor-heading-title,.elementor-widget-heading h1{line-height:1.15}
  /* prevent double-padding squeeze in nested containers */
  .sws-wrap{padding:0 16px}
  /* back-to-top clears the floating phone bubble zone */
  #sws-top{width:42px;height:42px;left:14px;bottom:14px}
  /* tables: slightly tighter cells */
  .sws-seo th,.sws-seo td{padding:11px 12px;font-size:14.5px}
  .sws-seo table{min-width:520px}
}
@media(max-width:480px){
  .sws-seo h2{font-size:23px}
  .sws-cards{grid-template-columns:1fr}
}