/*
Theme Name: Monkie Factorie
Theme URI: https://monkiefactorie.com
Author: Monkie Factorie
Description: Design system and site shell for Monkie Factorie — a graphic design studio in Dubai. Built to be edited with Elementor: the theme supplies the palette, typography, header, footer and interactive components; page content is built in Elementor using the mf- utility classes documented in README.txt.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.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: monkie-factorie
Tags: full-width-template, custom-logo, custom-menu, translation-ready
*/

/* ==========================================================================
   1. TOKENS — change the brand here and it changes everywhere
   ========================================================================== */
:root{
  --mf-ink:#0C0C0C;
  --mf-ink-2:#161615;
  --mf-paper:#F2EFE7;
  --mf-orange:#F2941F;
  --mf-petrol:#0E3B40;
  --mf-smoke:#8C877C;
  --mf-body-dim:#B8B3A8;

  --mf-display:"Big Shoulders Display","Haettenschweiler","Arial Narrow",sans-serif;
  --mf-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mf-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --mf-serif:"Bodoni Moda",Didot,"Times New Roman",serif;

  --mf-pad:clamp(20px,5vw,72px);
  --mf-max:1320px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;width:100%;overflow-x:hidden;
  background:var(--mf-ink);color:var(--mf-paper);
  font-family:var(--mf-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--mf-orange);outline-offset:3px}
