/*
Theme Name: Mobyl Petrolium Supply
Theme URI: https://mobyl.ae
Author: Mobyl Petrolium Supply
Description: One-page bilingual (English / French) company website for Mobyl Petrolium Supply — lubricants, greases and construction machinery. Includes a quote request form.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mobyl
*/

:root{
  --mb-navy:#0F1B27;
  --mb-navy-2:#172634;
  --mb-ink:#14212E;
  --mb-ground:#F5F4F0;
  --mb-sand:#E9E6DC;
  --mb-card:#FBFAF7;
  --mb-line:#DAD7CC;
  --mb-muted:#46535F;
  --mb-accent:#F28C28;
  --mb-accent-text:#9A4708;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.mobyl{margin:0;background:var(--mb-ground);color:var(--mb-ink);font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.6}
.mobyl a{color:var(--mb-accent-text)}
.mobyl a:hover{color:#6E3205}
.mobyl h1,.mobyl h2,.mobyl h3{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;margin:0}
.mobyl p{margin:0}
.mobyl input,.mobyl select,.mobyl textarea,.mobyl button{font:inherit}

.mb-wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
.mb-eyebrow{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--mb-accent-text);font-weight:600}
.mb-h2{font-size:46px;line-height:1.05}

.mb-btn{display:inline-flex;align-items:center;min-height:48px;padding:14px 26px;border-radius:3px;font-weight:600;text-decoration:none;border:0;cursor:pointer;font-size:17px}
.mb-btn--accent{background:var(--mb-accent);color:var(--mb-navy)!important}
.mb-btn--accent:hover{background:#E07A15}
.mb-btn--ghost{color:#fff!important;border:1px solid #4A5B6B}
.mb-btn--ghost:hover{border-color:#fff}

/* Header */
.mb-header{background:var(--mb-navy);border-bottom:1px solid #22313F}
.mb-header .mb-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.mb-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.mb-brand-text{display:flex;flex-direction:column;line-height:1.1}
.mb-brand-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;letter-spacing:.06em;color:#fff}
.mb-brand-sub{font-size:11px;letter-spacing:.14em;color:#B7C2CC}
.mb-nav{display:flex;flex-wrap:wrap;align-items:center;gap:28px}
.mb-nav a.mb-nav-link{color:#DDE4EA;text-decoration:none;font-weight:500}
.mb-nav a.mb-nav-link:hover{color:#fff}
.mb-lang{display:flex;gap:6px;font-size:14px;font-weight:600}
.mb-lang span,.mb-lang a{padding:4px 8px;border-radius:3px;text-decoration:none}
.mb-lang .is-current{color:#fff;border:1px solid var(--mb-accent)}
.mb-lang a{color:#B7C2CC!important;border:1px solid #3A4A59}
.mb-nav .mb-btn{min-height:44px;padding:12px 20px}

/* Hero */
.mb-hero{background:var(--mb-navy);color:#fff}
.mb-hero .mb-wrap{padding-top:96px;padding-bottom:104px}
.mb-hero-inner{max-width:820px;display:flex;flex-direction:column;gap:28px}
.mb-hero .mb-eyebrow{color:#F7A856}
.mb-hero h1{font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:.01em}
.mb-hero-lead{max-width:640px;font-size:19px;color:#C9D3DC}
.mb-actions{display:flex;flex-wrap:wrap;gap:14px}
.mb-stripe{height:10px;background:repeating-linear-gradient(90deg,var(--mb-accent) 0 48px,var(--mb-navy) 48px 64px)}

/* About */
.mb-about{display:flex;flex-wrap:wrap;gap:56px;padding-top:96px;padding-bottom:96px}
.mb-about-head{flex:1 1 340px;display:flex;flex-direction:column;gap:12px}
.mb-about-body{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:18px;font-size:18px}

/* Products */
.mb-products{background:#fff;border-top:1px solid #E2E0D8;border-bottom:1px solid #E2E0D8}
.mb-products .mb-wrap{padding-top:96px;padding-bottom:96px;display:flex;flex-direction:column;gap:48px}
.mb-section-head{display:flex;flex-direction:column;gap:12px;max-width:720px}
.mb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.mb-card{border:1px solid var(--mb-line);border-top:4px solid var(--mb-navy);padding:32px;display:flex;flex-direction:column;gap:16px;background:var(--mb-card)}
.mb-card--accent{border-top-color:var(--mb-accent)}
.mb-card h3{font-size:30px;line-height:1.1}
.mb-card p{color:var(--mb-muted)}
.mb-card ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}

/* Process */
.mb-process{padding-top:96px;padding-bottom:96px;display:flex;flex-direction:column;gap:48px}
.mb-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.mb-steps li{display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--mb-ink);padding-top:20px}
.mb-step-num{font-family:'Barlow Condensed',sans-serif;font-size:44px;font-weight:700;color:var(--mb-accent-text);line-height:1}
.mb-steps strong{font-size:20px}
.mb-steps span.mb-step-text{color:var(--mb-muted)}

/* Why */
.mb-why{background:var(--mb-sand)}
.mb-why .mb-wrap{padding-top:88px;padding-bottom:88px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px}
.mb-why-item{display:flex;flex-direction:column;gap:10px}
.mb-why-item h3{font-size:28px}
.mb-why-item p{color:#3C4955}

/* Contact */
.mb-contact{display:flex;flex-wrap:wrap;gap:56px;padding-top:96px;padding-bottom:96px}
.mb-contact-info{flex:1 1 320px;display:flex;flex-direction:column;gap:22px}
.mb-contact-info > p{color:var(--mb-muted)}
.mb-details{display:flex;flex-direction:column;gap:14px;border-top:1px solid #D6D3C8;padding-top:22px}
.mb-details div{display:flex;flex-direction:column}
.mb-label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#5A6672;font-weight:600}
.mb-form{flex:999 1 520px;min-width:0;background:#fff;border:1px solid var(--mb-line);padding:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.mb-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
.mb-form input,.mb-form select,.mb-form textarea{padding:12px;border:1px solid #A9B1B8;border-radius:3px;font-weight:400;min-height:46px;background:#fff;color:var(--mb-ink);width:100%}
.mb-form textarea{resize:vertical;min-height:130px}
.mb-form input:focus,.mb-form select:focus,.mb-form textarea:focus{outline:2px solid var(--mb-accent);outline-offset:1px;border-color:var(--mb-ink)}
.mb-full{grid-column:1 / -1}
.mb-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.mb-notice{grid-column:1 / -1;padding:14px 16px;border-radius:3px;font-weight:500}
.mb-notice--ok{background:#E6F2EA;color:#1D5631;border:1px solid #A9D1B6}
.mb-notice--err{background:#FBEAEA;color:#8A1F1F;border:1px solid #E5B3B3}

/* Footer */
.mb-footer{background:var(--mb-navy);color:#9FB0BF;font-size:13px}
.mb-footer .mb-wrap{padding-top:28px;padding-bottom:28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

/* Default page (index.php) */
.mb-page{padding-top:64px;padding-bottom:96px;max-width:820px}
.mb-page h1{font-size:46px;margin-bottom:24px}
.mb-page .entry-content p{margin:0 0 1em}

@media (max-width:640px){
  .mb-nav{gap:16px}
  .mb-h2{font-size:38px}
  .mb-hero .mb-wrap{padding-top:64px;padding-bottom:72px}
  .mb-form{padding:24px}
}