/*
Theme Name: AlMumtaz Jotun
Theme URI: https://al-mumtaz.ly
Author: AlMumtaz Company
Author URI: https://al-mumtaz.ly
Description: Custom Jotun-branded theme for AlMumtaz — an Arabic-first, bilingual one-page site with a hero slider, scroll animations and a project inquiry form that emails your team.
Version: 1.2.0
Requires at least: 5.9
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: almumtaz
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

html{box-sizing:border-box;}
*,*::before,*::after{box-sizing:inherit;}
body{margin:0;}
img{max-width:100%; height:auto;}

/* ============ Tokens, base ============ */
.am-site{
  --am-blue:#031E45; --am-blue-mid:#0C3B6B; --am-blue-deep:#020F26;
  --am-red:#D52B1E; --am-red-dark:#B8231A; --am-yellow:#F0AB00;
  --am-off:#F4F5F7; --am-ink:#10202F; --am-ink-soft:#51616F;
  --am-line:#E2E6EA; --am-white:#FFFFFF;
  --am-container:1180px;
  --am-ease:cubic-bezier(.22,.68,0,1);
  --am-glow-x:78%;

  --am-font-en:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --am-font-en-head:'Archivo','Inter',system-ui,sans-serif;
  --am-font-ar:'Noto Sans Arabic','Inter',system-ui,'Segoe UI',sans-serif;
  --am-font-ar-head:'Noto Kufi Arabic','Noto Sans Arabic','Archivo',system-ui,sans-serif;
  --am-font:var(--am-font-en);
  --am-font-head:var(--am-font-en-head);

  font-family:var(--am-font);
  font-size:16px;
  line-height:1.5;
  color:var(--am-ink);
  background:var(--am-white);
  direction:ltr;
  -webkit-font-smoothing:antialiased;
}
.am-site.is-ar{
  --am-font:var(--am-font-ar);
  --am-font-head:var(--am-font-ar-head);
  --am-glow-x:22%;
  direction:rtl;
}

.am-site img{max-width:100%; display:block;}
.am-site a{color:inherit; text-decoration:none;}
.am-site ul{margin:0; padding:0; list-style:none;}
.am-site p{margin:0;}
.am-site h1,.am-site h2,.am-site h3,.am-site h4{font-family:var(--am-font-head); margin:0; letter-spacing:0;}
.am-site button,.am-site input,.am-site textarea{font-family:inherit;}
.am-site [hidden]{display:none !important;}
.am-site ::selection{background:var(--am-yellow); color:var(--am-blue);}
.am-site a:focus-visible,
.am-site button:focus-visible{outline:3px solid var(--am-yellow); outline-offset:2px;}

.am-site:not(.is-ar) .am-ar{display:none !important;}
.am-site.is-ar .am-en{display:none !important;}

.am-wrap{max-width:var(--am-container); margin-inline:auto; padding-inline:28px;}
body.am-lock{overflow:hidden;}

/* ============ Scroll reveal ============ */
.am-js .am-reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--am-ease), transform .7s var(--am-ease);}
.am-js .am-reveal.is-visible{opacity:1; transform:none;}
.am-js .am-reveal-stagger > *{opacity:0; transform:translateY(22px); transition:opacity .6s var(--am-ease), transform .6s var(--am-ease);}
.am-js .am-reveal-stagger.is-visible > *{opacity:1; transform:none;}
.am-js .am-reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s;}
.am-js .am-reveal-stagger.is-visible > *:nth-child(2){transition-delay:.15s;}
.am-js .am-reveal-stagger.is-visible > *:nth-child(3){transition-delay:.25s;}
.am-js .am-reveal-stagger.is-visible > *:nth-child(4){transition-delay:.35s;}
.am-js .am-reveal-stagger.is-visible > *:nth-child(5){transition-delay:.45s;}

