/* Moroccothon web skin — deck identity ported to web.
   Locked 2026-07-12: Moroccan-green accent + gold + green-mist bg + ink footer,
   "one bold moment" layout (60-30-10). Georgia headers, gold corner brackets,
   gold-dot section titles, left-gold-strip cards, ink footer. */

:root {
  /* semantic tokens (prefer these in new markup) */
  --m-accent:  #006233;   /* Moroccan flag green */
  --m-accent-d:#004D28;
  --m-bg:      #F4F8F5;    /* green mist */
  --m-bg2:     #E8F1EB;    /* alternating section band */
  --m-gold:    #C9A961;
  --m-gold-d:  #A8863F;
  --m-ink:     #1F1F1F;
  --m-muted:   #6B6B6B;
  --m-oncream: #FAF6F0;    /* light text on dark panels */

  /* legacy aliases — existing templates use var(--m-red)/var(--m-cream); keep
     them pointing at the new palette so no per-template color edits are needed */
  --m-red:   var(--m-accent);
  --m-red-d: var(--m-accent-d);
  --m-cream: var(--m-bg);
  --m-cream2:var(--m-bg2);
}

body {
  background: var(--m-bg);
  color: var(--m-ink);
  font-family: Calibri, 'Segoe UI', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, .m-serif {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: var(--m-accent);
}
a { color: var(--m-accent); }
a:hover { color: var(--m-accent-d); }

/* ---- Zellige tile (subtle gold geometry for dark panels) ---- */
.m-zellige {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><g fill='none' stroke='%23C9A961' stroke-opacity='0.16' stroke-width='1'><rect x='15' y='15' width='30' height='30'/><rect x='15' y='15' width='30' height='30' transform='rotate(45 30 30)'/></g></svg>");
  background-size: 60px 60px;
}

/* ---- Navbar (light, low surface area) ---- */
.m-nav { background: var(--m-bg); border-bottom:1px solid var(--m-bg2); }
.m-nav .navbar-brand { display:flex; align-items:center; gap:.6rem; }
.m-nav .navbar-brand img { height: 30px; }
.m-nav .m-brand-word { color: var(--m-accent); font-family: Georgia, serif; font-weight:800; letter-spacing:2px; font-size:1.15rem; }
.m-nav .nav-link { color: var(--m-ink) !important; font-weight:600; }
.m-nav .nav-link:hover, .m-nav .nav-link:focus { color: var(--m-accent) !important; }
.m-nav .dropdown-menu { background:#fff; border:1px solid var(--m-bg2); }
.m-nav .dropdown-item { color: var(--m-ink); }
.m-nav .dropdown-item:hover { background: var(--m-bg); color: var(--m-accent); }
.m-nav .navbar-toggler { border-color: var(--m-accent); }
.m-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='%23006233' stroke-width='2.4' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

/* ---- Buttons ---- */
.m-btn { display:inline-block; font-weight:700; border-radius:4px; padding:.55rem 1.25rem; text-decoration:none; border:2px solid transparent; transition:.15s; }
.m-btn-gold { background: var(--m-gold); color: var(--m-ink); }
.m-btn-gold:hover { background: var(--m-gold-d); color: var(--m-ink); }
.m-btn-accent, .m-btn-red { background: var(--m-accent); color: var(--m-oncream); }
.m-btn-accent:hover, .m-btn-red:hover { background: var(--m-accent-d); color:#fff; }
.m-btn-ghost { background:transparent; color: var(--m-accent); border:2px solid var(--m-accent); }
.m-btn-ghost:hover { background: var(--m-accent); color: var(--m-oncream); }
.m-btn-ghost-light { background: transparent; color: var(--m-oncream); border:2px solid var(--m-gold); }
.m-btn-ghost-light:hover { background: var(--m-gold); color: var(--m-ink); }

/* ---- Gold corner brackets (put on dark panels) ---- */
.m-brackets { position: relative; }
.m-brackets::before, .m-brackets::after { content:""; position:absolute; width:34px; height:34px; pointer-events:none; }
.m-brackets::before { top:16px; left:16px; border-top:2px solid var(--m-gold); border-left:2px solid var(--m-gold); }
.m-brackets::after  { bottom:16px; right:16px; border-bottom:2px solid var(--m-gold); border-right:2px solid var(--m-gold); }

/* ---- Hero (light) ---- */
.m-hero { background: var(--m-bg); color: var(--m-ink); }
.m-hero .m-eyebrow { color: var(--m-accent); letter-spacing:3px; text-transform:uppercase; font-size:.8rem; font-weight:700; }
.m-hero h1 { color: var(--m-ink); font-size: clamp(2.2rem, 5vw, 3.6rem); line-height:1.05; }
.m-hero h1 .hl { color: var(--m-accent); }
.m-hero .m-tagline { color: var(--m-muted); font-size:1.2rem; max-width:640px; }
.m-hero .m-datechip { display:inline-block; background:#fff; border:1px solid var(--m-bg2); color: var(--m-ink); border-radius:30px; padding:.3rem .9rem; font-weight:600; font-size:.95rem; }
.m-hero .m-datechip i { color: var(--m-accent); }
.m-countdown { display:inline-flex; gap:1rem; flex-wrap:wrap; }
.m-countdown .m-unit { background:#fff; border:1px solid var(--m-bg2); border-radius:8px; padding:.5rem .9rem; text-align:center; min-width:78px; }
.m-countdown .m-num { font-family:Georgia,serif; font-size:1.8rem; font-weight:800; color: var(--m-accent); line-height:1; }
.m-countdown .m-lab { font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color: var(--m-muted); }

/* ---- Section titles (gold dot, never an underline) ---- */
.m-section-title { display:inline-block; }
.m-section-title::after { content:""; display:block; width:12px; height:12px; border-radius:50%; background: var(--m-gold); margin-top:.5rem; }

/* ---- Cards (white, left gold strip) ---- */
.m-card { background:#fff; border-radius:6px; box-shadow:0 2px 14px rgba(31,31,31,.07); border-left:5px solid var(--m-gold); padding:1.15rem 1.25rem; height:100%; transition:.15s; }
.m-card:hover { transform: translateY(-3px); box-shadow:0 8px 22px rgba(31,31,31,.12); }
.m-card h5 { color: var(--m-ink); margin-bottom:.15rem; }

/* ---- Forms (white panel, gold left strip — matches .m-card identity) ---- */
.m-form { background:#fff; border-radius:6px; box-shadow:0 2px 14px rgba(31,31,31,.07); border-left:5px solid var(--m-gold); padding:1.6rem 1.7rem; }
.m-form .form-label { font-weight:600; color: var(--m-ink); margin-bottom:.35rem; }
.m-form input:not([type=checkbox]):not([type=radio]):not([type=file]),
.m-form select,
.m-form textarea {
  width:100%; padding:.6rem .8rem; font-size:1rem; line-height:1.4;
  color: var(--m-ink); background:#fff;
  border:1.5px solid var(--m-bg2); border-radius:4px;
  transition: border-color .15s, box-shadow .15s;
}
.m-form input:focus, .m-form select:focus, .m-form textarea:focus {
  outline:none; border-color: var(--m-accent); box-shadow:0 0 0 3px rgba(0,98,51,.15);
}
.m-form input::placeholder, .m-form textarea::placeholder { color: var(--m-muted); }
.m-form textarea { resize:vertical; min-height:3rem; }
.m-form select {
  appearance:none; -webkit-appearance:none; padding-right:2.2rem; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23006233' stroke-width='2' d='M4 6l4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:1rem;
}
.m-form input[type=file] { width:100%; padding:.55rem .7rem; border:1.5px dashed var(--m-bg2); border-radius:4px; background: var(--m-bg); cursor:pointer; }
.m-form input[type=checkbox], .m-form input[type=radio] { width:1.15rem; height:1.15rem; accent-color: var(--m-accent); vertical-align:middle; margin-right:.45rem; }
.m-form .form-text { color: var(--m-muted); font-size:.85rem; margin-top:.3rem; }
.m-form .errorlist { list-style:none; padding:0; margin:.35rem 0 0; color:#b3261e; font-size:.85rem; }
.m-kicker { font-size:.72rem; text-transform:uppercase; letter-spacing:1.5px; color: var(--m-accent); font-weight:700; }
.m-badge-soft { display:inline-block; background: var(--m-bg2); color: var(--m-accent-d); border-radius:20px; padding:.12rem .6rem; font-size:.75rem; font-weight:700; }
.m-badge-accent, .m-badge-red { background: var(--m-accent); color:#fff; }
.m-badge-ink { background: var(--m-ink); color:#fff; }

/* ---- Numbered step badges ---- */
.m-step-num { flex:0 0 52px; width:52px; height:52px; border-radius:50%; background: var(--m-gold); color: var(--m-ink); font-family:Georgia,serif; font-weight:800; font-size:1.4rem; display:flex; align-items:center; justify-content:center; }

/* ---- Sponsor logos ---- */
.m-sponsor-logo { background:#fff; border-radius:6px; height:96px; display:flex; align-items:center; justify-content:center; padding:.75rem; box-shadow:0 2px 10px rgba(31,31,31,.06); }
.m-sponsor-logo img { max-height:60px; max-width:100%; object-fit:contain; }

/* ---- Compact CTA strip (the one bold accent moment) ---- */
.m-ctaband { background: var(--m-accent); color: var(--m-oncream); }
.m-ctaband .m-eyebrow { color: var(--m-gold); letter-spacing:3px; text-transform:uppercase; font-size:.78rem; font-weight:700; }
.m-ctaband h2 { color: var(--m-oncream); }

/* ---- Footer (ink) ---- */
.m-footer { background: var(--m-ink); color: rgba(250,246,240,.8); }
.m-footer img { height:34px; }
.m-footer a { color: var(--m-gold); text-decoration:none; }
.m-footer a:hover { color:#fff; }
.m-footer .m-shukran { font-family:Georgia,serif; font-style:italic; color: var(--m-gold); }

/* alternating band helper */
.m-band { background: var(--m-bg2); }