/*
Theme Name: SJ4M Luxe
Theme URI: https://swissjob4models.com
Author: SJ4M
Author URI: https://swissjob4models.com
Description: Luxe dark standalone theme for Swiss Job 4 Models landing page
Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sj4m-luxe
*/

:root{
  --bg:#0f1013; --card:#17181d; --text:#e8e9ee; --muted:#a5a8b3;
  --radius:20px; --gold:#f7d96b; --gold-2:#ffe08a;
}

body{ padding-top: clamp(210px, 30vw, 340px); }
.container{ max-width:1180px; margin:0 auto; padding:0 16px; }

/* header */
.site-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 8px; }
.site-logo img{ display:block; height:auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)); }

/* hero */
.hero{ padding: clamp(24px,6vw,72px) 0 32px; position:relative; }
.hero--dark{ background: radial-gradient(120% 120% at 50% -10%, #191b20 0%, #0f1013 70%, #0b0c0e 100%); }
.motion-window{ position:relative; margin:0 auto 24px; width:min(1100px,95vw); height:clamp(280px,48vw,540px); border-radius:28px; overflow:hidden; isolation:isolate; box-shadow:0 40px 80px rgba(0,0,0,.45); }
.motion-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); }
.motion-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); opacity:0; transition:opacity .6s ease-out; }
.motion-window.video-ready .motion-video{ opacity:1; }
.glass-overlay{ position:absolute; inset:0; background: radial-gradient(140% 140% at 12% -20%, rgba(255,255,255,.25), transparent 50%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)); mix-blend-mode: screen; pointer-events:none; }
.vignette{ position:absolute; inset:0; background: radial-gradient(100% 100% at 50% 60%, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 95%); pointer-events:none; }

