/*
Theme Name: Ahlan Darija
Theme URI: https://ahlandarija.com
Author: MOBT Global
Description: Custom theme for Ahlan Darija, a Moroccan Darija tutoring marketplace administered by MOBT Global. On activation, creates real, editable WordPress pages for Home, How It Works, Become a Tutor, Terms of Use, Privacy Policy, Student Dashboard, and Tutor Dashboard — each one open it and edit like any other WordPress page. The nav, footer, and all modals stay shared/global across every page.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ahlan-darija
*/

/* ==========================================================================
   Design system ported directly from the original prototype. Layout utility
   classes (grid, flex, spacing) come from Tailwind's CDN script (enqueued in
   functions.php); this file holds the custom tokens and components on top.
   ========================================================================== */

  /* ===== MOBT Global brand palette ===== */
  :root{
    --cream:#F2E7D3;
    --cream-deep:#E9D9BC;
    --ink:#2B2320;
    --terracotta:#DB504A;       /* MOBT Tertiary */
    --terracotta-deep:#B93F3A;
    --teal:#0C6480;             /* lighter tint of MOBT Secondary, for hover states */
    --teal-deep:#084C61;        /* MOBT Secondary */
    --gold:#E3B505;             /* MOBT Primary */
    --white:#FFFDF8;
  }

  * { font-family: 'Inter', sans-serif; }
  .font-display { font-family: 'Amiri', serif; }
  .font-mono { font-family: 'IBM Plex Mono', monospace; }
  body { background-color: var(--cream); color: var(--ink); }

  .zellige-bg {
    background-color: var(--teal-deep);
    background-image:
      radial-gradient(circle at 50% 50%, rgba(227,181,5,0.18) 0, rgba(227,181,5,0.18) 2px, transparent 2.5px),
      repeating-linear-gradient(45deg, rgba(242,231,211,0.05) 0 1px, transparent 1px 32px),
      repeating-linear-gradient(-45deg, rgba(242,231,211,0.05) 0 1px, transparent 1px 32px);
    background-size: 32px 32px, 32px 32px, 32px 32px;
  }
  .paper-grain { background-image: radial-gradient(rgba(43,35,32,0.035) 1px, transparent 1px); background-size: 14px 14px; }
  .star-mark { color: var(--gold); }

  .card-tile { border: 1px solid rgba(43,35,32,0.08); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .card-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -12px rgba(8,76,97,0.28); border-color: rgba(219,80,74,0.35); }

  .btn-terracotta { background: var(--terracotta); color: var(--white); transition: background .2s ease, transform .15s ease; }
  .btn-terracotta:hover { background: var(--terracotta-deep); transform: translateY(-1px); }
  .btn-terracotta:disabled { opacity:.5; cursor:not-allowed; transform:none; }
  .btn-teal { background: var(--teal-deep); color: var(--white); transition: background .2s ease, transform .15s ease; }
  .btn-teal:hover { background: var(--teal); transform: translateY(-1px); }
  .btn-outline { border: 1.5px solid var(--teal-deep); color: var(--teal-deep); transition: all .2s ease; background: transparent; }
  .btn-outline:hover { background: var(--teal-deep); color: var(--white); }
  .btn-google { border: 1.5px solid rgba(43,35,32,0.15); color: var(--ink); background: var(--white); transition: background .2s ease; }
  .btn-google:hover { background: var(--cream); }

  .modal-backdrop { background: rgba(8,76,97,0.55); backdrop-filter: blur(3px); }
  .modal-panel { animation: riseIn .28s cubic-bezier(.2,.8,.2,1); }
  @keyframes riseIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
  .fade-in { animation: fadeIn .4s ease; }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }
  .star-spinner { width: 56px; height: 56px; animation: spin 1.1s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .tea-pour-wrap { width: 140px; height: 120px; position: relative; margin: 0 auto; }
  .tea-stream { position: absolute; top: 10px; left: 66px; width: 3px; height: 0px; background: linear-gradient(var(--gold), #8FA33E); border-radius: 2px; animation: pourStream 1.1s ease-in-out forwards; }
  @keyframes pourStream { 0% { height: 0; } 60% { height: 46px; } 100% { height: 46px; } }
  .tea-glass { position: absolute; bottom: 0; left: 40px; width: 60px; height: 46px; border: 3px solid var(--teal-deep); border-top: none; border-radius: 0 0 10px 10px; background: rgba(255,253,248,0.4); overflow: hidden; }
  .tea-fill { position: absolute; bottom: 0; left: 0; right: 0; height: 0%; background: linear-gradient(var(--gold), #8FA33E); animation: fillGlass 1.1s ease-in-out forwards; animation-delay: .25s; }
  @keyframes fillGlass { 0%{height:0%} 100%{height:78%} }
  .steam { position:absolute; top:-14px; opacity:0; animation: steamRise 1.8s ease-in-out .9s infinite; }
  .steam.s1{ left: 46px; } .steam.s2{ left: 60px; animation-delay:1.1s;} .steam.s3{ left: 74px; animation-delay:1.3s;}
  @keyframes steamRise { 0%{ opacity:0; transform: translateY(0) translateX(0);} 30%{ opacity:.55; } 100%{ opacity:0; transform: translateY(-22px) translateX(4px);} }

  .hidden-scroll::-webkit-scrollbar{ display:none; }
  .price-cap-track { background: rgba(8,76,97,0.12); }
  .price-cap-fill { background: var(--terracotta); }
  .nav-link { position: relative; }
  .nav-link::after { content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0%; background: var(--terracotta); transition: width .2s ease; }
  .nav-link:hover::after { width:100%; }
  input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 3px rgba(219,80,74,0.25); border-color: var(--terracotta); }

  .timeline { position:relative; padding-left:3rem; }
  .timeline::before { content:''; position:absolute; left:15px; top:6px; bottom:6px; width:2px; background: rgba(8,76,97,0.15); }
  .timeline-item { position:relative; margin-bottom:1.75rem; }
  .timeline-item:last-child { margin-bottom:0; }
  .timeline-num { position:absolute; left:-3rem; top:0; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; font-family:'IBM Plex Mono',monospace; }

  details.faq summary { cursor:pointer; list-style:none; }
  details.faq summary::-webkit-details-marker { display:none; }
  details.faq[open] .faq-chevron { transform: rotate(180deg); }
  .faq-chevron { transition: transform .2s ease; }
  input[type="range"] { accent-color: var(--terracotta); }
  .step-progress-fill { background: var(--terracotta); transition: width .3s ease; }
  .badge-pill { display:inline-flex; align-items:center; gap:.35rem; font-size:11px; font-weight:600; padding:.3rem .65rem; border-radius:999px; }

  .tab-btn { flex:1; padding:.5rem; border-radius:.5rem; font-weight:600; font-size:13px; border:none; background:transparent; cursor:pointer; color:var(--ink); }
  .tab-btn.active { background:var(--white); color:var(--terracotta); box-shadow:0 1px 3px rgba(0,0,0,0.08); }

  .meet-btn { background:#1a73e8; color:#fff; padding:.4rem .8rem; border-radius:.5rem; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:.35rem; text-decoration:none; }
  .meet-btn:hover { background:#1558b0; }

  .dash-shell { display:flex; gap:1.5rem; align-items:flex-start; }
  .dash-sidebar { width:230px; flex-shrink:0; background:var(--white); border:1px solid rgba(43,35,32,0.08); border-radius:14px; padding:.6rem; position:sticky; top:88px; }
  .dash-sidebar-item { padding:.7rem .85rem; border-radius:.5rem; font-size:14px; font-weight:500; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
  .dash-sidebar-item:hover { background:rgba(43,35,32,0.04); }
  .dash-sidebar-item.active { background:var(--cream); color:var(--terracotta-deep); font-weight:700; }
  .dash-main { flex:1; min-width:0; }

  .msg-bubble { max-width:75%; padding:.5rem .8rem; border-radius:.75rem; font-size:14px; line-height:1.4; }
  .msg-mine { align-self:flex-end; background:var(--terracotta); color:#fff; }
  .msg-theirs { align-self:flex-start; background:var(--cream); }
  .msg-thread { display:flex; flex-direction:column; gap:.5rem; max-height:340px; overflow-y:auto; padding:.25rem; }

  .avail-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem; font-size:11px; }
  .avail-day-label { text-align:center; font-weight:700; color:var(--teal-deep); margin-bottom:.2rem; }
  .avail-cell { border-radius:.4rem; padding:.35rem .2rem; text-align:center; cursor:pointer; user-select:none; border:1px solid rgba(43,35,32,0.1); background:var(--white); }
  .avail-cell.on { background:var(--teal-deep); color:#fff; border-color:var(--teal-deep); }
  .avail-cell.readonly { cursor:default; }
  .avail-cell.readonly.on { background:rgba(8,76,97,0.15); color:var(--teal-deep); border-color:rgba(8,76,97,0.3); }
  .avail-cell.readonly:not(.on) { opacity:.35; }

  .star-picker-star { cursor:pointer; color:rgba(43,35,32,0.2); }
  .star-picker-star.on { color:var(--gold); }

  .badge-chip-pick { display:flex; align-items:center; gap:.4rem; padding:.5rem .6rem; border-radius:.6rem; font-size:12px; font-weight:600; border:1.5px solid rgba(43,35,32,0.12); cursor:pointer; background:var(--white); transition:all .15s ease; }
  .badge-chip-pick.on { border-color:var(--terracotta); background:rgba(219,80,74,0.08); }
  .badge-earned { display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border-radius:.7rem; font-size:13px; font-weight:600; }
  .badge-earned .count { font-family:'IBM Plex Mono',monospace; font-weight:700; opacity:.7; }

  .page-btn { width:34px; height:34px; border-radius:.5rem; font-size:13px; font-weight:600; border:1px solid rgba(43,35,32,0.12); background:var(--white); cursor:pointer; }
  .page-btn.active { background:var(--terracotta); color:#fff; border-color:var(--terracotta); }
  .page-btn:disabled { opacity:.35; cursor:not-allowed; }

  .legal-view h2 { font-family:'Amiri',serif; font-size:1.75rem; color:var(--teal-deep); margin-top:2rem; margin-bottom:.5rem; }
  .legal-view h2:first-child { margin-top:0; }
  .legal-view p, .legal-view li { color:rgba(43,35,32,0.75); line-height:1.7; font-size:14.5px; }
  .legal-view ul { list-style:disc; padding-left:1.25rem; margin-bottom:1rem; }

  /* ==========================================================================
     Defensive Font Awesome fix. Icons showing as small empty boxes (□) means
     the browser can't find the icon glyph — almost always a font-family/
     font-weight conflict with another stylesheet's reset rules, not a missing
     icon. These rules re-assert Font Awesome's own font application with
     !important so nothing else on the page can silently override it.
     ========================================================================== */
  .fa-solid, .fas { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
  .fa-regular, .far { font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; }
  .fa-brands, .fab { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }
  .fa-solid, .fa-regular, .fa-brands, .fas, .far, .fab {
    font-style: normal !important;
    display: inline-block !important;
    line-height: 1 !important;
  }