/* =====================================================================
   Paras Interiors — motion & chrome
   ---------------------------------------------------------------------
   1. Floating contact rail (phone / email / WhatsApp), right edge
   2. Cinematic scroll reveals (.pi-reveal → .pi-in, set by cinematic.js)
   3. Header "Start a Project" pill (replaces the email in the top bar)

   Palette: ink var(--pi-ink) · clay var(--pi-accent) · sepia var(--pi-sepia) · paper var(--pi-paper)
   ===================================================================== */

/* ---- 1. floating contact rail ---------------------------------------- */
.pi-rail{
  position:fixed;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:99999;
}
.pi-rail__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--pi-edge);
  background:color-mix(in srgb, var(--pi-surface) 92%, transparent);
  color:var(--pi-text);
  backdrop-filter:blur(6px);
  box-shadow:0 10px 24px -14px var(--pi-shadow-lg);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.pi-rail__btn svg{ width:19px; height:19px; }
/* same tel:/mailto: color-bleed guard as the dock */
nav.pi-rail a[href^="tel:"],
nav.pi-rail a[href^="mailto:"]{ color:var(--pi-text) !important; }
nav.pi-rail a[href^="tel:"]:hover,
nav.pi-rail a[href^="mailto:"]:hover{ color:var(--pi-on-accent) !important; }
.pi-rail__btn:hover{
  background:var(--pi-accent);
  border-color:var(--pi-accent);
  color:var(--pi-on-accent);
  transform:translateX(-3px);
}
/* WhatsApp: official brand green, white glyph, radar-pulse highlight */
.pi-rail__btn--wa{
  position:relative;
  background:var(--pi-wa);
  border-color:var(--pi-wa);
  color:var(--pi-on-accent);
}
.pi-rail__btn--wa::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:50%;
  border:2px solid rgba(37,211,102,.7);
  animation:pi-wa-ring 2.6s ease-out infinite;
  pointer-events:none;
}
.pi-rail__btn--wa:hover{ background:var(--pi-wa-dk); border-color:var(--pi-wa-dk); color:var(--pi-on-accent); transform:translateX(-3px) scale(1.05); }
@keyframes pi-wa-ring{
  0%{ transform:scale(1); opacity:.9; }
  70%{ transform:scale(1.6); opacity:0; }
  100%{ transform:scale(1.6); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .pi-rail__btn--wa::after{ animation:none; opacity:0; }
}

/* the rail supersedes the old floating WhatsApp bubble on desktop */
@media (min-width:768px){
  #ht-ctc-chat{ display:none !important; }
}
/* phones AND tablets use the bottom action dock instead of the rail */
@media (max-width:1023px){
  .pi-rail{ display:none; }
}

/* ---- 2. cinematic scroll reveals --------------------------------------
   The initial hidden state is scoped to html.pi-motion, which an inline
   HEAD script sets BEFORE first paint — so content is never painted
   visible and then hidden (that was the onload glitch). With JS off or
   reduced motion the class never appears and nothing is ever hidden.
   cinematic.js observes the rows and stamps .pi-in; columns stagger
   left-to-right via nth-child delays. transform+opacity only — layout
   (and the full-width row measuring) never shifts. */
html.pi-motion .post_content > .vc_row:not(.home-hero):not(:has(rs-module-wrap, rs-module, .rev_slider, [data-pi-gallery])) > .wpb_column,
html.pi-motion .entry-content > .vc_row:not(.home-hero):not(:has(rs-module-wrap, rs-module, .rev_slider, [data-pi-gallery])) > .wpb_column,
html.pi-motion .footer_wrap .vc_row > .wpb_column{
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);
}
html.pi-motion .vc_row > .wpb_column:nth-child(2){ transition-delay:.11s; }
html.pi-motion .vc_row > .wpb_column:nth-child(3){ transition-delay:.22s; }
html.pi-motion .vc_row > .wpb_column:nth-child(4){ transition-delay:.33s; }
/* !important so the reveal always outranks the (long) hiding selector above */
html.pi-motion .vc_row.pi-in > .wpb_column{
  opacity:1 !important;
  transform:none !important;
}

/* NOTE: no `html{scroll-behavior:smooth}` here on purpose — the hero slider's
   scroll handlers cancel native smooth scrolling site-wide, so cinematic.js
   animates programmatic scrolls itself via requestAnimationFrame. */

