/* =========================================================
   contact.css
   Page-specific styles for the CONTACT US page only.
   Loaded in addition to common.css, only on contact.blade.php.

   Note: the source page shipped its own header/nav/drawer/footer
   markup and CSS — that's dropped here since it duplicates what
   already lives in common.css + partials/header.blade.php +
   partials/footer.blade.php. Two unused rulesets from the source
   (.hero-banner — its markup was HTML-commented-out, and
   .action-rail/.chat-fab — no matching markup existed) were left
   out as dead code.

   This page uses its own fixed dark palette (independent of the
   site's light/dark toggle), so a few extra tokens are added on
   :root below alongside the ones already in common.css.
   ========================================================= */

:root{
  color-scheme: light dark;   /* default: follow the OS */

  --bg:              light-dark(#faf8f4, #0b0b0c);
  --bg-2:            light-dark(#ffffff, #151517);
  --bg-3:            light-dark(#f1ece2, #1d1d20);
  --line-contact:    light-dark(rgba(20,18,14,.12), rgba(255,255,255,.11));
  --text-contact:    light-dark(#201d18, #f3f1ec);
  --text-dim:        light-dark(#6c665c, #a6a49f);

  --gold-contact:      light-dark(#a9793a, #c9a15a);
  --gold-soft-contact: light-dark(rgba(169,121,58,.12), rgba(201,161,90,.16));
  --on-gold:           #151515;

  --danger-contact:      light-dark(#c0392b, #e08b7f);
  --danger-soft-contact: light-dark(rgba(192,57,43,.10), rgba(224,139,127,.12));

  --shadow-gold: light-dark(rgba(169,121,58,.28), rgba(201,161,90,.35));
  --map-filter:  light-dark(none, grayscale(.3) invert(.92) contrast(.9));
}

/* .chat-bubble */
box-shadow:0 6px 24px var(--shadow-gold);

/* make links follow the theme instead of whatever common.css sets */
.contact-page a{ color:inherit; text-decoration:none; }
.contact-page a:hover{ color:var(--gold-contact); }

/* Force LIGHT when the site's toggle says so (any common convention) */
:root[data-bs-theme="light"], :root[data-theme="light"], :root.light,
html.light, body.light, body.light-theme { color-scheme: light; }

/* Force DARK */
:root[data-bs-theme="dark"], :root[data-theme="dark"], :root.dark,
html.dark, body.dark, body.dark-theme { color-scheme: dark; }
.contact-page{
  background:var(--bg);
  color:var(--text-contact);
  min-height:100vh;
}
.field-error {
  display: none;
  color: #e74c3c;
  font-size: .8rem;
  margin-top: .3rem;
}
.form-control-lux.is-invalid {
  border-color: #e74c3c !important;
}
.form-control-lux.is-invalid ~ .field-error,
.form-control-lux.is-invalid + .field-error {
  display: block;
}
.contact-page h1,
.contact-page h2,
.contact-page h3,
.contact-page .font-display{
  font-family:'Fraunces',serif;
  font-weight:500;
  letter-spacing:.2px;
}

.contact-page a:hover{color:var(--gold-contact);}

/* ===== FLOATING SIDE ACTIONS ===== */
.float-actions{
  position:fixed; right:16px; top:50%; transform:translateY(-50%);
  z-index:1020; display:flex; flex-direction:column; gap:10px;
}
.float-actions a{
  width:56px; height:56px; border-radius:50%;
  background:var(--bg-3); border:1px solid var(--line-contact);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:1.1rem; gap:2px; color:var(--text-contact);
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.float-actions a span{font-size:.55rem; letter-spacing:.2px;}
.float-actions a:hover{transform:scale(1.08); border-color:var(--gold-contact); background:var(--gold-soft-contact); color:var(--gold-contact);}
@media (max-width:767px){ .float-actions{display:none;} }

.chat-bubble{
  position:fixed; bottom:22px; right:22px; z-index:1020;
  width:54px; height:54px; border-radius:50%;
  background:var(--gold-contact); color:#151515;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  box-shadow:0 6px 24px rgba(201,161,90,.35);
  transition:transform .3s ease;
}
.chat-bubble:hover{transform:scale(1.08); color:#151515;}

/* ===== HERO (contact page's own small hero, not the home page hero) ===== */
.contact-hero{
  position:relative;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:90px; /* clears the fixed, transparent site header sitting on top of it */
  background:
    linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,.65) 100%),
    url('/assets/img/project/Scene%202_1.png') no-repeat center center;
  background-size:cover;
  background-position:center;
}

/* ===== SECTIONS ===== */
.section-title{font-size:1.9rem; margin-bottom:1rem;}
.lede{color:var(--text-dim); line-height:1.75; font-size:.98rem;}

/* ===== BUTTONS ===== */
.btn-outline-lux{
  border:1px solid var(--text-contact); color:var(--text-contact); border-radius:40px;
  padding:.85rem 1.4rem; font-size:.92rem; background:transparent;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.btn-outline-lux:hover{background:var(--text-contact); color:var(--bg);}

.btn-gold{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--gold-contact); color:#151515; background:var(--gold-contact); border-radius:40px;
  padding:.85rem 1.5rem; font-size:.92rem; transition:filter .3s ease;
}
.btn-gold::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg,
    transparent 0%, transparent 40%,
    rgba(255,255,255,.85) 50%,
    transparent 60%, transparent 100%);
  background-size:250% 100%;
  background-position:150% 0;
  opacity:0;
  z-index:-1;
  transition:opacity .2s ease;
}
.btn-gold:hover{filter:brightness(1.05); color:#fff; border-color:#fff;}
.btn-gold:hover::before{
  opacity:.55;
  animation:goldSweep .9s cubic-bezier(.4,0,.2,1) forwards;
}
.btn-gold span, .btn-gold i{position:relative; z-index:1;}
@keyframes goldSweep{
  0%{background-position:150% 0;}
  100%{background-position:-50% 0;}
}

.btn-ghost-sm{
  border:1px solid var(--line-contact); color:var(--text-contact); border-radius:40px;
  padding:.55rem 1rem; font-size:.82rem; background:transparent;
  transition:border-color .3s ease, color .3s ease;
}
.btn-ghost-sm:hover{border-color:var(--gold-contact); color:var(--gold-contact);}

@media (prefers-reduced-motion: reduce){
  .btn-gold::before{transition:none; animation:none !important;}
}

/* ===== CARDS / PANELS ===== */
.card-panel{
  background:var(--bg-2); border:1px solid var(--line-contact); border-radius:8px; padding:1.6rem;
}
.card-panel + .card-panel{margin-top:1.6rem;}
.panel-title{font-size:1.15rem; margin-bottom:.9rem;}
.panel-underline{width:44px; height:2px; background:var(--gold-contact); margin-bottom:1.2rem;}

.info-tile{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--bg-2); border:1px solid var(--line-contact); border-radius:8px;
  padding:1.5rem; height:100%;
  transition:border-color .3s ease, transform .3s ease;
}
.info-tile:hover{border-color:var(--gold-contact); transform:translateY(-3px);}
.info-tile .icon-ring{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--gold-contact);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--gold-contact);
}
.info-tile h3{font-size:.78rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-dim); margin-bottom:.5rem; font-family:'Inter',sans-serif; font-weight:600;}
.info-tile p, .info-tile a{margin:0; font-size:.95rem; line-height:1.7; display:block;}
.info-tile a:hover{color:var(--gold-contact);}

.glance-row{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--line-contact); font-size:.88rem;
}
.glance-row:last-child{border-bottom:none;}
.glance-label{display:flex; align-items:center; gap:.55rem; color:var(--text-dim); min-width:44%;}
.glance-label i{color:var(--gold-contact); font-size:.95rem;}
.glance-val{text-align:right; color:var(--text-contact);}

.form-control-lux{
  background:var(--bg); border:1px solid var(--line-contact); color:var(--text-contact);
  border-radius:8px; padding:.7rem 1rem; font-size:.9rem;
}
.form-control-lux:focus{
  background:var(--bg); color:var(--text-contact); border-color:var(--gold-contact);
  box-shadow:0 0 0 3px var(--gold-soft-contact);
}
.form-control-lux::placeholder{color:var(--text-dim);}
.form-control-lux.is-invalid{border-color:#c0645a;}
.field-error{display:none; color:#e08b7f; font-size:.78rem; margin-top:.35rem;}
.form-control-lux.is-invalid ~ .field-error{display:block;}

.sticky-side{position:sticky; top:100px;}
@media (max-width:991px){
  .sticky-side{position:static; margin-top:2.5rem;}
}

/* ===== MAP ===== */
.map-frame{
  border-radius:6px; overflow:hidden; border:1px solid var(--line-contact); height:340px;
}
.map-frame iframe{width:100%; height:100%; border:0; filter:grayscale(.3) invert(.92) contrast(.9);}

/* ===== TOAST ===== */
.lux-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--bg-3); border:1px solid var(--gold-contact); color:var(--text-contact);
  padding:.85rem 1.4rem; border-radius:40px; font-size:.9rem; z-index:2000;
  opacity:0; visibility:hidden; transition:opacity .35s ease, transform .35s ease, visibility .35s ease;
  display:flex; align-items:center; gap:.6rem;
}
.lux-toast.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.lux-toast i{color:var(--gold-contact);}