/*
Theme Name: Somalia Consulate DRC
Theme URI: https://somaliaconsulatedrc.com
Author: Honorary Consulate of the Federal Republic of Somalia in the DRC
Author URI: https://somaliaconsulatedrc.com
Description: Bilingual (English / French) diplomatic theme for the Honorary Consulate of the Federal Republic of Somalia in the Democratic Republic of the Congo. Clean, official one-page design with an EN/FR language toggle. Contact details and the Consul's name are editable from the Customizer (Appearance > Customize > Consulate Settings).
Version: 1.0.0
Requires at least: 5.5
Tested up to: 6.5
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: somalia-consulate-drc
Tags: one-page, multilingual, translation-ready, custom-logo, custom-menu, government, business
*/

:root{
    --navy:#0E2148;
    --navy-deep:#0A1733;
    --navy-soft:#16315f;
    --gold:#C49A3F;
    --gold-bright:#E3C766;
    --gold-deep:#9c7a2c;
    --paper:#F6F2E9;
    --ivory:#FCFAF4;
    --flag:#4189DD;
    --ink:#1d2230;
    --muted:#6b6456;
    --line:rgba(196,154,63,.32);
    --shadow:0 18px 50px -22px rgba(14,33,72,.45);
    --maxw:1140px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Source Sans 3',system-ui,sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:'Marcellus',serif;font-weight:400;line-height:1.18;letter-spacing:.01em}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

  /* ---------- signature divider: rule — star — rule (from the plaque) ---------- */
  .rsr{display:flex;align-items:center;justify-content:center;gap:18px;margin:26px 0}
  .rsr .bar{height:1.5px;flex:0 1 90px;background:linear-gradient(90deg,transparent,var(--gold))}
  .rsr .bar.r{background:linear-gradient(90deg,var(--gold),transparent)}
  .rsr .star{color:var(--gold);font-size:15px;line-height:1}
  .rsr.light .bar{background:linear-gradient(90deg,transparent,var(--gold-bright))}
  .rsr.light .bar.r{background:linear-gradient(90deg,var(--gold-bright),transparent)}
  .rsr.light .star{color:var(--gold-bright)}
  .rsr.lead{justify-content:flex-start;margin:18px 0 22px}
  .rsr.lead .bar{flex:0 0 38px}

  .eyebrow{font-family:'Marcellus SC',serif;letter-spacing:.22em;text-transform:uppercase;
    font-size:13px;color:var(--gold-deep)}

  /* ---------- top bar ---------- */
  header{position:sticky;top:0;z-index:50;background:var(--navy);
    border-bottom:2px solid var(--gold);box-shadow:0 6px 24px -14px rgba(0,0,0,.6)}
  .topstrip{height:4px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright),var(--gold-deep))}
  .bar{display:flex;align-items:center;gap:18px;padding:13px 0;color:#fff}
  .brand{display:flex;align-items:center;gap:14px;min-width:0}
  .brand .medallion{width:54px;height:54px;border-radius:50%;background:var(--ivory);
    border:2px solid var(--gold);padding:3px;flex:0 0 auto;box-shadow:0 2px 8px rgba(0,0,0,.3)}
  .brand .medallion img{width:100%;height:100%;border-radius:50%;object-fit:cover}
  .brand .names{min-width:0}
  .brand .n1{font-family:'Marcellus',serif;font-size:16.5px;letter-spacing:.04em;color:#fff;line-height:1.2}
  .brand .n2{font-size:12px;color:var(--gold-bright);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  nav{margin-left:auto;display:flex;align-items:center;gap:30px}
  .menu{display:flex;gap:28px;list-style:none}
  .menu a{font-size:14.5px;letter-spacing:.03em;color:#e9ecf3;padding:6px 0;position:relative}
  .menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
    background:var(--gold-bright);transition:right .28s ease}
  .menu a:hover::after,.menu a:focus-visible::after{right:0}
  .menu a:hover,.menu a:focus-visible{color:#fff}

  .lang{display:inline-flex;border:1px solid var(--gold);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.04)}
  .lang button{font-family:inherit;font-size:12.5px;letter-spacing:.08em;font-weight:600;
    border:0;background:transparent;color:#cfd6e4;padding:7px 13px;cursor:pointer;transition:.2s}
  .lang button.active{background:var(--gold);color:var(--navy-deep)}
  .lang button:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}

  .burger{display:none;background:transparent;border:1px solid var(--gold);border-radius:7px;
    color:var(--gold-bright);width:42px;height:38px;cursor:pointer;font-size:18px}

  /* ---------- hero ---------- */
  .hero{position:relative;background:
      radial-gradient(120% 90% at 50% -10%, var(--navy-soft), var(--navy) 45%, var(--navy-deep) 100%);
    color:#fff;text-align:center;padding:74px 0 88px;overflow:hidden}
  .hero::before,.hero::after{content:"";position:absolute;top:-60px;width:300px;height:300px;
    border:1px solid rgba(196,154,63,.16);border-radius:50%}
  .hero::before{left:-110px}
  .hero::after{right:-110px}
  .hero .crest{width:118px;height:118px;border-radius:50%;background:var(--ivory);
    border:3px solid var(--gold);margin:0 auto 22px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.4);position:relative}
  .hero .crest img{width:100%;height:100%;border-radius:50%;object-fit:cover}
  .hero .country{font-family:'Marcellus SC',serif;letter-spacing:.26em;text-transform:uppercase;
    font-size:14px;color:var(--gold-bright);margin-bottom:6px}
  .hero h1{font-size:clamp(34px,6vw,62px);color:#fff;letter-spacing:.03em}
  .hero .place{font-size:clamp(15px,2.4vw,20px);color:#dbe2f0;margin-top:4px;font-style:italic;font-family:'Source Sans 3'}
  .hero p.lede{max-width:660px;margin:18px auto 0;color:#cdd5e6;font-size:17px}
  .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
  .btn{font-family:'Marcellus SC',serif;letter-spacing:.12em;text-transform:uppercase;font-size:13px;
    padding:13px 26px;border-radius:3px;cursor:pointer;transition:.22s;border:1.5px solid var(--gold);display:inline-block}
  .btn.solid{background:var(--gold);color:var(--navy-deep)}
  .btn.solid:hover{background:var(--gold-bright)}
  .btn.ghost{color:var(--gold-bright);background:transparent}
  .btn.ghost:hover{background:rgba(196,154,63,.14)}

  /* ---------- generic section ---------- */
  section{padding:78px 0}
  .sec-head{text-align:center;margin-bottom:8px}
  .sec-head h2{font-size:clamp(27px,4vw,40px);color:var(--navy)}
  .lead-p{max-width:720px;margin:0 auto;text-align:center;color:var(--ink);font-size:17.5px}

  /* about */
  .about{background:var(--ivory);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .juris{max-width:760px;margin:30px auto 0;background:var(--paper);border:1px solid var(--line);
    border-left:4px solid var(--gold);padding:20px 26px;border-radius:4px;display:flex;gap:16px;align-items:center}
  .juris .mk{font-family:'Marcellus',serif;color:var(--gold-deep);font-size:30px;flex:0 0 auto}
  .juris p{margin:0;color:var(--navy);font-size:15.5px}

  /* services */
  .services{background:var(--paper)}
  .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px}
  .card{background:var(--ivory);border:1px solid var(--line);border-radius:6px;padding:30px 30px 32px;
    position:relative;box-shadow:0 10px 30px -24px rgba(14,33,72,.5);transition:.25s}
  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold)}
  .card .no{font-family:'Marcellus',serif;font-size:15px;color:var(--gold-deep);letter-spacing:.1em}
  .card h3{font-size:21px;color:var(--navy);margin:6px 0 10px}
  .card .ico{position:absolute;top:26px;right:28px;color:var(--gold);opacity:.85}
  .card p{color:var(--muted);font-size:15.5px}
  .card .seal-bottom{height:2px;width:42px;background:var(--gold);margin-top:16px;border-radius:2px}

  /* consul */
  .consul{background:var(--navy);color:#fff}
  .consul .inner{display:flex;gap:50px;align-items:center;flex-wrap:wrap;justify-content:center}
  .consul .seal-big{width:200px;height:200px;border-radius:50%;background:var(--ivory);
    border:4px solid var(--gold);padding:8px;flex:0 0 auto;box-shadow:0 14px 40px rgba(0,0,0,.5)}
  .consul .seal-big img{width:100%;height:100%;border-radius:50%;object-fit:cover}
  .consul .txt{max-width:520px}
  .consul .eyebrow{color:var(--gold-bright)}
  .consul .name{font-family:'Marcellus',serif;font-size:clamp(32px,5vw,46px);letter-spacing:.06em;color:#fff;margin:6px 0 2px}
  .consul .role{font-family:'Marcellus SC',serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright);font-size:16px}
  .consul .sub{color:#cdd5e6;margin-top:10px;font-size:16px}

  /* contact */
  .contact{background:var(--ivory)}
  .cgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
  .ccard{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:26px 28px;display:flex;gap:18px;align-items:flex-start}
  .ccard .badge{width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--gold-bright);
    display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .ccard .lbl{font-family:'Marcellus SC',serif;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--gold-deep)}
  .ccard .val{color:var(--navy);font-size:16px;margin-top:3px;word-break:break-word}
  .ccard .val a:hover{color:var(--gold-deep)}
  .ccard.full{grid-column:1/-1}

  /* footer */
  footer{background:var(--navy-deep);color:#c8d0e0;padding:44px 0 30px;border-top:2px solid var(--gold)}
  footer .f-top{display:flex;align-items:center;gap:16px;justify-content:center;text-align:center;flex-direction:column}
  footer .f-medallion{width:62px;height:62px;border-radius:50%;background:var(--ivory);border:2px solid var(--gold);padding:4px}
  footer .f-medallion img{width:100%;height:100%;border-radius:50%;object-fit:cover}
  footer .f-name{font-family:'Marcellus',serif;color:#fff;font-size:17px;letter-spacing:.04em}
  footer .f-sub{color:var(--gold-bright);font-size:12.5px;letter-spacing:.06em}
  footer .f-line{font-size:13px;color:#8e98ad;margin-top:18px;text-align:center}

  /* responsive */
  @media (max-width:860px){
    .menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);
      flex-direction:column;gap:0;padding:8px 0;border-bottom:2px solid var(--gold)}
    .menu.open{display:flex}
    .menu li{padding:0 28px}
    .menu a{display:block;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07)}
    .burger{display:inline-block;order:3}
    nav{gap:14px}
    .grid,.cgrid{grid-template-columns:1fr}
    .brand .n1{font-size:14.5px}
    .brand .n2{font-size:11px}
    section{padding:60px 0}
  }
  @media (max-width:520px){
    .brand .medallion{width:46px;height:46px}
    .hero{padding:54px 0 64px}
  }
  @media (prefers-reduced-motion:reduce){
    *{scroll-behavior:auto!important;transition:none!important}
  }
  :focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}