/* ---- 3. header "Start a Project" pill --------------------------------- */
.pi-start-project{
  display:inline-flex !important;   /* the theme's .sc_layouts_item forces inline-block */
  align-items:center;
  gap:9px;
  padding:11px 24px;
  border:1px solid var(--pi-edge-strong);
  border-radius:999px;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--pi-text) !important;
  line-height:1;
  white-space:nowrap;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.pi-start-project .pi-sp-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--pi-accent);
  flex:0 0 auto;
  animation:pi-sp-pulse 2.4s ease-in-out infinite;
}
.pi-start-project:hover{
  background:var(--pi-panel-ink);
  border-color:var(--pi-panel-ink);
  color:#fff !important; /* on the pill's ink hover fill — dark in both themes */
}
.pi-start-project:hover .pi-sp-dot{ background:var(--pi-accent); }
@keyframes pi-sp-pulse{
  0%,100%{ box-shadow:0 0 0 0 var(--pi-accent-soft); }
  50%{ box-shadow:0 0 0 5px rgba(194,154,91,0) /* pulse end-state: fully transparent by design */; }
}
@media (prefers-reduced-motion: reduce){
  .pi-start-project .pi-sp-dot{ animation:none; }
}
/* keep the top bar tidy on small screens (the mobile bar has "Enquire") */
@media (max-width:767px){
  .pi-start-project{ display:none !important; }
}

/* ---- 5. footer accordions (phones) -------------------------------------
   wide-container.js tags each footer menu column with .pi-facc and its H2
   with a chevron; tapping toggles .is-open. The first column starts open.
   Desktop is untouched (media-scoped). */
/* The footer headings are wrapped in a real <button> by wide-container.js
   (accessibility: role="button" on an <h2> is invalid ARIA). That button
   exists at EVERY width, so its reset must live outside the mobile query —
   scoped to ≤767px it left native button chrome (grey/black box, monospace
   label) on desktop, which is exactly what shipped for one build. It must
   look precisely like the heading did, while keeping button semantics. */
.footer_wrap .pi-facc h2 .pi-facc__toggle{
  all:unset;
  display:block;
  width:100%;
  font:inherit;
  color:inherit;
  text-align:inherit;
}
.footer_wrap .pi-facc h2 .pi-facc__toggle:focus-visible{
  outline:2px solid var(--pi-accent);
  outline-offset:3px;
}
/* only a tappable control on phones, where the accordion is live */
@media (max-width:767px){
  .footer_wrap .pi-facc h2 .pi-facc__toggle{ cursor:pointer; }
}

@media (max-width:767px){
  .footer_wrap .pi-facc > h2,
  .footer_wrap .pi-facc .wpb_wrapper > h2{
    position:relative;
    cursor:pointer;
    padding:14px 40px 14px 0 !important;
    margin:0 !important;
    border-bottom:1px solid var(--pi-line);
    user-select:none;
  }
  .footer_wrap .pi-facc h2::after{
    content:"";
    position:absolute;
    right:6px; top:50%;
    width:9px; height:9px;
    border-right:1.6px solid var(--pi-sepia-txt);
    border-bottom:1.6px solid var(--pi-sepia-txt);
    transform:translateY(-70%) rotate(45deg);
    transition:transform .25s ease;
  }
  .footer_wrap .pi-facc.is-open h2::after{
    transform:translateY(-30%) rotate(225deg);
  }
  .footer_wrap .pi-facc .pi-facc__body{
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:max-height .4s ease, opacity .3s ease;
  }
  .footer_wrap .pi-facc.is-open .pi-facc__body{
    max-height:900px;
    opacity:1;
    padding-top:10px;
  }
}

/* ---- 4. mobile action dock (HAO-style pill) ----------------------------
   Slim centered pill, theme-blended (frosted paper + hairline), icon-only
   46px circles — the HAO contact-cluster pattern. WhatsApp keeps its official
   green GLYPH plus a subtle pulse ring (accent without a solid brand block);
   Enquire is a quiet ink circle. Labels stay in the DOM for screen readers
   (visually clipped). Extra specificity + !important because the late inline
   Customizer CSS styles the same bar. */
