@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@500;600;700;800&family=Public+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap");

/* ==================================================================
   mol.gov.vu  -  user.css  (Joomla 5.4 / Cassiopeia)
   Path: media/templates/site/cassiopeia_childcassiopeia/css/user.css
   (child template - Joomla updates never overwrite it)
   The ONLY stylesheet for MoLNR customisations. Do not also keep a copy
   in the Convert Forms Custom CSS box.

   1. Shared tokens, footer, footer contact band   (mock-up v4)
   2. Procurement & Careers pages                  (mock-up v4 patterns)
   3. Header and main menu                         (v4, live)
   4. Contact Us page                              (ported from the Contact mock-up, scoped to .molnr-contact)
   The @import above must stay on line 1. Delete it only if the fonts
   are loaded some other way.
   ================================================================== */

/* ================== 1 + 2. TOKENS, FOOTER, PROCUREMENT & CAREERS ================== */
:root{
  --m-primary:#1E5B3E; --m-dark:#123B2B; --m-palm:#214830; --m-accent:#B87A1E;
  --m-gold:#E9BD5A; --m-gold-tint:#F6EAD3; --m-accent-ink:#5A3B0E;
  --m-bg:#F5F0E1; --m-ink:#20241F; --m-muted:#5f665c; --m-rule:#E0DBCB; --m-radius:9px;
}

