/* ==========================================================================
   360 Care - component styles
   Loaded BEFORE tailwind.css so utility classes can still override these.
   ========================================================================== */

:root{
  --brand:#2E3192;
  --brand-dark:#22246B;
  /* Accent darkened from #1B7FD4, which gave the 12px eyebrow labels only
     4.17:1 on white. #1565B0 measures 5.9:1 on white, 5.5:1 on --bg. */
  --accent:#1565B0;
  --ink:#1F2430;
  /* Muted darkened from #6B7280, which measured 4.27:1 on the pale accent
     panels. #5A6270 is 6.2:1 on white and 5.4:1 on tinted panels. */
  --muted:#5A6270;
  --bg:#F7F8FA;
  /* WhatsApp brand green #25D366 gives white text only 1.98:1 and fails the
     3:1 non-text minimum too. #0E7A45 is the same hue family at 4.9:1. */
  --wa:#0E7A45;
  --wa-dark:#0A6238;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;   /* stop Safari inflating text in landscape */
  /* WCAG 2.2 "Focus Not Obscured": keep anchor targets and tabbed-to elements
     clear of the sticky header instead of hidden underneath it. */
  scroll-padding-top:96px;
}

body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
  -webkit-tap-highlight-color:rgba(46,49,146,.12);
}

/* Momentum scrolling for the sideways comparison table on iOS. Chrome has
   dropped this property, so devtools will grey it out; it still matters here. */
.overflow-x-auto{-webkit-overflow-scrolling:touch}

/* --- Focus visibility ---------------------------------------------------- */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
.bg-brand :focus-visible,
footer :focus-visible,
.btn-wa:focus-visible{outline-color:#fff}

/* Skip link - first tab stop, hidden until focused. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--brand);color:#fff;padding:.75rem 1.25rem;
  border-radius:0 0 .5rem 0;font-weight:600;
}
.skip-link:focus{left:0}

/* --- Header -------------------------------------------------------------- */
.site-header{transition:box-shadow .25s ease, background .25s ease}
.site-header.is-scrolled{box-shadow:0 1px 20px rgba(31,36,48,.10)}

.nav-link{position:relative;padding-bottom:3px}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--brand);transition:width .25s ease;
}
.nav-link:hover::after,.nav-link.is-active::after{width:100%}
.nav-link.is-active{color:var(--brand);font-weight:600}

/* Dropdown. Opens on hover for mice and on focus for keyboards and touch - on
   a touchscreen the parent "Services" link still navigates to the overview
   page, so no menu item is unreachable. */