/* ============ Paint-stripe motif ============ */
.am-stripe{display:flex; height:5px; width:100%;}
.am-stripe span{flex:1;}
.am-stripe span:nth-child(1){background:var(--am-blue);}
.am-stripe span:nth-child(2){background:var(--am-red);}
.am-stripe span:nth-child(3){background:var(--am-yellow);}

.am-eyebrow{
  display:inline-block; position:relative;
  font:600 12.5px/1 var(--am-font); color:var(--am-red);
  margin:0 0 14px; padding-bottom:10px;
}
.am-eyebrow::after{
  content:""; position:absolute; bottom:0; inset-inline-start:0;
  height:3px; width:26px; background:var(--am-yellow);
  transition:width .6s var(--am-ease) .2s;
}
.am-reveal.is-visible .am-eyebrow::after{width:44px;}

/* ============ Buttons ============ */
.am-btn{
  display:inline-block; cursor:pointer; text-align:center;
  font:700 14px/1 var(--am-font); padding:12px 22px;
  border-radius:6px; border:1.5px solid transparent;
  transition:transform .25s var(--am-ease), background .25s, border-color .25s;
}
.am-btn:hover{transform:translateY(-2px);}
.am-btn--primary{background:var(--am-red); color:var(--am-white);}
.am-btn--primary:hover{background:var(--am-red-dark); color:var(--am-white);}
.am-btn--yellow{background:var(--am-yellow); color:var(--am-blue);}
.am-btn--yellow:hover{background:#D99700; color:var(--am-blue);}
.am-btn--ghost{color:var(--am-white); border-color:rgba(255,255,255,.45); background:transparent;}
.am-btn--ghost:hover{border-color:var(--am-white); background:rgba(255,255,255,.08); color:var(--am-white);}

/* ============ Top bar ============ */
.am-topbar{background:var(--am-blue-deep); color:#a9b8cc; font-size:13px;}
.am-topbar .am-wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:36px;}
.am-topbar-contact{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.am-topbar-contact a:hover{color:var(--am-yellow);}
.am-lang{display:flex; gap:2px; padding:2px; border-radius:5px; background:rgba(255,255,255,.08);}
.am-lang button{
  font:600 12px/1 var(--am-font); color:#a9b8cc; background:transparent;
  border:0; padding:6px 11px; border-radius:4px; cursor:pointer;
}
.am-lang button[data-am-lang="ar"]{font-family:var(--am-font-ar);}
.am-lang button[data-am-lang="en"]{font-family:var(--am-font-en);}
.am-lang button.is-active{background:var(--am-white); color:var(--am-blue);}

/* ============ Header + main menu ============ */
.am-header{
  position:sticky; top:0; z-index:50;
  background:var(--am-blue);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.admin-bar .am-header{top:32px;}
@media (max-width:782px){ .admin-bar .am-header{top:46px;} }

.am-nav-row{display:flex; align-items:center; justify-content:space-between; gap:24px; height:80px;}
.am-logo{display:flex; align-items:center; gap:11px;}
.am-logo-mark{position:relative; overflow:hidden; flex:none; width:38px; height:38px; border-radius:8px; background:var(--am-blue);}
.am-logo-mark i{position:absolute; inset:0;}
.am-logo-mark i:nth-child(1){background:var(--am-red); clip-path:polygon(0 100%,100% 0,100% 100%);}
.am-logo-mark i:nth-child(2){background:var(--am-yellow); clip-path:polygon(0 100%,55% 40%,100% 100%);}
.am-logo-name{display:block; font:800 20px/1 var(--am-font-en-head); color:var(--am-blue); direction:ltr; text-align:start;}
.am-logo-sub{display:block; font:500 11px/1 var(--am-font); color:var(--am-ink-soft); margin-top:4px;}
.am-logo-placeholder{display:flex; align-items:center;}
.am-header .am-logo-name{color:var(--am-white);}
.am-header .am-logo-sub{color:#b7c4d6;}
.am-logo-uploaded{display:block;}
.am-logo-uploaded .custom-logo-link{display:block;}
.am-logo-uploaded img{display:block; max-height:48px; width:auto;}
.am-footer .am-logo-uploaded img{max-height:40px;}

.am-nav ul{display:flex; gap:6px;}
.am-nav a{
  display:block; padding:10px 16px 9px;
  font:600 14px/1 var(--am-font); color:var(--am-white);
  border-bottom:3px solid transparent;
}
.am-nav a:hover{color:var(--am-yellow);}
.am-nav a.is-active{color:var(--am-white); border-bottom-color:var(--am-yellow);}

.am-nav-actions{display:flex; align-items:center; gap:14px;}
.am-nav-toggle{
  display:none; width:42px; height:42px; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px solid rgba(255,255,255,.35); border-radius:8px; background:transparent; cursor:pointer;
}
.am-nav-toggle span{display:block; width:20px; height:2px; background:var(--am-white);}

.am-mobile-nav{display:none; position:fixed; inset:0; z-index:9999; background:rgba(2,15,38,.55);}
.am-mobile-nav.is-open{display:block;}
.am-mobile-panel{position:absolute; top:0; inset-inline-end:0; width:min(320px,84%); height:100%; overflow-y:auto; background:var(--am-white); padding:26px 24px;}
.am-mobile-close{width:36px; height:36px; margin-bottom:20px; border:0; border-radius:50%; background:var(--am-off); color:var(--am-ink); font-size:20px; line-height:1; cursor:pointer;}
.am-mobile-panel a{display:block; padding:16px 4px; font:700 16px/1 var(--am-font); color:var(--am-blue); border-bottom:1px solid var(--am-line);}
.am-mobile-panel a.am-btn{color:var(--am-blue); border:0; padding:14px 22px; margin-top:20px;}

/* ============ Hero slider ============ */
.am-hero{position:relative; display:grid; overflow:hidden; background:var(--am-blue); color:var(--am-white);}
.am-slide{
  grid-area:1 / 1; position:relative; display:flex; align-items:center; min-height:600px;
  opacity:0; visibility:hidden;
  transition:opacity 1.1s var(--am-ease), visibility 0s linear 1.1s;
}
.am-slide.is-active{opacity:1; visibility:visible; z-index:1; transition:opacity 1.1s var(--am-ease), visibility 0s;}

.am-slide-media{position:absolute; inset:0; overflow:hidden; transform:scale(1); transition:transform 0s linear 1.1s;}
.am-slide.is-active .am-slide-media{transform:scale(1.08); transition:transform 7s linear;}
.am-slide-bg{
  position:absolute; inset:0; background-color:var(--am-blue);
  background-size:cover; background-position:center;
}
.am-slide-scrim{position:absolute; inset:0; background:radial-gradient(circle at var(--am-glow-x) 30%, rgba(3,30,69,.55) 0%, rgba(3,30,69,.74) 45%, rgba(2,15,38,.9) 100%);}

.am-slide > .am-wrap{position:relative; z-index:2; width:100%; padding-block:72px 96px;}

.am-hero-eyebrow,.am-hero-title,.am-hero-lead,.am-hero-cta{opacity:0; transform:translateY(16px);}
.am-slide.is-active .am-hero-eyebrow,
.am-slide.is-active .am-hero-title,
.am-slide.is-active .am-hero-lead,
.am-slide.is-active .am-hero-cta{opacity:1; transform:none;}
.am-hero-eyebrow{font:700 16px/1.3 var(--am-font); color:var(--am-yellow); margin-bottom:18px; transition:opacity .7s var(--am-ease) .3s, transform .7s var(--am-ease) .3s;}
.am-hero-title{font-size:45px; line-height:1.14; font-weight:800; max-width:560px; margin:0 0 20px; transition:opacity .8s var(--am-ease) .4s, transform .8s var(--am-ease) .4s;}
.am-site.is-ar .am-hero-title{font-size:40px; line-height:1.4;}
.am-accent{color:var(--am-yellow);}
.am-hero-lead{font-size:17px; line-height:1.7; color:#c7d3e2; max-width:480px; margin-bottom:30px; transition:opacity .8s var(--am-ease) .5s, transform .8s var(--am-ease) .5s;}
.am-hero-cta{display:flex; flex-wrap:wrap; gap:14px; transition:opacity .8s var(--am-ease) .6s, transform .8s var(--am-ease) .6s;}

.am-slider-controls{position:absolute; inset-inline:0; bottom:32px; z-index:5;}
.am-dots{display:flex; gap:10px;}
.am-dot{width:34px; height:5px; padding:0; border:0; border-radius:3px; background:rgba(255,255,255,.28); cursor:pointer;}
.am-dot.is-active{background:var(--am-yellow);}

/* ============ Sections ============ */
.am-section{padding-block:88px; scroll-margin-top:96px;}
.am-section--alt{background:var(--am-off);}
.am-section-head{max-width:640px; margin-bottom:48px;}
.am-section-head h2{font-size:32px; line-height:1.25; font-weight:800; color:var(--am-blue); margin-bottom:14px;}
.am-site.is-ar .am-section-head h2{font-size:29px; line-height:1.5;}
.am-section-head p{font-size:16px; line-height:1.7; color:var(--am-ink-soft);}

/* About */
.am-about{display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center;}
.am-about-media{position:relative; min-height:340px; border-radius:10px; background:linear-gradient(135deg,var(--am-blue),var(--am-blue-mid));}
.am-about-media img{width:100%; height:340px; object-fit:cover; border-radius:10px;}
.am-about-tag{
  position:absolute; bottom:-18px; inset-inline-start:-18px;
  display:flex; align-items:center; gap:12px; padding:16px 20px;
  background:var(--am-white); border-radius:8px; box-shadow:0 14px 34px -12px rgba(3,30,69,.28);
  font:700 13.5px/1.3 var(--am-font); color:var(--am-blue);
}
.am-about-tag i{display:block; width:10px; height:10px; border-radius:50%; background:var(--am-red);}
.am-about-copy h2{font-size:29px; line-height:1.3; font-weight:800; color:var(--am-blue); margin-bottom:18px;}
.am-about-copy p{font-size:15.5px; line-height:1.85; color:var(--am-ink-soft); margin-bottom:16px;}
.am-about-copy p strong{color:var(--am-ink);}
.am-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
.am-chip{font:600 12.5px/1 var(--am-font); padding:8px 14px; border-radius:20px; background:var(--am-off); color:var(--am-blue); border:1px solid var(--am-line);}

/* Solutions */
.am-solutions{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.am-card{position:relative; padding:32px 28px; background:var(--am-white); border:1px solid var(--am-line); border-radius:10px; transition:transform .35s var(--am-ease), box-shadow .35s var(--am-ease);}
.am-card:hover{transform:translateY(-6px); box-shadow:0 22px 40px -20px rgba(3,30,69,.28);}
.am-card::before{content:""; position:absolute; top:0; inset-inline:0; height:4px; border-radius:10px 10px 0 0; background:var(--am-blue);}
.am-card--red::before{background:var(--am-red);}
.am-card--yellow::before{background:var(--am-yellow);}
.am-card-icon{display:flex; align-items:center; justify-content:center; width:46px; height:46px; margin-bottom:22px; border-radius:9px; background:var(--am-blue); color:#fff;}
.am-card-icon svg{width:24px; height:24px;}
.am-card--red .am-card-icon{background:var(--am-red);}
.am-card--yellow .am-card-icon{background:var(--am-yellow); color:var(--am-blue);}
.am-card h3{font-size:19px; font-weight:800; color:var(--am-blue); margin-bottom:12px;}
.am-card p{font-size:14.5px; line-height:1.7; color:var(--am-ink-soft);}

/* Sectors */
.am-section--dark{background:var(--am-blue); color:var(--am-white);}
.am-section--dark .am-eyebrow{color:var(--am-yellow);}
.am-section--dark .am-section-head h2{color:var(--am-white);}
.am-section--dark .am-section-head p{color:#b7c4d6;}
.am-sectors{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.am-sector{padding:26px 16px; text-align:center; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); transition:background .3s, transform .3s var(--am-ease);}
.am-sector:hover{background:rgba(255,255,255,.13); transform:translateY(-4px);}
.am-sector-glyph{display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0 auto 14px; border-radius:50%; background:rgba(255,255,255,.12); color:var(--am-yellow);}
.am-sector-glyph svg{width:22px; height:22px;}
.am-sector-name{display:block; font:600 13.5px/1.4 var(--am-font);}

/* ============ Inquiry ============ */
.am-inquiry-grid{display:grid; grid-template-columns:.9fr 1.1fr; overflow:hidden; border-radius:16px; box-shadow:0 30px 70px -30px rgba(3,30,69,.35);}
.am-inquiry-side{position:relative; overflow:hidden; padding:52px 44px; background:var(--am-blue); color:var(--am-white);}
.am-inquiry-side::after{content:""; position:absolute; bottom:-90px; inset-inline-end:-90px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(240,171,0,.25), transparent 70%);}
.am-inquiry-side > *{position:relative; z-index:1;}
.am-inquiry-side h3{font-size:25px; font-weight:800; margin-bottom:16px;}
.am-inquiry-side p{font-size:14.5px; line-height:1.8; color:#c7d3e2; margin-bottom:26px;}
.am-points li{display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; font-size:14px; color:#dbe4ef;}
.am-points li i{flex:none; width:22px; height:22px; margin-top:1px; border-radius:6px; background:var(--am-yellow);}

.am-inquiry-form{padding:52px 44px; background:var(--am-off);}
.am-field{margin-bottom:20px;}
.am-label{display:block; margin-bottom:8px; font:600 13px/1.3 var(--am-font); color:var(--am-ink);}
.am-req::after{content:" *"; color:var(--am-red);}
.am-input,.am-textarea{
  display:block; width:100%; padding:13px 15px;
  font:500 14.5px/1.3 var(--am-font); color:var(--am-ink);
  background:var(--am-white); border:1.5px solid var(--am-line); border-radius:8px;
  transition:border-color .25s, box-shadow .25s;
}
.am-textarea{resize:vertical; min-height:92px; line-height:1.6;}
.am-input::placeholder,.am-textarea::placeholder{color:#8a97a3;}
.am-input:focus,.am-textarea:focus{outline:none; border-color:var(--am-red); box-shadow:0 0 0 4px rgba(213,43,30,.12);}
.am-site.is-ar .am-input[dir="ltr"]{text-align:right;}
.am-hint{display:block; margin-top:6px; font-size:12px; color:var(--am-ink-soft);}

.am-status{display:flex; flex-wrap:wrap; gap:12px;}
.am-status-opt{position:relative; flex:1 1 180px; display:block; cursor:pointer;}
.am-status-opt input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;}
.am-status-box{
  display:block; padding:14px 16px; text-align:center;
  font:600 13.5px/1.4 var(--am-font); color:var(--am-ink-soft);
  background:var(--am-white); border:1.5px solid var(--am-line); border-radius:8px;
  transition:border-color .25s, color .25s, background .25s;
}
.am-status-opt input:checked + .am-status-box{border-color:var(--am-red); color:var(--am-red); background:#fdf1f0;}
.am-status-opt input:focus-visible + .am-status-box{outline:3px solid var(--am-yellow); outline-offset:2px;}

.am-submit{
  display:block; width:100%; margin-top:8px; padding:15px 22px; cursor:pointer;
  font:700 15px/1 var(--am-font); color:var(--am-white);
  background:var(--am-red); border:0; border-radius:8px;
  transition:background .25s, transform .25s var(--am-ease);
}
.am-submit:hover{background:var(--am-red-dark); transform:translateY(-2px);}
.am-note{margin-top:12px; text-align:center; font-size:12.5px; color:var(--am-ink-soft);}
.am-note--error{color:var(--am-red); font-weight:600;}

.am-thanks{text-align:center; padding:40px 10px;}
.am-thanks h3{font-size:21px; font-weight:800; color:var(--am-blue); margin-bottom:10px;}
.am-thanks p{font-size:14.5px; color:var(--am-ink-soft);}
.am-check{position:relative; width:64px; height:64px; margin:0 auto 20px; border-radius:50%; background:var(--am-red); animation:am-pop .5s var(--am-ease) both;}
.am-check::after{content:""; position:absolute; left:50%; top:46%; width:9px; height:18px; border-right:3px solid #fff; border-bottom:3px solid #fff; transform:translate(-50%,-50%) rotate(45deg);}
@keyframes am-pop{from{transform:scale(0);} to{transform:scale(1);}}

/* ============ Footer ============ */
.am-footer{padding-top:64px; background:var(--am-blue-deep); color:#b7c4d6; scroll-margin-top:96px;}
.am-footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:48px; padding-bottom:48px;}
.am-footer .am-logo-name{color:var(--am-white);}
.am-footer-brand p{max-width:320px; margin-top:16px; font-size:14px; line-height:1.75; color:#9fb0c5;}
.am-footer h4{margin-bottom:18px; font:700 14.5px/1 var(--am-font); color:var(--am-white);}
.am-footer li{display:flex; gap:10px; margin-bottom:13px; font-size:14px; color:#b7c4d6;}
.am-footer li b{color:var(--am-yellow); font-weight:600;}
.am-footer a:hover{color:var(--am-yellow);}
.am-footer-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-block:22px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; color:#7d90a8;}

/* ============ Simple inner pages ============ */
.am-page-hero{padding-block:56px 40px; background:var(--am-off); border-bottom:1px solid var(--am-line);}
.am-page-hero h1{font-size:30px; font-weight:800; color:var(--am-blue);}
.am-page-content{padding-block:56px; font-size:15.5px; line-height:1.9; color:var(--am-ink-soft);}
.am-page-content h2{color:var(--am-blue); font-size:22px; margin:28px 0 12px;}
.am-page-content a{color:var(--am-red); text-decoration:underline;}
.am-back{display:inline-block; margin-bottom:18px; font:600 13.5px/1 var(--am-font); color:var(--am-red);}

/* ============ Responsive ============ */
@media (min-width:981px){
  .am-mobile-nav{display:none !important;}
}
@media (max-width:980px){
  .am-nav{display:none;}
  .am-nav-toggle{display:flex;}
  .am-slide{min-height:560px;}
  .am-hero-title,.am-site.is-ar .am-hero-title{font-size:34px;}
  .am-about{grid-template-columns:1fr; gap:40px;}
  .am-solutions{grid-template-columns:1fr;}
  .am-sectors{grid-template-columns:repeat(2,1fr);}
  .am-inquiry-grid{grid-template-columns:1fr;}
  .am-footer-grid{grid-template-columns:1fr; gap:32px;}
}
@media (max-width:720px){
  .am-wrap{padding-inline:20px;}
  .am-hide-sm{display:none !important;}
  .am-section{padding-block:60px;}
  .am-nav-row{height:68px;}
  .am-nav-actions .am-btn{display:none;}
  .am-slide > .am-wrap{padding-block:56px 84px;}
  .am-inquiry-side,.am-inquiry-form{padding:32px 22px;}
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  .am-site *,.am-site *::before,.am-site *::after{animation:none !important; transition:none !important;}
  .am-js .am-reveal,.am-js .am-reveal-stagger > *{opacity:1; transform:none;}
  .am-hero-eyebrow,.am-hero-title,.am-hero-lead,.am-hero-cta{opacity:1; transform:none;}
}
