/* =====================================================================
   MF_Base_Portal / base.css  —  MuniForce shared portal layout
   ONE per org. Identical for every municipality. Do NOT edit per authority.
   Selectors: ONLY our own .mf-* classes (HTML Editor markup) + 1 isolated
   medium-risk block at the bottom (date flow). Zero .c* / .slds-* / .comm-*.
   Authority look = tokens in MF_Theme_<XX><code>/theme.css
   ===================================================================== */

/* ---- defaults (overridden by theme.css) ---- */
:root{
  --mf-font: "Heebo Variable","Heebo",Arial,sans-serif;
  --mf-primary: #1b5694;       /* title box  */
  --mf-primary-ink: #ffffff;
  --mf-accent: #f6c22b;        /* date box   */
  --mf-accent-ink: #1d2a3a;
  --mf-bar-bg: #ffffff;
  --mf-bar-line: #38a888;
  --mf-heading: #1b5694;
  --mf-text: #333333;
  --mf-page-bg: #ffffff;
  --mf-maxw: 1200px;
  --mf-bar-h: 90px;
  --mf-logo-w: 190px;
  --mf-hero-h: 200px;
}

.mf, .mf *{ box-sizing:border-box; }
.mf{ direction:rtl; text-align:right; font-family:var(--mf-font); color:var(--mf-text);
     background:var(--mf-page-bg); width:100%; }
.mf-wrap{ max-width:var(--mf-maxw); margin:0 auto; padding:0 16px; }

/* ---- 1. logo bar ---- */
.mf-bar{ background:var(--mf-bar-bg); border-bottom:4px solid var(--mf-bar-line);
         box-shadow:0 2px 6px rgba(0,0,0,.08); }
.mf-bar .mf-wrap{ height:var(--mf-bar-h); display:flex; align-items:center;
                  justify-content:flex-start; }            /* RTL: start = right */
.mf-bar__logo{ display:block; width:var(--mf-logo-w); height:calc(var(--mf-bar-h) - 20px);
               background-repeat:no-repeat; background-position:right center;
               background-size:contain; text-indent:-9999px; overflow:hidden; }
.mf-bar__logo:focus-visible{ outline:3px solid var(--mf-accent); outline-offset:4px; }

/* ---- 2. hero strip + title box ---- */
.mf-hero{ position:relative; height:var(--mf-hero-h); background-color:var(--mf-primary);
          background-size:cover; background-position:center; }
.mf-hero .mf-wrap{ height:100%; display:flex; flex-direction:column;
                   justify-content:flex-end; align-items:flex-start; }
.mf-hero__title{ margin:0; display:inline-block; background:var(--mf-primary);
                 color:var(--mf-primary-ink); font-size:34px; font-weight:700; line-height:1.2;
                 padding:12px 28px; }

/* ---- 3. date slot (under hero, aligned right) ---- */
.mf-date{ max-width:var(--mf-maxw); margin:0 auto; padding:0 16px; }

/* ---- 4. form heading ---- */
.mf-formhead{ max-width:var(--mf-maxw); margin:32px auto 8px; padding:0 16px; }
.mf-formhead__title{ margin:0; color:var(--mf-heading); font-size:28px; font-weight:700; }

/* ---- responsive ---- */
@media (max-width:768px){
  :root{ --mf-bar-h:70px; --mf-logo-w:140px; --mf-hero-h:140px; }
  .mf-hero__title{ font-size:24px; padding:8px 18px; }
  .mf-formhead__title{ font-size:22px; }
}

/* =====================================================================
   RESERVED: date-box styling (MF_Header_Date flow).
   Default = declarative (Display Text background highlight in Flow Builder),
   no CSS here. If an exact padded yellow box is required, ONE scoped rule is
   added here after inspecting the live DOM - marked RISK: MEDIUM.
   ===================================================================== */