.hero-title{ text-align:center; font-weight:800; letter-spacing:.2px; font-size:clamp(28px,3.4vw,52px); line-height:1.08; margin:10px 0 8px; }
.hero-subtitle{ color: var(--gold) !important; text-align:center; color:var(--muted); font-size:clamp(16px,1.6vw,20px); line-height:1.6; max-width:860px; margin:0 auto 18px; }
.hero-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; padding:14px 22px; border-radius:18px; text-decoration:none; font-weight:800; letter-spacing:.2px; transition: transform .08s ease, filter .2s ease, box-shadow .2s ease; }
.btn--primary{ background: radial-gradient(160% 160% at 50% 0%, #141519 0%, #1d1f25 60%, #121317 100%); color:#fff; border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 24px rgba(0,0,0,.28); }
.btn--primary:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.btn--whatsapp{ background:#1fae5b; color:#fff; border:1px solid rgba(0,0,0,.15); box-shadow:0 10px 24px rgba(31,174,91,.35); }
.btn--whatsapp:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* language switcher */
.lang-switcher{ margin:22px auto 0; display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:980px; }
@media (max-width:900px){ .lang-switcher{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.lang-btn{ display:flex; align-items:center; justify-content:center; gap:14px; padding:16px 18px; font-size:18px; font-weight:800; color:#0b0c0e; border:0; border-radius:16px; background:linear-gradient(180deg,#fff,#f2f3f5); box-shadow:0 8px 22px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.8); }
.lang-btn img{ width:34px; height:24px; object-fit:cover; border-radius:4px; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.lang-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,0,0,.16); }

/* sections/cards */
.section{ padding: clamp(32px,5vw,56px) 0; }
.grid{ display:grid; gap:20px; }
.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:960px){ .cols-2,.cols-3{ grid-template-columns:1fr; } }
.card{ background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:0 10px 28px rgba(0,0,0,.25); }
.card-icon{ margin-bottom:12px; }
h3{ font-size:clamp(20px,2.2vw,26px); margin:0 0 10px; }
p{ margin:0 0 10px; }
.muted{ color:var(--muted); }
.checklist li{ margin:6px 0; }

.gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.gallery img{ border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.25); }
@media (max-width:900px){ .gallery{ grid-template-columns:1fr; } }

/* footer */
.site-footer{ margin-top:36px; padding:24px 0; background:#101116; border-top:1px solid rgba(255,255,255,.06); }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.footer-right a{ color:#e8e9ee; margin-left:16px; text-decoration:none; }
.footer-right a:hover{ text-decoration:underline; }

/* CF7 form */
.sj4m-grid{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
@media (max-width:980px){ .sj4m-grid{ grid-template-columns:1fr; } }
.sj4m-grid label{ display:block; font-size:13px; color:#a5adbb; }
.sj4m-grid input,.sj4m-grid select,.sj4m-grid textarea{ width:100%; padding:12px; border-radius:12px; background:#0f121d; border:1px solid #20253a; color:#f7f7fb; }
.sj4m-grid textarea{ min-height:110px; }
.wpcf7 .btn, .wpcf7-submit.btn, .wpcf7 input[type="submit"]{
  display:inline-block!important; padding:14px 22px!important; border-radius:14px!important; font-weight:700!important; font-size:18px!important; line-height:1.2!important; text-transform:uppercase!important; text-align:center!important; color:#0b0d12!important; background:linear-gradient(135deg,var(--gold),var(--gold-2))!important; border:none!important; cursor:pointer!important; box-shadow:0 6px 16px rgba(235,185,78,.35)!important; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease!important;
}
.wpcf7 .btn:hover, .wpcf7-submit.btn:hover, .wpcf7 input[type="submit"]:hover{ transform:translateY(-2px)!important; box-shadow:0 10px 22px rgba(235,185,78,.45)!important; filter:brightness(1.08)!important; }
.wpcf7 .btn:disabled, .wpcf7-submit.btn:disabled, .wpcf7 input[type="submit"]:disabled{ opacity:.7!important; cursor:not-allowed!important; transform:none!important; box-shadow:none!important; }

/* accessibility */
@media (prefers-reduced-motion: reduce){ .motion-video{ animation:none!important; } }

/* --- v3: larger typography --- */
p, li { font-size: 18px; line-height: 1.7; }
.muted{ color:var(--gold); font-size: 18px; filter: saturate(1.05); }
.sj4m-grid label{ font-size: 18px; }
.sj4m-grid input, .sj4m-grid select, .sj4m-grid textarea{ font-size: 18px; }
.lang-btn{ font-size:20px; }
.hero-subtitle{ color: var(--gold) !important; font-size: clamp(18px, 1.8vw, 22px); }

/* --- v3: golden headings & button text --- */
h1, h2, h3 {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

.btn, .btn * {
  color: #f3d27b !important;
  -webkit-text-fill-color: #f3d27b !important;
}
.btn--primary{
  background: radial-gradient(160% 160% at 50% 0%, #101114 0%, #171920 60%, #0f1013 100%);
  border:1px solid rgba(255,255,255,.12);
}
.btn--whatsapp{ color:#f3d27b !important; }

/* v4 adjustments */
.btn--whatsapp, .btn--whatsapp * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* v6 fix: revert form submit button to green with black text */
.wpcf7 .btn, .wpcf7-submit.btn, .wpcf7 input[type="submit"] {
  background: #1fae5b !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(31,174,91,.4) !important;
}
.wpcf7 .btn:hover, .wpcf7-submit.btn:hover, .wpcf7 input[type="submit"]:hover {
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
}

/* v7: top banner */
.top-banner{ width:100%; background:#0b0c0e; display:flex; justify-content:center; border-bottom:1px solid rgba(255,255,255,.06); }
.top-banner img{ width:100%; height:auto; max-height:292px; object-fit:cover; display:block; }

/* v7: fixed footer */
.fixed-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  background: linear-gradient(180deg, rgba(16,17,22,.98), rgba(8,9,12,.98));
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
body{ padding-bottom: 92px; } /* space for fixed footer */
.footer-inner{ padding: 14px 16px; }
.footer-right{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.footer-right a{ color: var(--gold); text-decoration:none; font-weight:700; }
.footer-right a:hover{ text-decoration:underline; }

/* v8: adaptive banner cropping */
.top-banner{
  width:100%;
  background:#0b0c0e;
  border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.top-banner picture,
.top-banner__img{
  display:block; width:100%; height:100%;
}
/* Maintain elegant header height with responsive crop */
.top-banner{
  /* aspect-ratio fallback via fixed height clamp */
  height: clamp(72px, 11vw, 292px);
}
@supports (aspect-ratio: 1) {
  .top-banner{ aspect-ratio: 2048 / 292; height:auto; }
}
.top-banner__img{
  object-fit: cover;
  object-position: center 45%; /* show a bit higher area on desktop */
}
@media (max-width: 900px){
  .top-banner__img{ object-position: center center; } /* recentre on mobile */
}

/* v8: smooth scrolling & focus visibility */
html{ scroll-behavior:smooth; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:8px; }

/* v8: image fade-in for nicer UX */
.top-banner__img{ opacity:0; transition:opacity .35s ease; }
.top-banner__img:is(img){ animation: none; }
.top-banner__img.loaded{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .top-banner__img{ transition:none; opacity:1; }
}

/* v8: slightly larger base type for premium feel */
body{ font-size: 19px; }

/* v8: footer safe area for iOS home indicator */
@supports (padding: max(0px)) {
  body{ padding-bottom: max(92px, env(safe-area-inset-bottom)); }
}

/* v9: sticky translucent topbar */
/* v9: give page slight top offset to avoid content jump under sticky */
body{ }

/* v9: parallax & shine on banner */
.top-banner{ position: relative; overflow: hidden; }
.top-banner__img{ will-change: transform; transform: translateY(0) scale(1.02); }
.top-banner::after{
  /* subtle gold shine */
  content:""; position:absolute; inset:-40% -20% -20% -20%; pointer-events:none;
  background: radial-gradient(60% 30% at 80% 10%, rgba(255,224,138,.16), rgba(0,0,0,0) 70%);
  transition: opacity .3s ease;
  opacity:.7;
}
.top-banner.shine-animate::after{ opacity:.95; }

/* v9: scroll reveal */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform: none; }

/* v9: button micro-interactions */
.btn{ transition: transform .08s ease, filter .2s ease, box-shadow .2s ease; }
.btn:active{ transform: translateY(1px) scale(.99); }

@media (prefers-reduced-motion: reduce){
  .top-banner__img{ transform:none !important; }
  .top-banner::after{ opacity:.6; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* v11: fixed header (topbar) */
/* reserve space under fixed topbar to prevent jump */
body{ } /* slightly larger than previous 56px */

/* v11: banner overlay centered content */
.top-banner{ position: relative; }
.banner-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.banner-overlay__inner{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  transform: translateY(0);
}
.brand-pill{
  pointer-events:auto;
  background: linear-gradient(180deg, #0f1013, #14161c);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 14px 28px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-pill__text{
  font-weight: 800; letter-spacing:.3px; color:#fff; font-size: clamp(22px, 3.2vw, 40px);
}
.btn--overlay{
  pointer-events:auto;
  padding: 12px 20px;
  font-size: clamp(16px, 2.2vw, 18px);
  border-radius: 14px;
}

/* v11: mobile adaptations */
@media (max-width: 900px){
  .banner-overlay__inner{ gap:12px; }
  body{ } /* slightly smaller on mobile */
}

/* v11: footer taller for logo not squished */
.fixed-footer .footer-inner{ padding: 18px 16px; }
.fixed-footer img{ height: 52px; width: auto; }
body{ padding-bottom: 110px; } /* reserve more space for taller fixed footer */

/* ensure only one WhatsApp in overlay; .site-actions keeps topbar button, but overlay is primary CTA */

/* v14: page offsets for sticky header and fixed footer */
body{ padding-bottom: 110px; }

/* v14: WhatsApp CTA block directly under header */
.cta-whatsapp{ display:flex; justify-content:center; padding: 14px 0 8px; }
.btn--full.btn--whatsapp{
  background:#1fae5b !important;
  color:#000 !important; -webkit-text-fill-color:#000 !important;
  font-weight:800; letter-spacing:.2px;
  padding: 12px 18px; border-radius: 14px;
  box-shadow: 0 8px 18px rgba(31,174,91,.35);
}
.btn--full.btn--whatsapp:hover{ filter:brightness(1.06); transform: translateY(-1px); }

/* Remove any legacy banner blocks if they appear */
.top-banner, .top-banner--removed, .top-banner--to-remove{ display:none !important; }

/* v14: footer text-only layout */
.footer-textonly{ align-items:center; justify-content:space-between; gap:16px; }
.footer-line, .footer-copy{ margin:0; color: var(--gold); font-weight:700; }
.fixed-footer .footer-inner{ padding: 20px 16px; }

@media (max-width: 900px){
  .footer-textonly{ flex-direction:column; text-align:center; gap:8px; }
}

/* v14.1: ensure only one CTA and themed buttons */
.cta-whatsapp{ display:flex; justify-content:center; padding: 16px 0 10px; }
.btn--whatsapp{ background:#1fae5b !important; color:#000 !important; -webkit-text-fill-color:#000 !important; }
.btn--full{ font-weight:800; padding:12px 20px; border-radius:14px; box-shadow:0 8px 18px rgba(31,174,91,.35); }
.btn--full:hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* footer button */
.btn--footer{ padding:10px 16px; border-radius:12px; box-shadow:0 6px 16px rgba(31,174,91,.3); font-weight:800; }
.footer-copy{ margin:0; color: var(--gold); font-weight:700; }

/* hide accidental header small buttons if any cached markup persists */


/* v16: sticky header with parallax banner background */
.hero-header.fixed{position:fixed;top:0;left:0;right:0;z-index:1600;height:clamp(200px,28vw,320px);background:url('assets/images/header-banner.webp') center 45%/cover no-repeat,#0b0c0e;border-bottom:1px solid rgba(255,255,255,.08);}
.header-inner{ width:100%; padding: 12px 0; display:flex; justify-content:center; }
.cta-group{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* Buttons */
.btn--whatsapp{ background:#1fae5b !important; color:#000 !important; -webkit-text-fill-color:#000 !important; }
.btn--call{ background:#ffd166 !important; color:#0b0c0e !important; }
.btn--full{ font-weight:800; padding:12px 20px; border-radius:14px; box-shadow:0 8px 18px rgba(0,0,0,.25); }
.btn--full:hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* Body offset for fixed header + fixed footer */
body{ padding-top: clamp(150px, 26vw, 240px); padding-bottom: 110px; }

/* Mobile: stack CTAs */
@media (max-width: 900px){
  .cta-group{ flex-direction:column; align-items:center; gap:10px; }
  .btn--full{ font-size:16px; padding:12px 18px; }
}

/* Parallax effect: banner shifts subtly on scroll (JS toggles CSS var) */
.hero-header.fixed{position:fixed;top:0;left:0;right:0;z-index:1600;height:clamp(200px,28vw,320px);background:url('assets/images/header-banner.webp') center 45%/cover no-repeat,#0b0c0e;border-bottom:1px solid rgba(255,255,255,.08);}

/* v16.1: remove call button styles and polish */
.btn--call{ display:none !important; }
.hero-header.fixed{position:fixed;top:0;left:0;right:0;z-index:1600;height:clamp(200px,28vw,320px);background:url('assets/images/header-banner.webp') center 45%/cover no-repeat,#0b0c0e;border-bottom:1px solid rgba(255,255,255,.08);}

/* v16.2: normal footer centered */
.site-footer{ background:#101116; border-top:1px solid rgba(255,255,255,.08); margin-top:24px; }
.footer-centered{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 0; }
.btn--footer{ background:#1fae5b !important; color:#000 !important; -webkit-text-fill-color:#000 !important; font-weight:800; padding:10px 16px; border-radius:12px; box-shadow:0 6px 16px rgba(31,174,91,.30); }
.footer-copy{ margin:0; color:var(--gold); font-weight:700; }
/* Hide any stray blocks in header (yellow squares) */
.hero-header.fixed .widget, .hero-header.fixed img, .hero-header.fixed .menu, .hero-header.fixed .menu-toggle, .hero-header.fixed .site-logo, .hero-header.fixed .custom-logo-link{ display:none !important; }

/* v17-clean: gold-on-dark reset */
:root{
  --bg:#0f1013; --card:#17181d; --text:#e8e9ee;
  --gold:#eab84e; --gold-strong:#f7d873;
}
html, body{ background:#0f1013; color:var(--gold-strong); }
h1,h2,h3,h4,h5,h6,p,li,span,small,div{ color:var(--gold-strong); }
a{ color:var(--gold); } a:hover{ color:var(--gold-strong); text-decoration:underline; }

/* Simple top banner */
.top-banner-static{ width:100%; }
.top-banner-static img{ display:block; width:100%; height:auto; object-fit:cover; }

/* Kill any legacy sticky header/menu/logo/widgets */
.hero-header, .topbar, .site-header, .menu, .menu-toggle, .custom-logo-link,
.site-branding, .site-logo, .site-header img, .site-header .widget { display:none !important; }
body{ padding-top:0 !important; }

/* Cards/sections remain dark */
.card{ background:var(--card); border-radius:16px; }
.section{ padding: clamp(24px,5vw,56px) 0; }

/* Footer centered */
.site-footer{ background:#101116; border-top:1px solid rgba(255,255,255,.08); margin-top:24px; }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 0; }
.footer-copy{ margin:0; color:var(--gold); font-weight:700; }

/* WhatsApp button */
.btn--whatsapp{
  display:inline-flex; align-items:center; justify-content:center;
  background:#1fae5b !important; color:#000 !important; -webkit-text-fill-color:#000 !important;
  font-weight:800; padding:12px 18px; border-radius:14px; box-shadow:0 8px 18px rgba(31,174,91,.35);
}
