/* 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); }

/* ---- Bootstrap palette re-point (challenges tooling on the event host) ----
   The challenges/ templates are GM-authored and shared: the same files render
   at globalmoroccans.com/challenges/ and at moroccothon.com/challenges/. They
   lean on Bootstrap's stock palette, so "Key Information" on a challenge detail
   page and the "Innovation Challenges" banner came out #0d6efd blue — right off
   the Moroccothon green-and-gold.

   Fixed here rather than in those templates on purpose: editing them would drag
   the GM site's own styling along with it. This stylesheet is only ever loaded
   by moroccothon/base.html, so the re-point is scoped to the event host by
   construction. Everything below resolves to a :root token, never a literal hex,
   so the brand stays defined in exactly one place. */
/* Bootstrap's own theme variables come first: pagination links, progress bars,
   .form-check-input:checked and the .form-control:focus ring all resolve through
   these rather than through any utility class, so without them the challenges
   pagination and the judging progress bar stayed blue while the banners went
   green — which is the inconsistency this block exists to remove. --m-accent is
   #006233; the -rgb form has no var() equivalent because Bootstrap composes it
   into rgba(), so it is the one place the channel values are repeated. */
:root {
  --bs-primary: var(--m-accent);
  --bs-primary-rgb: 0, 98, 51;
  --bs-link-color: var(--m-accent);
  --bs-link-color-rgb: 0, 98, 51;
  --bs-link-hover-color: var(--m-accent-d);
  --bs-link-hover-color-rgb: 0, 77, 40;
}

.bg-primary { background-color: var(--m-accent) !important; }
.text-primary { color: var(--m-accent) !important; }
.border-primary { border-color: var(--m-accent) !important; }
.bg-success { background-color: var(--m-accent-d) !important; }
.text-success { color: var(--m-accent-d) !important; }
.bg-info { background-color: var(--m-gold) !important; color: var(--m-ink) !important; }
.text-info { color: var(--m-gold-d) !important; }

/* Bootstrap 5 buttons resolve every colour through --bs-btn-* custom properties,
   so re-pointing those is what actually takes effect — setting background-color
   directly would only win by source order, and lose the moment the load order
   changes or a more specific Bootstrap state rule applies. */
.btn-primary {
  --bs-btn-bg: var(--m-accent); --bs-btn-border-color: var(--m-accent);
  --bs-btn-hover-bg: var(--m-accent-d); --bs-btn-hover-border-color: var(--m-accent-d);
  --bs-btn-active-bg: var(--m-accent-d); --bs-btn-active-border-color: var(--m-accent-d);
  --bs-btn-disabled-bg: var(--m-accent); --bs-btn-disabled-border-color: var(--m-accent);
  --bs-btn-color: var(--m-oncream); --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--m-accent); --bs-btn-border-color: var(--m-accent);
  --bs-btn-hover-bg: var(--m-accent); --bs-btn-hover-border-color: var(--m-accent);
  --bs-btn-active-bg: var(--m-accent-d); --bs-btn-active-border-color: var(--m-accent-d);
  --bs-btn-hover-color: var(--m-oncream); --bs-btn-active-color: #fff;
}
.btn-success {
  --bs-btn-bg: var(--m-accent-d); --bs-btn-border-color: var(--m-accent-d);
  --bs-btn-hover-bg: var(--m-accent); --bs-btn-hover-border-color: var(--m-accent);
  --bs-btn-active-bg: var(--m-accent); --bs-btn-active-border-color: var(--m-accent);
  --bs-btn-color: var(--m-oncream); --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-info {
  --bs-btn-bg: var(--m-gold); --bs-btn-border-color: var(--m-gold);
  --bs-btn-hover-bg: var(--m-gold-d); --bs-btn-hover-border-color: var(--m-gold-d);
  --bs-btn-active-bg: var(--m-gold-d); --bs-btn-active-border-color: var(--m-gold-d);
  --bs-btn-color: var(--m-ink); --bs-btn-hover-color: var(--m-ink); --bs-btn-active-color: var(--m-ink);
}

/* Card headers carry the banner colour on those pages. A plain header (no
   bg-* utility) gets the soft brand band rather than Bootstrap's grey. */
.card-header { background-color: var(--m-bg2); border-bottom: 1px solid var(--m-bg2); }
.card-header.bg-primary, .card-header.bg-success { color: var(--m-oncream) !important; }
.card-header.bg-primary h1, .card-header.bg-primary h2, .card-header.bg-primary h3,
.card-header.bg-primary h4, .card-header.bg-primary h5, .card-header.bg-primary h6,
.card-header.bg-success h1, .card-header.bg-success h2, .card-header.bg-success h3,
.card-header.bg-success h4, .card-header.bg-success h5, .card-header.bg-success h6 {
  color: var(--m-oncream);
}

/* The GM banner block (dz-bnr-inr) heads the challenge list and detail pages.
   Its heading inherits the serif+green rule above, which is invisible on a
   green ground — pin it to the light-on-dark pairing instead. */
.dz-bnr-inr.bg-primary { background-color: var(--m-accent) !important; }
.dz-bnr-inr.bg-primary h1, .dz-bnr-inr.bg-primary h2, .dz-bnr-inr.bg-primary h3,
.dz-bnr-inr.bg-primary .breadcrumb-item, .dz-bnr-inr.bg-primary a { color: var(--m-oncream); }

/* Terms page: the copy is a run of short headed clauses, so the headings need
   to sit closer to their paragraph than the default rhythm allows. */
.m-terms h2 { font-size: 1.15rem; margin-top: 1.5rem; margin-bottom: .35rem; }
.m-terms h2:first-child { margin-top: 0; }
.m-terms p { margin-bottom: 0; }

/* Component-level theme variables Bootstrap does NOT derive from --bs-primary:
   each of these is a per-component custom property with its own blue default. */
.pagination {
  --bs-pagination-color: var(--m-accent);
  --bs-pagination-hover-color: var(--m-accent-d);
  --bs-pagination-focus-color: var(--m-accent-d);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(0, 98, 51, .25);
  --bs-pagination-active-bg: var(--m-accent);
  --bs-pagination-active-border-color: var(--m-accent);
}
.progress { --bs-progress-bar-bg: var(--m-accent); }
.form-check-input:checked { background-color: var(--m-accent); border-color: var(--m-accent); }
.form-check-input:focus { border-color: var(--m-accent); box-shadow: 0 0 0 .25rem rgba(0, 98, 51, .25); }
.form-control:focus, .form-select:focus {
  border-color: var(--m-accent); box-shadow: 0 0 0 .25rem rgba(0, 98, 51, .25);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--m-accent); }
.list-group { --bs-list-group-active-bg: var(--m-accent); --bs-list-group-active-border-color: var(--m-accent); }