/*
Theme Name: Maritime Lux Services
Theme URI: https://maritimeluxservices.com
Author: WebVue
Author URI: https://webvue.com.lb
Description: Bespoke marketing theme for Maritime Lux Services. On activation it creates every page (Home, About, Services, Sectors, Contact), sets Home as the static front page, and builds the primary navigation menu. Classic PHP theme — no page builder required.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maritime-lux
*/

/* =========================================================
   Base resets
   ========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Jost', sans-serif;
  color: #4a5a68;
  background: #ffffff;
  overflow-x: clip;
}
img { max-width: 100%; }
a { color: #3f7cad; text-decoration: none; transition: color .2s ease; }
a:hover { color: #16324e; }
input, select, textarea { font-family: 'Jost', sans-serif; }
input::placeholder, textarea::placeholder { color: #9aa7b2; }

/* Push page content below the fixed header */
.mlx-site { padding-top: 0; }

/* =========================================================
   Buttons & links (interactive states — need real CSS in PHP)
   ========================================================= */
.mlx-btn {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: all .2s ease;
  line-height: 1;
}
.mlx-btn--light  { background:#ffffff; color:#0d223a; padding:16px 32px; }
.mlx-btn--light:hover  { background:#9cc4e0; color:#0d223a; }
.mlx-btn--ghost  { color:#ffffff; border:1px solid rgba(255,255,255,0.45); padding:16px 32px; }
.mlx-btn--ghost:hover  { border-color:#ffffff; background:rgba(255,255,255,0.08); color:#ffffff; }
.mlx-btn--cyan   { background:#9cc4e0; color:#0d223a; padding:18px 40px; white-space:nowrap; }
.mlx-btn--cyan:hover   { background:#ffffff; color:#0d223a; }
.mlx-btn--nav    { background:#16324e; color:#ffffff !important; padding:12px 22px; font-size:13px; letter-spacing:0.1em; }
.mlx-btn--nav:hover    { background:#0f2740; color:#ffffff !important; }
.mlx-btn--dark   { background:#16324e; color:#ffffff; padding:17px 32px; border:none; width:100%; }
.mlx-btn--dark:hover   { background:#0f2740; }
.mlx-btn--outline{ background:transparent; color:#16324e; border:1px solid #3f7cad; padding:14px 30px; }
.mlx-btn--outline:hover{ background:#f4f6f8; color:#16324e; }

/* Arrow text-links */
.mlx-arrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Jost',sans-serif; font-size:14px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:#16324e;
  border-bottom:1px solid #3f7cad; padding-bottom:6px;
  transition:gap .2s ease, color .2s ease;
}
.mlx-arrow:hover { gap:16px; color:#16324e; }
.mlx-arrow span { color:#3f7cad; }
.mlx-arrow--plain { border-bottom:1px solid #3f7cad; padding-bottom:6px; white-space:nowrap; }

/* Service grid cells */
.mlx-svc { background:#ffffff; transition:background .25s ease; }
.mlx-svc:hover { background:#fbfcfd; }

/* Sector image cards (home) */
.mlx-sectorimg img { transition:transform .5s cubic-bezier(.16,1,.3,1); }
.mlx-sectorimg:hover img { transform:scale(1.05); }

/* Sector cards (sectors page) */
.mlx-scard { transition:box-shadow .3s ease, transform .3s ease; }
.mlx-scard:hover { box-shadow:0 30px 60px -34px rgba(13,34,58,0.42); transform:translateY(-4px); }

/* Footer links & social */
.mlx-footlink { color:#ffffff; }
.mlx-footlink:hover { color:#ffffff; opacity:.78; }
.mlx-social {
  width:42px; height:42px; border:1px solid rgba(255,255,255,0.16); border-radius:2px;
  display:flex; align-items:center; justify-content:center; color:#c8d3de; transition:all .2s ease;
}
.mlx-social:hover { border-color:#3f7cad; color:#9cc4e0; }

/* Contact links */
.mlx-clink { color:#16324e; }
.mlx-clink:hover { color:#3f7cad; }

/* Contact form fields */
.mlx-input {
  width:100%; padding:13px 15px; border:1px solid #d7dee5; border-radius:2px;
  font-size:15px; color:#16324e; background:#fbfcfd; outline:none; transition:border-color .2s ease;
}
.mlx-input:focus { border-color:#16324e; background:#ffffff; }
textarea.mlx-input { resize:vertical; line-height:1.6; }

/* Header nav link + active underline */
.mlx-navlink {
  position:relative; font-family:'Jost',sans-serif; font-size:13px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:#5a6b78; padding:6px 0;
}
.mlx-navlink:hover { color:#3f7cad; }
.mlx-navlink.is-active { color:#3f7cad; }
.mlx-navlink.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:#3f7cad;
}
.mlx-mnavlink { color:#16324e; }
.mlx-mnavlink:hover { color:#3f7cad; }

/* =========================================================
   Scroll reveals (CSS scroll-driven — no JS scheduling)
   ========================================================= */
@keyframes mlxRUp    { from{opacity:0;transform:translateY(34px)} to{opacity:1;transform:translateY(0)} }
@keyframes mlxRLeft  { from{opacity:0;transform:translateX(-38px)} to{opacity:1;transform:translateX(0)} }
@keyframes mlxRRight { from{opacity:0;transform:translateX(38px)} to{opacity:1;transform:translateX(0)} }
@keyframes mlxRScale { from{opacity:0;transform:scale(1.05)} to{opacity:1;transform:scale(1)} }
@keyframes mlxUp     { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes mlxCurtainUp { from{transform:translateY(0)} to{transform:translateY(-100%)} }
@keyframes mlxPreLogo   { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes mlxPreFill   { from{transform:scaleX(0)} to{transform:scaleX(1)} }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal],
    [data-reveal-stagger] > * {
      animation: mlxRUp both;
      animation-timeline: view();
      animation-range: entry 0% entry 62%;
      will-change: opacity, transform;
    }
    [data-reveal="left"]  { animation-name: mlxRLeft; }
    [data-reveal="right"] { animation-name: mlxRRight; }
    [data-reveal="scale"] { animation-name: mlxRScale; }
    [data-reveal-stagger] > *:nth-child(2) { animation-range: entry 8%  entry 70%; }
    [data-reveal-stagger] > *:nth-child(3) { animation-range: entry 15% entry 77%; }
    [data-reveal-stagger] > *:nth-child(4) { animation-range: entry 22% entry 84%; }
    [data-reveal-stagger] > *:nth-child(5) { animation-range: entry 29% entry 91%; }
    [data-reveal-stagger] > *:nth-child(6) { animation-range: entry 36% entry 98%; }
  }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 920px) {
  .mlx-split  { grid-template-columns: 1fr !important; }
  .mlx-c4     { grid-template-columns: repeat(2, 1fr) !important; }
  .mlx-cv     { grid-template-columns: repeat(2, 1fr) !important; }
  .mlx-c3     { grid-template-columns: repeat(2, 1fr) !important; }
  .mlx-footer { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 720px) {
  .mlx-c2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .mlx-cv      { grid-template-columns: 1fr !important; }
  .mlx-c3      { grid-template-columns: 1fr !important; }
  .mlx-footer  { grid-template-columns: 1fr !important; }
  .mlx-formrow { grid-template-columns: 1fr !important; }
  .mlx-founder-stats { flex-wrap: wrap !important; gap: 24px 40px !important; }
}

/* Nav mobile menu */
.mlx-nav-burger { display: none; }
.mlx-mobile-panel { display: none; }
@media (max-width: 900px) {
  .mlx-nav-links  { display: none !important; }
  .mlx-nav-burger { display: flex !important; align-items: center; justify-content: center; }
  .mlx-mobile-panel {
    display: block; overflow: hidden; max-height: 0;
    transition: max-height .4s cubic-bezier(.16,1,.3,1); border-top: 1px solid transparent;
  }
  .mlx-mobile-panel[data-open="true"] { max-height: 560px; border-top-color: #e4e9ee; }
}