/* ---------- A. FOOTER (v4 section 10) ---------- */
.container-footer{background:var(--m-dark);background-image:none;color:#fff;margin-top:0}
.container-footer .grid-child{display:block;max-width:none;padding:0;margin:0}
.container-footer .back-to-top-link{background:var(--m-primary)}
.molnr-wrap{max-width:1320px;margin:0 auto;padding:0 24px}
.molnr-foot-band,.molnr-footer{font-family:"Public Sans",system-ui,Arial,sans-serif;line-height:1.55;color:#fff}
.molnr-foot-band :focus-visible,.molnr-footer :focus-visible{outline:3px solid var(--m-accent);outline-offset:2px}

/* contact band (.foot-contact) */
.molnr-foot-band{border-bottom:1px solid rgba(255,255,255,.16)}
.molnr-foot-band .molnr-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;padding:34px 24px}
@media(max-width:800px){.molnr-foot-band .molnr-wrap{grid-template-columns:1fr;gap:24px}}
.molnr-foot-band .fc-left{display:flex;align-items:center;gap:18px}
.molnr-foot-band .fc-crest{width:148px;height:148px;flex:none;background:#fff;border-radius:50%;padding:9px;object-fit:contain}
@media(max-width:480px){.molnr-foot-band .fc-crest{width:108px;height:108px;padding:7px}}
.molnr-foot-band h3{font-family:"Bitter",serif;font-size:18px;color:#fff;margin:0 0 4px;text-transform:none;letter-spacing:0}
.molnr-foot-band p{font-size:13px;color:#9FBFAD;line-height:1.5;margin:0}
.molnr-foot-band .fc-alt{margin-top:10px;font-size:12.5px;color:#9FBFAD}
.molnr-foot-band .fc-alt a{color:var(--m-gold);text-decoration:none}
.molnr-foot-band .fc-form h4{font-family:"Bitter",serif;font-size:16px;color:#fff;margin:0 0 12px}

/* link columns (.foot-grid) */
.molnr-footer .foot-grid{display:grid;grid-template-columns:1.3fr 1.3fr 1fr 1fr 1fr;gap:28px;padding:42px 0 26px;font-size:13.5px}
@media(max-width:1024px){.molnr-footer .foot-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:800px){.molnr-footer .foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.molnr-footer .foot-grid{grid-template-columns:1fr}}
.molnr-footer h3{font-family:"Public Sans",sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--m-gold);margin:0 0 11px}
.molnr-footer a{color:#fff;opacity:.85;text-decoration:none;display:block;padding:3px 0}
.molnr-footer a:hover{opacity:1;text-decoration:underline}
.molnr-footer p{opacity:.85;margin:0}
.molnr-footer .foot-base{border-top:1px solid rgba(255,255,255,.18);padding:15px 0 20px;font-size:12px;opacity:.8;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.molnr-footer .foot-legal a{display:inline;padding:0;margin:0 5px;opacity:.85}
.molnr-footer .foot-legal a:not(.mf-soon)~a:not(.mf-soon)::before{content:"|";display:inline-block;margin-right:10px;opacity:.85}

/* Links to pages not yet built: add class "mf-soon" to hide them.
   Remove the class once the page exists. A column with no live links
   hides itself; so does the legal row. */
.molnr-footer .mf-soon{display:none!important}
.molnr-footer .foot-col:not(:has(a:not(.mf-soon))){display:none}
.molnr-footer .foot-legal:not(:has(a:not(.mf-soon))){display:none}

/* Footer contact band: the short "Footer quick message" Convert Form, styled as v4 .fc-form.
   In Convert Forms, give the Message field and the Submit button the CSS class  fc-full
   (field settings > Advanced > CSS class) so they span both columns. */
.molnr-foot-band .convertforms,
.molnr-foot-band .convertforms .cf-form-wrap,
.molnr-foot-band .convertforms .cf-content-wrap{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;max-width:100%!important}
.molnr-foot-band .cf-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0!important}
.molnr-foot-band *,.molnr-foot-band *::before,.molnr-foot-band *::after{box-sizing:border-box}
.molnr-foot-band .cf-control-group{margin:0!important;padding:0!important;width:auto!important;max-width:none!important;min-width:0}
.molnr-foot-band .cf-control-group.fc-full{grid-column:1 / -1}
/* message box and send button always take a full row, whatever layout Convert Forms uses
   (no need for the fc-full class) */
.molnr-foot-band .cf-control-group:has(textarea),
.molnr-foot-band .cf-control-group:has(button[type=submit]),
.molnr-foot-band .cf-control-group:has(.cf-btn){grid-column:1 / -1;flex:0 0 100%!important;width:100%!important;max-width:100%!important}
.molnr-foot-band .convertforms textarea{width:100%!important}
@media(max-width:600px){.molnr-foot-band .cf-control-group{grid-column:1 / -1;flex:0 0 100%!important;width:100%!important;max-width:100%!important}}
@media(max-width:480px){.molnr-foot-band .cf-fields{grid-template-columns:1fr}}
.molnr-foot-band .convertforms label,
.molnr-foot-band .convertforms .cf-label{color:#9FBFAD!important;font:600 12.5px "Public Sans",sans-serif!important;margin:0 0 4px!important}
.molnr-foot-band .convertforms input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.molnr-foot-band .convertforms textarea{width:100%!important;border:1px solid rgba(255,255,255,.22)!important;background:rgba(255,255,255,.06)!important;color:#fff!important;border-radius:7px!important;padding:10px 12px!important;font:400 14px "Public Sans",sans-serif!important;box-shadow:none!important;min-height:0!important}
.molnr-foot-band .convertforms input::placeholder,
.molnr-foot-band .convertforms textarea::placeholder{color:#8FB0A0!important;opacity:1}
.molnr-foot-band .convertforms textarea{min-height:64px!important;resize:vertical}
.molnr-foot-band .convertforms .cf-btn,
.molnr-foot-band .convertforms button[type=submit]{background:#9E6716!important;color:#fff!important;border:0!important;border-radius:7px!important;padding:11px 22px!important;font:700 14px "Public Sans",sans-serif!important;width:auto!important;box-shadow:none!important;cursor:pointer}
.molnr-foot-band .convertforms .cf-btn:hover,
.molnr-foot-band .convertforms button[type=submit]:hover{filter:brightness(.88)}
.molnr-foot-band .cf-control-input-desc,
.molnr-foot-band .convertforms .cf-response,
.molnr-foot-band .convertforms .cf-footer,
.molnr-foot-band .convertforms .cf-footer p{color:#fff!important;opacity:.9}

/* ---------- B. PROCUREMENT & CAREERS PAGES (v4 patterns) ---------- */
.molnr-pc{font-family:"Public Sans",system-ui,Arial,sans-serif;color:var(--m-ink);line-height:1.55;font-size:16px}
.molnr-pc *{box-sizing:border-box}
.molnr-pc a{color:var(--m-primary)}
.molnr-pc :focus-visible{outline:3px solid var(--m-accent);outline-offset:2px}
.molnr-pc h2{font-family:"Bitter",serif;font-size:23px;font-weight:700;color:var(--m-dark);letter-spacing:-.01em;margin:0 0 14px}
.molnr-pc .section{padding-top:38px;padding-bottom:38px}
.molnr-pc .section + .section{padding-top:0}

/* page header - v4 hero band, no search */
.molnr-pc .pc-hero{background:var(--m-dark);color:#fff;padding:44px 0 48px;position:relative;overflow:hidden}
.molnr-pc .pc-hero::before{content:"";position:absolute;inset:0;opacity:.10;
  background-image:repeating-linear-gradient(45deg,transparent 0 15px,#fff 15px 16px,transparent 16px 32px),
                   repeating-linear-gradient(-45deg,transparent 0 15px,#fff 15px 16px,transparent 16px 32px)}
.molnr-pc .pc-hero .molnr-wrap{position:relative}
.molnr-pc .pc-hero h1{font-family:"Bitter",serif;font-size:clamp(27px,4vw,40px);font-weight:800;letter-spacing:-.015em;line-height:1.15;margin:0;color:#fff}
.molnr-pc .pc-hero p{margin:12px 0 0;opacity:.9;max-width:60ch;font-size:17px}
.molnr-pc .pc-hero .crumb{font-size:13px;margin:0 0 10px;opacity:.85}
.molnr-pc .pc-hero .crumb a{color:var(--m-gold);text-decoration:none}

/* docket cards (v4 .docket) */
.molnr-pc .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.molnr-pc .grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.molnr-pc .grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.molnr-pc .grid,.molnr-pc .grid-3{grid-template-columns:1fr}}
.molnr-pc .docket{--c:var(--m-primary);--ct:#E3EEE7;background:#fff;border:1px solid var(--m-rule);border-radius:var(--m-radius);display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.molnr-pc .docket:hover{box-shadow:0 8px 22px rgba(18,59,43,.12);transform:translateY(-2px)}
.molnr-pc .docket.c-green{--c:#1E5B3E;--ct:#E3EEE7}
.molnr-pc .docket.c-ochre{--c:#9E6716;--ct:#F6EAD3}   /* AA fix: #9E6716 behind white text */
.molnr-pc .docket.c-forest{--c:#123B2B;--ct:#DCE7E0}
.molnr-pc .docket-top{background:var(--c);color:#fff;padding:16px 20px;border-radius:8px 8px 0 0}
.molnr-pc .docket-top h3{font-family:"Bitter",serif;font-size:18px;font-weight:600;color:#fff;line-height:1.3;margin:0}
.molnr-pc .form-tag{font:600 11px "IBM Plex Mono",monospace;color:rgba(255,255,255,.82);letter-spacing:.03em;margin-top:5px;display:block}
.molnr-pc .docket-body{padding:16px 20px 4px;flex:1;font-size:14.5px}
.molnr-pc .docket-body p{margin:0 0 12px}
.molnr-pc .docket-body dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 12px;font-size:14px}
.molnr-pc .docket-body dt{color:var(--m-muted)}
.molnr-pc .docket-body dd{margin:0;font-weight:600}
.molnr-pc .docket-cta{display:flex;gap:8px;flex-wrap:wrap;padding:8px 20px 18px}
.molnr-pc .docket-cta a{font:600 13px "Public Sans",sans-serif;text-decoration:none;border-radius:7px;padding:8px 12px}
.molnr-pc .cta-apply{background:var(--c);color:#fff!important}
.molnr-pc .cta-apply:hover{filter:brightness(.9)}
.molnr-pc .cta-read{border:1.5px solid var(--m-rule);color:var(--c)!important}
.molnr-pc .cta-read:hover{border-color:var(--c)}

/* pill tabs (v4 .tabs/.tab) - CSS only, no script */
.molnr-pc .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 20px}
.molnr-pc .tab{border:1.5px solid var(--m-rule);background:#fff;border-radius:99px;padding:8px 16px;font:600 13.5px "Public Sans",sans-serif;color:var(--m-muted);cursor:pointer;margin:0}
.molnr-pc .pc-radio{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.molnr-pc .pc-tabset:has(.pc-radio) .pc-panel{display:none}
.molnr-pc .pc-tabset:has(.pc-radio) .pc-panel-title{position:absolute;left:-9999px}
.molnr-pc .pc-tabset:not(:has(.pc-radio)) .tabs{display:none}
.molnr-pc #ts1:checked~.p1,.molnr-pc #ts2:checked~.p2,.molnr-pc #ts3:checked~.p3,.molnr-pc #ts4:checked~.p4,
.molnr-pc #vs1:checked~.p1,.molnr-pc #vs2:checked~.p2,.molnr-pc #vs3:checked~.p3{display:block}
.molnr-pc #ts1:checked~.tabs [for=ts1],.molnr-pc #ts2:checked~.tabs [for=ts2],.molnr-pc #ts3:checked~.tabs [for=ts3],.molnr-pc #ts4:checked~.tabs [for=ts4],
.molnr-pc #vs1:checked~.tabs [for=vs1],.molnr-pc #vs2:checked~.tabs [for=vs2],.molnr-pc #vs3:checked~.tabs [for=vs3]{background:var(--m-primary);border-color:var(--m-primary);color:#fff}
.molnr-pc #ts1:focus-visible~.tabs [for=ts1],.molnr-pc #ts2:focus-visible~.tabs [for=ts2],.molnr-pc #ts3:focus-visible~.tabs [for=ts3],.molnr-pc #ts4:focus-visible~.tabs [for=ts4],
.molnr-pc #vs1:focus-visible~.tabs [for=vs1],.molnr-pc #vs2:focus-visible~.tabs [for=vs2],.molnr-pc #vs3:focus-visible~.tabs [for=vs3]{outline:3px solid var(--m-accent);outline-offset:2px}

/* table in a v4 .card */
.molnr-pc .card{background:#fff;border:1px solid var(--m-rule);border-radius:var(--m-radius);padding:6px 20px}
.molnr-pc .pc-scroll{overflow-x:auto}
.molnr-pc table{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.molnr-pc th{text-align:left;font:700 12px "Public Sans",sans-serif;color:var(--m-muted);padding:12px 10px;border-bottom:2px solid var(--m-rule)}
.molnr-pc td{padding:13px 10px;border-bottom:1px solid var(--m-rule);vertical-align:top}
.molnr-pc tbody tr:last-child td{border-bottom:0}
.molnr-pc td.ref{font:600 12.5px "IBM Plex Mono",monospace;white-space:nowrap}
.molnr-pc td small{display:block;color:var(--m-muted);font-size:12.5px;margin-top:2px}
.molnr-pc .empty{padding:18px 0;color:var(--m-muted);font-size:14.5px;margin:0}

/* type labels (v4 .notice .kind) */
.molnr-pc .kind{display:inline-block;font:800 10.5px "Public Sans",sans-serif;letter-spacing:.05em;color:#fff;background:#9E6716;border-radius:3px;padding:2px 7px;text-transform:uppercase;white-space:nowrap}
.molnr-pc .kind.tender{background:var(--m-primary)}
.molnr-pc .kind.reoi{background:var(--m-dark)}
.molnr-pc .kind.vac{background:var(--m-palm)}

/* dropdown deep links: #spn #rfq #reoi filter the tender table */
.molnr-pc .pc-anchor{display:block;position:relative;top:-120px}
.molnr-pc .pc-filter{display:none;background:var(--m-gold-tint);border:1px solid #E5CD9C;color:var(--m-accent-ink);font-size:13.5px;border-radius:8px;padding:10px 14px;margin:0 0 16px}
.molnr-pc:has(#spn:target) .f-spn,.molnr-pc:has(#rfq:target) .f-rfq,.molnr-pc:has(#reoi:target) .f-reoi{display:block}
.molnr-pc:has(#spn:target) tbody tr:not(.t-spn),
.molnr-pc:has(#rfq:target) tbody tr:not(.t-rfq),
.molnr-pc:has(#reoi:target) tbody tr:not(.t-reoi){display:none}

/* note strip (v4 .note-strip) and link list (v4 .keycol) */
.molnr-pc .note-strip{background:var(--m-gold-tint);border:1px solid #E5CD9C;color:#7A5510;font-size:13.5px;border-radius:8px;padding:11px 15px;margin:18px 0 0}
.molnr-pc .body-copy{max-width:72ch;font-size:15.5px}
.molnr-pc .body-copy p{margin:0 0 12px}

/* Homepage section: Procurement & Careers (module "Home – Procurement & Careers") */
.molnr-home-pc{background:var(--m-bg);width:100vw;margin-left:calc(50% - 50vw);padding:44px 0 48px}
.molnr-home-pc .hpc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;margin:0 0 22px}
.molnr-home-pc .hpc-head h2{margin:0 0 6px}
.molnr-home-pc .hpc-head p{margin:0;color:var(--m-muted);font-size:15.5px;max-width:62ch}
.molnr-home-pc .hpc-all{font-weight:700;font-size:14.5px;text-decoration:none;border:1.5px solid var(--m-primary);border-radius:8px;padding:9px 16px;white-space:nowrap}
.molnr-home-pc .hpc-all:hover{background:var(--m-primary);color:#fff!important}
.molnr-home-pc .hpc-block{display:block;margin:0 0 28px}
.molnr-home-pc .hpc-block:last-child{margin-bottom:0}
.molnr-home-pc .hpc-block h3{font:700 11.5px "Public Sans",sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#9E6716;margin:0 0 10px}
.molnr-home-pc .hpc-more{margin:10px 0 0;font-size:14px}
.molnr-home-pc .hpc-more a{font-weight:700;text-decoration:none}
.molnr-home-pc .hpc-more a:hover{text-decoration:underline}
.molnr-home-pc .hpc-block .grid-3 + .grid-3{margin-top:20px}

/* Single tender / vacancy page (layout: html/com_content/article/default.php) */
.molnr-detail .pd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 0;font-size:14.5px}
.molnr-detail .pd-meta .kind{font-size:11px;padding:3px 8px;background:var(--m-gold)!important;color:#123B2B!important}
.molnr-detail .pd-status{font-weight:700;border-radius:99px;padding:3px 11px;font-size:13px;background:#fff;color:var(--m-dark)}
.molnr-detail .pd-status.is-open{background:#DDEFE3;color:#123B2B}
.molnr-detail .pd-status.is-eval{background:var(--m-gold-tint);color:var(--m-accent-ink)}
.molnr-detail .pd-status.is-done,.molnr-detail .pd-status.is-closed{background:rgba(255,255,255,.18);color:#fff}
.molnr-detail .pd-close{opacity:.92}
.molnr-detail .pd-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:32px;align-items:start}
@media(max-width:860px){.molnr-detail .pd-grid{grid-template-columns:1fr}.molnr-detail .pd-facts{order:-1}}
.molnr-detail .pd-main .body-copy{max-width:none}
.molnr-detail .pd-back{margin:24px 0 0;font-size:14.5px}
.molnr-detail .pd-back a{font-weight:600;text-decoration:none}
.molnr-detail .pd-back a:hover{text-decoration:underline}
.molnr-detail .pd-facts{background:#fff;border:1px solid var(--m-rule);border-top:4px solid #9E6716;border-radius:var(--m-radius);padding:20px 22px;box-shadow:0 3px 12px rgba(18,59,43,.08);position:sticky;top:130px}
.molnr-detail .pd-facts h2{font-size:17px;margin:0 0 12px}
.molnr-detail .pd-facts dl{margin:0 0 16px}
.molnr-detail .pd-facts dt{font:700 10.5px "Public Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9E6716;margin:12px 0 3px}
.molnr-detail .pd-facts dt:first-child{margin-top:0}
.molnr-detail .pd-facts dd{margin:0;font-size:15px;font-weight:600;color:var(--m-ink)}
.molnr-detail .pd-facts dd.ref{font:600 13.5px "IBM Plex Mono",monospace}
.molnr-detail .pd-facts dd small{font-weight:400;color:var(--m-muted)}
.molnr-detail .pd-btn{display:block;text-align:center;background:var(--m-primary);color:#fff!important;font-weight:700;font-size:14.5px;text-decoration:none;border-radius:8px;padding:12px 16px}
.molnr-detail .pd-btn:hover{background:var(--m-dark)}
@media(max-width:860px){.molnr-detail .pd-facts{position:static}}

/* Empty-state messages hide themselves once a module lists items */
.molnr-pc .pc-panel:has(table) .pc-empty,
.molnr-pc .pc-panel:has(.docket) .pc-empty{display:none}
.molnr-pc .pc-panel .grid + .pc-empty,
.molnr-pc .pc-panel .card + .pc-empty{margin-top:0}

/* Page header full width - same technique as the Contact Us page header */
body:has(.molnr-pc){overflow-x:clip}
.molnr-pc .pc-hero{width:100vw;margin-left:calc(50% - 50vw)}

/* ================== 3. HEADER - v4 (white, logo beside the menu) ================== */
/* v4: white header, 3px Lands Green line under it, logo left (88px tall),
   menu in Lands Green (MoLNR choice; v4 used ink), ochre line under the hovered/current item.
   Colours are set broadly (any link in the header) so no menu can end up
   white-on-white, whatever markup a page uses. */
.container-header{background:#fff;background-image:none;color:var(--m-ink);border-bottom:3px solid var(--m-primary);box-shadow:none}
.container-header a,
.container-header .mod-menu,
.container-header .mod-menu__heading,
.container-header .mm-toggler,
.container-header .navbar-toggler{color:var(--m-primary)!important}   /* menu text in Lands Green (v4 used ink) */

/* logo (Template Style > Advanced > Brand: Yes, Logo: molnr-logo-header.webp) */
.container-header .navbar-brand{margin:0;padding:12px 0}
.container-header .brand-logo img{height:88px;width:auto;max-width:100%;display:block}
.container-header .site-description{display:none}

/* top-level menu items - written for ANY menu markup in the header
   ("li:not(li li)" = a menu item that is not inside another item) */
.container-header li:not(li li) > a,
.container-header li:not(li li) > .mod-menu__heading{font:800 14.5px "Public Sans",system-ui,Arial,sans-serif!important;padding:8px 12px!important;border-bottom:3px solid transparent!important;text-decoration:none!important;display:inline-block}
.container-header li:not(li li) > a:hover,
.container-header li:not(li li) > a:focus-visible,
.container-header li:not(li li) > a.active,
.container-header li:not(li li) > a[aria-current="page"],
.container-header li.active:not(li li) > a,
.container-header li.current:not(li li) > a{border-bottom-color:var(--m-accent)!important;color:var(--m-dark)!important;text-decoration:none!important}
/* switch off Cassiopeia's own thin hover line so only the ochre one shows */
.container-header .metismenu > li > a::after,
.container-header .metismenu > li > a::before,
.container-header .metismenu > li > button::before{content:none!important;display:none!important}
.container-header .mm-collapse a:hover{text-decoration:none!important}

/* dropdowns (v4 .dropdown) */
.container-header .metismenu .mm-collapse{background:#fff;border:1px solid var(--m-rule);border-top:3px solid var(--m-primary);border-radius:0 0 10px 10px;box-shadow:0 10px 26px rgba(18,59,43,.16);padding:6px}
.container-header .metismenu .mm-collapse a{display:block;font:500 14px "Public Sans",system-ui,Arial,sans-serif;padding:9px 12px;border-radius:6px;text-decoration:none}
.container-header .metismenu .mm-collapse a:hover{background:var(--m-gold-tint);color:var(--m-dark)!important}

/* phone menu button (v4 .nav-toggle) */
.container-header .navbar-toggler{background:#fff;border:1px solid var(--m-rule);border-radius:8px;padding:8px 13px;min-height:44px}

/* desktop: logo and menu on one line, like v4 */
@media (min-width:1366px){
  .container-header{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:6px max(clamp(16px, 2.5vw, 48px), calc((100% - 1320px) / 2 + 24px))}
  .container-header > .grid-child{grid-column:auto;margin:0;padding:0;width:auto;max-width:none}
  .container-header > .container-nav{flex:1;display:flex;justify-content:center;align-items:center}
}
/* desktop menu spacing: one line, even gaps (Cassiopeia's own item spacing removed) */
@media (min-width:1366px){
  .container-header .metismenu,
  .container-header .mod-menu{display:flex;list-style:none;align-items:center;flex-wrap:wrap!important;justify-content:flex-end;gap:0 2px;margin:0;padding:0}
  .container-header .metismenu > li,
  .container-header .mod-menu > li{margin:0!important;padding:0!important}
  .container-header li:not(li li) > a,
  .container-header li:not(li li) > .mod-menu__heading{font-size:13.5px!important;padding:8px 10px!important;white-space:nowrap;letter-spacing:.01em}
  .container-header > .container-nav{justify-content:flex-end!important}
  /* keep logo and menu on the same line */
  .container-header{flex-wrap:nowrap!important}
  .container-header > .grid-child:not(.container-nav){flex:0 0 auto}
  .container-header > .container-nav{flex:1 1 auto!important;min-width:0}
  .container-header .container-nav .navbar,
  .container-header .container-nav nav{padding:0!important;margin:0!important}
}
@media (min-width:1366px){
  .container-header .brand-logo img{height:76px}
  .container-header li:not(li li) > a,
  .container-header li:not(li li) > .mod-menu__heading{font-size:13px!important;padding:8px 7px!important}
}

/* up to 1365px: always use the menu button (the live menu is "navbar-expand-md",
   which would otherwise show the full menu from 768px up) */
@media (max-width:1365.98px){
  .container-header .navbar .navbar-collapse:not(.show){display:none!important}
  .container-header .navbar .navbar-collapse.show{display:block!important}
  .container-header .navbar .navbar-toggler{display:inline-flex!important}
}
/* desktop: the menu strip itself has no background */
@media (min-width:1366px){.container-header .navbar-collapse{background:transparent!important}}

/* phones, tablets and small laptops: logo left, menu button right, menu drops down below the header.
   Needs the Menu module's Layout set to "Collapsible Dropdown" (it supplies the button). */
@media (max-width:1365.98px){
  .container-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:12px;padding:6px 16px;position:relative}
  .container-header > .grid-child{grid-column:auto;margin:0;padding:0;width:auto;max-width:none}
  .container-header .navbar-brand{padding:6px 0}
  .container-header .brand-logo img{height:56px}
  .container-header .navbar-toggler{display:inline-flex;align-items:center;justify-content:center;min-width:44px;cursor:pointer}
  /* the menu's own wrappers must not be the anchor, or the panel opens narrow at the side */
  .container-header .container-nav,
  .container-header .navbar,
  .container-header nav{position:static!important}
  .container-header .navbar-collapse{position:absolute!important;left:0!important;right:0!important;top:100%;width:auto!important;max-width:none!important;background:#fff!important;border-bottom:3px solid var(--m-primary);box-shadow:0 12px 24px rgba(18,59,43,.14);padding:6px 16px 12px;z-index:1000}
  .container-header .navbar-collapse ul,
  .container-header .navbar-collapse li{background:transparent!important}
  .container-header .navbar-collapse .mod-menu,
  .container-header .navbar-collapse .metismenu{display:block;margin:0;padding:0}
  .container-header .navbar-collapse li{display:block;width:100%}
  .container-header li:not(li li) > a,
  .container-header li:not(li li) > .mod-menu__heading{display:block!important;padding:13px 4px!important;border-bottom:1px solid var(--m-rule)!important}
  .container-header li:not(li li) > a:hover,
  .container-header li:not(li li) > a:focus-visible,
  .container-header li.active:not(li li) > a,
  .container-header li.current:not(li li) > a{border-bottom-color:var(--m-rule)!important;box-shadow:inset 4px 0 0 var(--m-accent);padding-left:14px!important;background:var(--m-gold-tint)}
  .container-header .metismenu .mm-collapse{position:static;box-shadow:none;border:0;border-left:3px solid var(--m-primary);border-radius:0;margin:0 0 6px 8px;padding:0}
}

/* ================== 3b. FAKE-WEBSITE WARNING (#globalModal) ================== */
/* The red warning box is injected at the end of the page with inline styles
   (floating top-right, over the menu). These rules move it to a slim bar ABOVE
   the header, in normal page flow, so it pushes the page down instead of
   covering it. Its own close (X) still works and the page closes up. */
body:has(#globalModal){display:flex;flex-direction:column;min-height:100vh}
body:has(#globalModal) > *{flex-shrink:0}
#globalModal{order:-1;position:static!important;top:auto!important;left:auto!important;width:100%;z-index:auto!important}
#globalModal > div{position:relative!important;top:auto!important;right:auto!important;max-width:none!important;width:100%!important;border-radius:0!important;margin:0!important;box-shadow:none!important;padding:8px 48px 8px 16px!important;font:500 13.5px/1.45 "Public Sans",system-ui,Arial,sans-serif!important;text-align:center!important;background:#B91C1C!important;color:#fff!important}
#globalModal > div br{display:none}
@media (max-width:600px){#globalModal > div{font-size:12.5px!important;text-align:left!important}}

/* ================== 4. CONTACT US (.molnr-contact) ================== */
.molnr-contact {
  --primary:#1E5B3E;   /* Lands Green */
  --dark:#123B2B;      /* Deep Forest */
  --accent:#9E6716;    /* Ochre AA */
  --gold:#E9BD5A;      /* Banner Gold – on dark only */
  --ink:#20241F;
  --muted:#5f665c;
  --rule:#E0DBCB;
  --surface:#ffffff;
  --radius:9px;
  --head:"Bitter", Georgia, "Times New Roman", serif;
  --body:"Public Sans", system-ui, "Segoe UI", Arial, sans-serif;
  font-family:var(--body); color:var(--ink); line-height:1.55; font-size:16px;
  max-width:1320px; margin:0 auto; padding:24px clamp(16px, 3vw, 40px) 0;
}
.molnr-contact *, .molnr-contact *::before, .molnr-contact *::after { box-sizing:border-box; }
.molnr-contact a { color:var(--primary); }
.molnr-contact h2 { font-family:var(--head); font-size:23px; font-weight:700; color:var(--dark); letter-spacing:-.01em; margin:0 0 14px; }

/* Page header */
.molnr-contact .phead { background:var(--dark); color:#fff; padding:40px 32px 44px; border-radius:var(--radius); position:relative; overflow:hidden; }
.molnr-contact .phead::before { content:""; position:absolute; inset:0; opacity:.10; pointer-events:none;
  background-image:repeating-linear-gradient(45deg,transparent 0 15px,#fff 15px 16px,transparent 16px 32px),
                   repeating-linear-gradient(-45deg,transparent 0 15px,#fff 15px 16px,transparent 16px 32px); }
.molnr-contact .phead > * { position:relative; }
.molnr-contact .phead .eyebrow { font:700 12px var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.molnr-contact .phead h1 { font-family:var(--head); font-size:clamp(25px,3.4vw,36px); font-weight:800; letter-spacing:-.015em; line-height:1.18; max-width:26ch; color:#fff; margin:0 0 10px; }
.molnr-contact .phead p { max-width:64ch; opacity:.88; margin:0; }

.molnr-contact .cwrap { padding:34px 0 46px; }
.molnr-contact .cblock { margin-bottom:38px; }
.molnr-contact .cblock:last-child { margin-bottom:0; }
.molnr-contact .deck { font-size:15px; color:var(--muted); margin:-4px 0 16px; max-width:80ch; }

/* Head office panel */
.molnr-contact .office { display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch; border-radius:var(--radius); overflow:hidden; border:1px solid var(--rule); border-top:4px solid var(--accent); }
.molnr-contact .office-in { background:var(--surface); padding:22px; }
.molnr-contact .office-map { background:var(--dark); padding:18px; }
.molnr-contact .office h3 { font-family:var(--head); font-size:17px; color:var(--dark); margin:0 0 14px; }
.molnr-contact .dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:15px; margin:0; }
.molnr-contact .dl dt { font:700 10.5px var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); padding-top:5px; white-space:nowrap; }
.molnr-contact .dl dd { margin:0; color:var(--ink); }
.molnr-contact .dl dd a { font-weight:600; text-decoration:none; }
.molnr-contact .map-ph { height:100%; min-height:210px; border-radius:var(--radius); color:#fff;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 1px,transparent 1px 34px),
             repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 34px);
  border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:13px; opacity:.85; }

/* Cards */
.molnr-contact .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.molnr-contact .ccard { background:var(--surface); border:1px solid var(--rule); border-top:4px solid var(--accent); border-radius:var(--radius); padding:18px 18px 14px; box-shadow:0 3px 12px rgba(18,59,43,.09); }
.molnr-contact .ccard b, .molnr-contact .ccard strong { display:block; font-family:var(--head); font-size:16px; color:var(--dark); margin-bottom:3px; line-height:1.3; }
.molnr-contact .ccard .role { font-size:13.5px; color:var(--muted); margin-bottom:11px; }
.molnr-contact .ccard .line { font-size:14px; margin-bottom:2px; }
.molnr-contact .ccard .line a { display:inline-block; padding:6px 0; color:var(--primary); text-decoration:none; font-weight:600; }
.molnr-contact .ccard .k { font:700 10.5px var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-right:6px; }
.molnr-contact a:hover, .molnr-contact a:focus-visible { text-decoration:underline; }
.molnr-contact :focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

.molnr-contact .fb-cta { display:inline-flex; align-items:center; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:12px 18px; color:var(--dark); font-weight:700; font-size:14.5px; min-height:48px; }

/* Message panel – the Convert Form sits inside it */
.molnr-contact .cform-panel { background:var(--dark); border-radius:var(--radius); padding:26px 24px; }
.molnr-contact .cform-panel h2 { color:#fff; margin-bottom:6px; }
.molnr-contact .cform-panel .intro { color:#fff; font-size:14px; margin:0 0 18px; max-width:64ch; }

/* Section headings centred; card text stays left-aligned for easy reading */
.molnr-contact .cblock > h2,
.molnr-contact .cblock > .deck { text-align:center; margin-left:auto; margin-right:auto; }
.molnr-contact .phead { text-align:center; }
.molnr-contact .phead h1,
.molnr-contact .phead p { margin-left:auto; margin-right:auto; }
.molnr-contact .fb-wrap { text-align:center; }

/* Message panel: centred, narrower, heading in Banner Gold */
.molnr-contact .cform-panel { max-width:none; margin:0; padding:34px clamp(20px, 5vw, 64px); }
.molnr-contact .cform-panel .intro { max-width:70ch; }
.molnr-contact .cform-panel h2 { color:#fff; }
.molnr-contact .cform-panel h2,
.molnr-contact .cform-panel .intro { text-align:center; margin-left:auto; margin-right:auto; }
.molnr-contact .cform-panel .convertforms { max-width:100%; margin:0 auto; padding-left:0; padding-right:0; }

/* Form help text in white */
.molnr-contact .cform-panel .cf-control-input-desc,
.molnr-contact .cform-panel .cf-control-group .cf-desc,
.molnr-contact .cform-panel .convertforms small,
.molnr-contact .cform-panel .convertforms .form-text,
.molnr-contact .cform-panel .convertforms .cf-footer,
.molnr-contact .cform-panel .convertforms .cf-footer p { color:#fff !important; opacity:.9; }

/* Form labels in white */
.molnr-contact .cform-panel .convertforms label,
.molnr-contact .cform-panel .convertforms .cf-label { color:#fff !important; }

/* Page header: full width with a photo */
body:has(.molnr-contact) { overflow-x:clip; }   /* stops a sideways scrollbar */
.molnr-contact .phead {
  width:100vw; margin-left:calc(50% - 50vw); margin-top:-24px;
  border-radius:0; padding:72px 24px 78px;
  background:
    linear-gradient(rgba(18,59,43,.78), rgba(18,59,43,.78)),
    url("/images/contact/contact-hero.webp") center / cover no-repeat,
    var(--dark);
}
.molnr-contact .phead::before { display:none; }   /* no crosshatch over the photo */

/* Head office photo in place of the map */
.molnr-contact .office-map:has(.office-photo) { padding:0; }
.molnr-contact .office-photo { display:block; width:100%; height:100%; min-height:240px; object-fit:cover; }

/* Social buttons with icons */
.molnr-contact .fb-wrap { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.molnr-contact a.fb-cta { gap:10px; text-decoration:none; color:var(--dark); transition:box-shadow .15s; }
.molnr-contact a.fb-cta:hover, .molnr-contact a.fb-cta:focus-visible { box-shadow:0 4px 14px rgba(18,59,43,.14); text-decoration:none; }
.molnr-contact a.fb-cta::before { content:""; width:22px; height:22px; flex:none; background:center / contain no-repeat; }
.molnr-contact a.soc-fb::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231877F2' d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E"); }
.molnr-contact a.soc-li::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230A66C2' d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E"); }

/* Tablet */
@media (max-width:900px) { .molnr-contact .cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) {
  .molnr-contact .office { grid-template-columns:1fr; }
  .molnr-contact .map-ph { min-height:160px; }
}
/* Phone */
@media (max-width:560px) {
  .molnr-contact { font-size:15px; }
  .molnr-contact h2 { font-size:20px; }
  .molnr-contact .phead { padding:44px 18px 48px; }
  .molnr-contact .cwrap { padding:26px 0 36px; }
  .molnr-contact .cblock { margin-bottom:30px; }
  .molnr-contact .cards { grid-template-columns:1fr; }
  .molnr-contact .office-in { padding:18px; }
  .molnr-contact .dl { grid-template-columns:1fr; gap:2px; }
  .molnr-contact .dl dt { padding-top:10px; }
  .molnr-contact .cform-panel { padding:24px 16px; }
  .molnr-contact .fb-wrap { flex-direction:column; } .molnr-contact .fb-cta { width:100%; justify-content:center; }
}