@media (max-width:1023px){
  nav.pi-mobile-bar{
    left:50% !important;
    right:auto !important;
    width:auto !important;
    transform:translateX(-50%);
    bottom:calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    display:inline-flex !important;
    gap:6px !important;
    padding:6px !important;
    border:1px solid var(--pi-edge-faint) !important;
    border-radius:999px !important;
    background:color-mix(in srgb, var(--pi-bg-paper) 92%, transparent) !important;
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    box-shadow:0 10px 30px -14px var(--pi-shadow-lg) !important;
    overflow:visible;
  }
  .pi-mobile-bar .pi-mobile-bar__btn{
    width:46px !important;
    height:46px !important;
    min-height:0 !important;
    flex:0 0 auto !important;
    padding:0 !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    border:0 !important;
    border-radius:50% !important;
    background:transparent !important;
  }
  /* labels: screen-reader only */
  .pi-mobile-bar .pi-mobile-bar__btn span{
    position:absolute !important;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .pi-mobile-bar .pi-mobile-bar__btn svg{
    width:20px !important;
    height:20px !important;
    color:var(--pi-text) !important;
  }
  /* Color-bleed guard: palladio-child-custom.css paints every tel:/mailto:
     link black with !important at (0,2,1) — fine here (icons are ink), but
     keep the selectors pinned so nothing repaints them. */
  nav.pi-mobile-bar a[href^="tel:"] svg,
  nav.pi-mobile-bar a[href^="mailto:"] svg{
    color:var(--pi-text) !important;
  }
  .pi-mobile-bar .pi-mobile-bar__btn:active{ background:color-mix(in srgb, var(--pi-text) 8%, transparent) !important; }
  /* WhatsApp: official green glyph + soft pulse ring */
  .pi-mobile-bar .pi-mobile-bar__btn--wa{ position:relative; overflow:visible; }
  .pi-mobile-bar .pi-mobile-bar__btn--wa svg{ color:var(--pi-wa) !important; }
  .pi-mobile-bar .pi-mobile-bar__btn--wa::after{
    content:"";
    position:absolute; inset:2px;
    border-radius:50%;
    box-shadow:0 0 0 0 rgba(37,211,102,.45);
    animation:pi-wa-dock-ring 2.6s ease-out infinite;
    pointer-events:none;
  }
  /* Enquire: quiet ink circle, ivory glyph */
  .pi-mobile-bar .pi-mobile-bar__btn--enq{ background:var(--pi-panel-ink) !important; }
  .pi-mobile-bar .pi-mobile-bar__btn--enq svg{ color:var(--pi-ondark) !important; }
  body.body_style_wide{ padding-bottom:72px !important; }
}
@keyframes pi-wa-dock-ring{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.45); }
  70%{ box-shadow:0 0 0 9px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 9px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce){
  .pi-mobile-bar .pi-mobile-bar__btn--wa::after{ animation:none !important; }
}


/* desktop: no bottom dock — the contact rail owns quick actions */
@media (min-width:1024px){
  nav.pi-mobile-bar{ display:none !important; }
  body.body_style_wide{ padding-bottom:0 !important; }
}

/* ---- 6. menu link hover/press effect -----------------------------------
   Footer menus + content anchor menus: a champagne underline sweeps in
   from the left on hover; :active gives a quick press nudge. Excluded:
   buttons/chips/dock (own systems) and image links. */
.footer_wrap li a,
.footer_wrap .textwidget a,
.pi-legal-links a,
.sc_layouts_menu_nav > li > a,
.menu_mobile_inner a{
  position:relative;
  background-image:linear-gradient(var(--pi-accent), var(--pi-accent));
  background-repeat:no-repeat;
  background-size:0% 1.5px;
  background-position:left calc(100% + 1px);
  transition:background-size .28s cubic-bezier(.22,.61,.36,1), color .2s ease;
}
.footer_wrap li a:hover,
.footer_wrap .textwidget a:hover,
.pi-legal-links a:hover,
.sc_layouts_menu_nav > li > a:hover,
.menu_mobile_inner a:hover{
  background-size:100% 1.5px;
  color:var(--pi-accent-dk) !important;
}
.footer_wrap li a:active,
.sc_layouts_menu_nav > li > a:active,
.menu_mobile_inner a:active{
  transform:translateY(1px);
}