.has-dropdown > .dropdown{
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.has-dropdown:focus-within > .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
@media (hover:hover) and (pointer:fine){
  .has-dropdown:hover > .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
}

/* Mobile drawer - needs headroom for the expanded services submenu. */
#mobileNav{max-height:0;overflow:hidden;transition:max-height .35s ease}
#mobileNav.is-open{max-height:1000px;overflow-y:auto}

/* Give inline nav / footer text links a 24px minimum hit area (WCAG 2.5.8).
   They render 17px tall otherwise. */
.link-tap{display:inline-block;padding-top:.25rem;padding-bottom:.25rem}
footer ul a,
footer .flex a:not([aria-label]){display:inline-block;padding-top:.2rem;padding-bottom:.2rem}
nav[aria-label="Breadcrumb"] a{display:inline-block;padding-top:.25rem;padding-bottom:.25rem}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:600;border-radius:9999px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(46,49,146,.28)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 4px 14px rgba(14,122,69,.28)}
.btn-outline{border:2px solid var(--brand);color:var(--brand);background:#fff}

/* Hover effects are gated behind (hover:hover) so they never fire on a
   touchscreen. On iOS a tap otherwise latches the hover state and the element
   stays lifted/recoloured until you tap somewhere else. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn-primary:hover{background:var(--brand-dark);box-shadow:0 8px 22px rgba(46,49,146,.34)}
  .btn-wa:hover{background:var(--wa-dark)}
  .btn-outline:hover{background:var(--brand);color:#fff}
  .fab-wa:hover{transform:scale(1.08)}
}

/* Touch devices get a clear pressed state instead of a hover state. */
@media (hover:none){
  .btn:active{transform:scale(.97)}
  .card:active{background:#FBFCFE}
}

/* --- Cards --------------------------------------------------------------- */
.card{
  background:#fff;border:1px solid #E8EAF0;border-radius:1rem;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(31,36,48,.12);border-color:#D6DAE8}
}

/* Source photos are modest resolution, so crop rather than stretch. */
.photo{width:100%;height:100%;object-fit:cover;display:block;background:#EEF0F6}

/* --- Section helpers ----------------------------------------------------- */
.section{padding:5rem 0}
@media (max-width:768px){.section{padding:3.25rem 0}}

.eyebrow{
  display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
}
.rule{width:56px;height:4px;border-radius:2px;background:var(--brand)}

.hero-mesh{
  background:
    radial-gradient(900px 400px at 12% -10%, rgba(27,127,212,.14), transparent 60%),
    radial-gradient(760px 420px at 92% 8%, rgba(46,49,146,.12), transparent 62%),
    linear-gradient(180deg,#FBFCFE 0%,#F2F4F9 100%);
}

/* --- Floating WhatsApp + mobile call bar --------------------------------
   env(safe-area-inset-*) keeps these clear of the iPhone home indicator. It
   resolves to 0 elsewhere, so the calc() is harmless on other devices.
   NOTE: the spaces around "+" inside calc() are REQUIRED - without them the
   whole declaration is invalid and the browser discards it. */
.fab-wa{
  position:fixed;right:18px;z-index:60;
  bottom:calc(86px + env(safe-area-inset-bottom, 0px));
  width:56px;height:56px;border-radius:9999px;background:var(--wa);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(14,122,69,.42);transition:transform .2s ease;
}
@media (min-width:768px){.fab-wa{bottom:calc(24px + env(safe-area-inset-bottom, 0px))}}

.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:#fff;border-top:1px solid #E8EAF0;box-shadow:0 -4px 18px rgba(31,36,48,.09);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  transition:transform .25s ease;
}
@media (min-width:768px){.mobile-bar{display:none}}

/* Hidden while a form field is focused, so the iOS keyboard does not push the
   bar up over the field being typed into. */
.mobile-bar.is-hidden{transform:translateY(120%)}

body{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
@media (min-width:768px){body{padding-bottom:0}}

/* Landscape on a notched iPhone: keep text clear of the sensor housing.
   max() leaves the normal 1.5rem gutter on every other device. */
@supports (padding:max(0px)){
  @media (orientation:landscape){
    .max-w-site{
      padding-left:max(1.5rem, env(safe-area-inset-left));
      padding-right:max(1.5rem, env(safe-area-inset-right));
    }
  }
}

/* --- Gallery filter ------------------------------------------------------ */
.filter-btn{
  border:1px solid #DCE0EA;background:#fff;color:var(--muted);
  padding:.55rem 1.15rem;border-radius:9999px;font-weight:600;font-size:.875rem;
  transition:all .2s ease;
}
.filter-btn:hover{border-color:var(--brand);color:var(--brand)}
.filter-btn.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.gallery-item{transition:opacity .28s ease,transform .28s ease}
.gallery-item.is-hidden{display:none}

/* --- Accordion (FAQ) ----------------------------------------------------- */
.acc-panel{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc-item.is-open .acc-panel{max-height:340px}
.acc-item.is-open .acc-icon{transform:rotate(45deg)}
.acc-icon{transition:transform .25s ease}

/* --- Reveal on scroll ---------------------------------------------------
   Gated behind .js (set by an inline script in <head>). Without this, a JS
   failure or a no-script browser would leave every section permanently at
   opacity:0 - the entire page invisible. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover,.card:hover{transform:none}
  .fab-wa:hover{transform:none}
}

/* Escape hatch set by main.js when it detects that CSS transitions are not
   actually advancing in this engine. Without it, any element mid-transition
   (notably .gallery-item, which carries its own opacity transition) stays
   frozen at opacity:0 and its content is never seen. */
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after{
  transition:none !important;
  animation:none !important;
}

/* --- Horizontal scroll affordance ---------------------------------------- */
.scroll-hint{display:none}
@media (max-width:640px){
  .scroll-hint{display:flex}
}

/* --- Print --------------------------------------------------------------- */
@media print{.fab-wa,.mobile-bar,.site-header{display:none}}