.mf-skip{position:absolute;left:-9999px}
.mf-skip:focus{left:12px;top:12px;z-index:999;background:var(--mf-orange);color:var(--mf-ink);padding:10px 14px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

/* ==========================================================================
   3. UTILITIES — paste these into Elementor's Advanced > CSS Classes field
   ========================================================================== */
.mf-wrap{max-width:var(--mf-max);margin-left:auto;margin-right:auto;
  padding-left:var(--mf-pad);padding-right:var(--mf-pad)}
.mf-section{padding-top:clamp(64px,8vw,118px);padding-bottom:clamp(64px,8vw,118px)}
.mf-mono{font-family:var(--mf-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.mf-orange-text{color:var(--mf-orange)}
.mf-bg-petrol{background:var(--mf-petrol)}
.mf-bg-orange{background:var(--mf-orange);color:var(--mf-ink)}
.mf-bg-paper{background:var(--mf-paper);color:var(--mf-ink)}
.mf-dim{color:var(--mf-body-dim)}
.mf-measure{max-width:56ch}

.mf-display{font-family:var(--mf-display);font-weight:800;text-transform:uppercase;
  line-height:.92;letter-spacing:.01em;overflow-wrap:break-word}
.mf-display--xl{font-family:var(--mf-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(54px,8.2vw,120px);line-height:.86;letter-spacing:-.005em;overflow-wrap:break-word}
.mf-display--lg{font-size:clamp(34px,4.6vw,62px)}
.mf-display--huge{font-family:var(--mf-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(54px,10.5vw,152px);line-height:.82;overflow-wrap:break-word}
.mf-quote{font-family:var(--mf-serif);font-style:italic;
  font-size:clamp(27px,3.6vw,46px);line-height:1.15;margin:0 0 22px}

.mf-btn{display:inline-block;font-family:var(--mf-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;background:var(--mf-orange);color:var(--mf-ink);
  text-decoration:none;padding:12px 18px;font-weight:500;transition:transform .15s}
.mf-btn:hover{transform:translateY(-1px)}

.mf-eyebrow{font-family:var(--mf-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mf-orange);margin:0 0 22px}
.mf-head{display:flex;align-items:baseline;gap:18px;margin-bottom:44px;flex-wrap:wrap}
.mf-head .mf-mono{color:var(--mf-orange);flex:none}
.mf-head h2{font-family:var(--mf-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,4.6vw,62px);line-height:.92;margin:0;letter-spacing:.01em}

/* ==========================================================================
   4. HEADER / FOOTER
   ========================================================================== */
.mf-header{position:sticky;top:0;left:0;width:100%;z-index:600;
  background:rgba(12,12,12,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(242,239,231,.14)}
.mf-header__in{display:flex;align-items:center;gap:20px;min-height:78px}
.mf-brand{display:flex;align-items:center;margin-right:auto;text-decoration:none;flex:none}
.mf-brand img,.mf-brand .custom-logo{height:52px;width:auto}
.mf-nav{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0}
.mf-nav a{font-family:var(--mf-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--mf-smoke);transition:color .2s}
.mf-nav a:hover,.mf-nav .current-menu-item>a{color:var(--mf-paper)}
.mf-header .mf-btn{padding:10px 15px;flex:none}
@media(max-width:900px){.mf-nav{display:none}}
@media(max-width:520px){.mf-header__in{gap:12px}.mf-brand img,.mf-brand .custom-logo{height:44px}.mf-header .mf-btn{padding:10px 11px}}

.mf-lang{display:flex;border:1px solid rgba(242,239,231,.28);flex:none}
.mf-lang a,.mf-lang button{font-family:var(--mf-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;background:none;border:0;color:var(--mf-smoke);
  padding:7px 10px;cursor:pointer;text-decoration:none;transition:.18s}
.mf-lang [aria-pressed="true"],.mf-lang .is-active{background:var(--mf-paper);color:var(--mf-ink)}

.mf-footer{border-top:1px solid rgba(242,239,231,.16)}
.mf-footer__in{padding:40px 0;display:flex;flex-wrap:wrap;gap:18px 30px;
  align-items:center;color:var(--mf-smoke)}
.mf-footer__in img{height:64px;width:auto;margin-right:auto}
.mf-footer a{text-decoration:none}
.mf-footer a:hover{color:var(--mf-paper)}

/* ==========================================================================
   5. COMPONENTS (shortcodes)
   ========================================================================== */
/* --- 5a. Specimen: drag-to-compare  [mf_specimen] --- */
.mf-card{background:var(--mf-paper);padding:16px 16px 13px;box-shadow:0 30px 70px rgba(0,0,0,.5);margin:0}
.mf-spec{position:relative;aspect-ratio:1;overflow:hidden;background:#fff;
  touch-action:none;cursor:ew-resize;user-select:none}
.mf-spec__layer{position:absolute;inset:0}
.mf-spec__layer img{width:100%;height:100%;object-fit:contain}
.mf-spec__yr{position:absolute;bottom:11px;font-family:var(--mf-mono);font-size:10.5px;
  letter-spacing:.18em;color:var(--mf-ink);background:rgba(255,255,255,.82);padding:3px 7px}
.mf-spec__yr--l{left:11px}
.mf-spec__yr--r{right:11px}
.mf-spec__handle{position:absolute;top:0;bottom:0;width:2px;background:var(--mf-orange);
  left:56%;pointer-events:none}
.mf-spec__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;background:var(--mf-orange);
  display:grid;place-items:center;color:var(--mf-ink);box-shadow:0 3px 14px rgba(0,0,0,.35)}
.mf-card__cap{display:flex;justify-content:space-between;gap:12px;margin-top:11px;color:#5E5A51}
.mf-card__cap b{color:var(--mf-ink);font-weight:500}

/* --- 5b. Marquee  [mf_marquee] --- */
.mf-strip{background:var(--mf-orange);color:var(--mf-ink);overflow:hidden;
  padding:12px 0;max-width:100%}
.mf-strip__track{display:flex;gap:34px;width:max-content;animation:mf-run 26s linear infinite}
.mf-strip__track span{font-family:var(--mf-display);font-weight:800;font-size:23px;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.mf-strip__track span::after{content:"\273B";margin-left:34px;opacity:.6}
@keyframes mf-run{to{transform:translateX(-50%)}}

/* --- 5c. Service rows  (build in Elementor, or use .mf-row markup) --- */
.mf-rows{border-top:1px solid rgba(242,239,231,.16)}
.mf-row{display:grid;grid-template-columns:74px 1.15fr 1.5fr;gap:24px;align-items:center;
  padding:26px 12px;border-bottom:1px solid rgba(242,239,231,.16);
  transition:background .25s,padding-left .25s}
.mf-row:hover{background:var(--mf-ink-2);padding-left:22px}
.mf-row__code{color:var(--mf-orange)}
.mf-row h3{font-family:var(--mf-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(27px,3.3vw,44px);line-height:1;margin:0}
.mf-row p{margin:0;color:#A9A499;font-size:15.5px;line-height:1.55}
@media(max-width:760px){.mf-row{grid-template-columns:1fr;gap:9px;padding:22px 0}
  .mf-row:hover{padding-left:0}}

/* --- 5d. Job tickets --- */
.mf-tickets{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px}
.mf-ticket{background:rgba(242,239,231,.055);border:1px solid rgba(242,239,231,.2);
  display:block;overflow:hidden}
.mf-ticket--link{text-decoration:none;transition:transform .25s,border-color .25s}
.mf-ticket--link:hover{transform:translateY(-3px);border-color:var(--mf-orange)}
.mf-ticket--link:hover .mf-ticket__title{color:var(--mf-orange)}
.mf-ticket--link .mf-ticket__plate img{transition:transform .5s}
.mf-ticket--link:hover .mf-ticket__plate img{transform:scale(1.04)}
.mf-ticket__title{font-family:var(--mf-display);font-weight:700;text-transform:uppercase;
  font-size:24px;line-height:1;margin:0 0 12px;color:var(--mf-paper);transition:color .2s}
.mf-ticket__top{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 16px;border-bottom:1px solid rgba(242,239,231,.2)}
.mf-ticket__no{font-family:var(--mf-display);font-weight:800;font-size:19px;
  color:var(--mf-orange);letter-spacing:.05em}
.mf-ticket__plate{aspect-ratio:4/3;display:grid;place-items:center;padding:14px;text-align:center;
  background:repeating-linear-gradient(45deg,rgba(242,239,231,.05) 0 9px,transparent 9px 18px);
  border-bottom:1px solid rgba(242,239,231,.2);overflow:hidden}
.mf-ticket__plate img{width:100%;height:100%;object-fit:cover}
.mf-ticket__plate .mf-mono{color:rgba(242,239,231,.5)}
.mf-ticket__body{padding:15px 16px 18px}
.mf-ticket__body dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.mf-ticket__body dt{font-family:var(--mf-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(242,239,231,.5)}
.mf-ticket__body dd{margin:0;font-size:14.5px;color:var(--mf-paper)}

/* --- 5e. Facts list --- */
.mf-facts{border-top:1px solid rgba(242,239,231,.16)}
.mf-fact{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid rgba(242,239,231,.16)}
.mf-fact b{font-family:var(--mf-display);font-weight:700;font-size:22px;
  letter-spacing:.03em;text-align:right}

/* --- 5f. Layout helpers --- */
.mf-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
.mf-split--hero{grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(30px,5vw,68px)}
@media(max-width:900px){.mf-split--hero{grid-template-columns:1fr}
  .mf-split--hero .mf-card{order:-1;max-width:440px}}
@media(max-width:820px){.mf-split{grid-template-columns:1fr}}
.mf-inline{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:30px;color:var(--mf-smoke)}
.mf-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;
  margin-top:44px;border-top:1px solid rgba(12,12,12,.28);padding-top:26px}
.mf-details a,.mf-details .mf-val{display:block;font-size:19px;text-decoration:none;font-weight:500}
.mf-details a:hover{text-decoration:underline}
.mf-details .mf-mono{margin-bottom:7px;color:rgba(12,12,12,.65)}

/* ==========================================================================
   6. WORDPRESS CONTENT DEFAULTS (for non-Elementor pages and posts)
   ========================================================================== */
.mf-content h1,.mf-content h2,.mf-content h3{font-family:var(--mf-display);
  text-transform:uppercase;line-height:.95;font-weight:800}
.mf-content h1{font-size:clamp(38px,6vw,74px)}
.mf-content h2{font-size:clamp(30px,4vw,52px)}
.mf-content h3{font-size:clamp(24px,3vw,36px)}
.mf-content p,.mf-content li{color:var(--mf-body-dim);max-width:68ch}
.mf-content a{color:var(--mf-orange)}
.mf-content blockquote{border-left:2px solid var(--mf-orange);margin:0;padding-left:22px}
.mf-content img{margin:24px 0}

/* ==========================================================================
   7. MOTION
   ========================================================================== */
.mf-rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.mf-rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mf-strip__track{animation:none}
  .mf-rv{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}