/* footer links: gentle grow-and-step-forward on hover (scale needs a box,
   so links become inline-block; origin left keeps the text anchored) */
.footer_wrap li a{
  display:inline-block;
  transform-origin:left center;
  transition:background-size .28s cubic-bezier(.22,.61,.36,1), color .2s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}
.footer_wrap li a:hover{
  transform:translateX(4px) scale(1.05);
}
/* footer social icons: a slightly bolder pop */
.footer_wrap .socials_wrap a,
.footer_wrap .sc_layouts_item_icon,
.footer_wrap a[class*="social"]{
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.footer_wrap .socials_wrap a:hover,
.footer_wrap a[class*="social"]:hover{
  transform:scale(1.15);
}
@media (prefers-reduced-motion: reduce){
  .footer_wrap li a:hover,
  .footer_wrap .socials_wrap a:hover{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .footer_wrap li a, .sc_layouts_menu_nav > li > a, .menu_mobile_inner a{ transition:none; }
}

/* ---- 7. footer opening hours — aligned day/time rows -------------------
   (Replaced the leftover Elementor markup in footer layout 17 with a clean
   .pi-hours list; each row is day left, time right, hairline separated.) */
.pi-hours{
  list-style:none;
  margin:0 !important;
  padding:0 !important;
  max-width:240px;
}
.pi-hours li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:7px 0;
  border-bottom:1px solid var(--pi-line-faint);
  font-size:14px;
  line-height:1.4;
}
.pi-hours li:last-child{ border-bottom:0; }
.pi-hours li span:first-child{ color:var(--pi-text); }
.pi-hours li span:last-child{
  color:var(--pi-text-soft);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.pi-hours .pi-hours__closed{
  color:var(--pi-accent-dk);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:11.5px;
}

/* the theme decorates footer list items with icon bullets — the hours rows
   are a schedule, not a link list; no markers of any kind */
.pi-hours li::before,
.pi-hours li::after,
.pi-hours li span::before{
  content:none !important;
  display:none !important;
}
.pi-hours li{ padding-left:0 !important; }

/* contact rows appended under the hours — same schedule formatting, with a
   little extra separation above the block */
.pi-hours--contact{ margin-top:14px !important; }
.pi-hours--contact li span:last-child a{
  color:var(--pi-text-soft);
  font-variant-numeric:tabular-nums;
}
.pi-hours--contact li span:last-child a:hover{ color:var(--pi-accent-dk); }

/* Quick Contacts block under the hours: bold labels + a small section title */
.pi-hours__subtitle{
  display:block;
  margin:18px 0 4px;
  font-family:'Poppins', 'Poppins-fallback', sans-serif;
  font-size:15px;
  font-weight:600;
  color:var(--pi-text);
}
.pi-hours--contact{ margin-top:4px !important; }
.pi-hours--contact li span:first-child{
  font-weight:700;
}

/* ---- 6. finishing detail: text selection + keyboard focus ring ----------
   ::selection — a considered brand tint instead of the browser blue.
   :focus-visible — the parent theme resets outline:0 on most controls, so
   keyboard users had no visible focus (an accessibility failure). One
   champagne ring for every interactive element, shown only on keyboard
   focus so mouse users never see it. Loads late enough to win the resets;
   !important covers the theme's own `outline:0 !important` on some controls. */
/* No `color` on ::selection: forcing --pi-text (dark ink in light mode) made
   selected white-on-dark copy in the ink bands vanish (dark-on-dark). Letting
   the glyph keep its own colour stays legible on both light and dark surfaces. */
::selection{ background:var(--pi-accent-soft); text-shadow:none; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.pi-btn:focus-visible,
.sc_button:focus-visible,
.vc_btn3:focus-visible,
a.pa-chip:focus-visible{
  /* champagne is too pale on the light surfaces (2.1–2.6:1, below the 3:1
     non-text floor) — use drafting sepia in light (clears 3:1 everywhere) and
     the brighter accent in dark. No border-radius here: it squared off the
     round rail/pill/chip controls on focus; a modern outline follows the
     element's own radius. */
  outline:2px solid light-dark(#7A5C42, #D3AC6E) !important;
  outline-offset:3px !important;
}