/* ============================================================
   responsive.css  —  Mobile-friendly overrides for the legacy
   fixed-width (1000px) table-based RTL layout.
   Loaded AFTER Default.css so these rules win.
   Added 2026-06 as part of the mobile + SEO overhaul.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

* { box-sizing: border-box; }

/* ============================================================
   MODERN UI THEME (pure CSS — no HTML/content changes, so Google
   indexing, titles, schema and copy are all untouched).
   Brand palette: navy #0b1f6b, gold #c39a3e, Saudi green #0c6b3f.
   ============================================================ */
:root{
  --navy:#0b1f6b; --navy-d:#071551; --gold:#c39a3e; --gold-d:#a87f2c;
  --green:#0c6b3f; --green-d:#094f2f; --ink:#1d2433; --paper:#ffffff;
  --page:#eef1f6;
}

body, #form1, .MenuItem, .AccordionBody, .AccordionBody a,
.AccordionSubcategory, .footerB, .FMenu a, .phoneLbl, p, span, td, h1, h2, h3, a {
  font-family:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif !important;
}

/* Refine the legacy bright-blue body copy to a calm brand navy */
#form1 span[style*="#0000ff"], #form1 span[style*="#0000FF"]{ color:#16306b !important; }
#form1 span[style*="color: #006633"]{ color:var(--green) !important; }

/* Comfortable reading rhythm for content paragraphs */
#form1 p{ line-height:1.85; }

/* SEO page heading — visible, keyword-rich, but tuned to sit quietly
   inside the legacy layout (single H1 per page). */
h1.seoH1 {
    font-size: 17pt;
    line-height: 1.4;
    color: #001e75;
    margin: 0 0 10px 0;
    font-weight: bold;
}
@media (max-width: 1000px) { h1.seoH1 { font-size: 15pt; text-align: center; } }

img { max-width: 100%; height: auto; }

html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

/* Never let anything force a horizontal scrollbar */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---- Tablet / phone : linearize the layout ---------------- */
@media (max-width: 1000px) {

    /* The body background is stretched to 100% 100% on desktop which
       badly distorts on tall mobile screens — make it cover instead. */
    body {
        background-size: cover !important;
        background-attachment: scroll !important;
        font-size: 12pt;
    }

    /* Turn every layout table inside the form into a vertical stack.
       Stylesheet !important beats the pages' inline width/height. */
    #form1 table,
    #form1 tbody,
    #form1 tr,
    #form1 td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        float: none !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    /* Top utility bar (navy strip with phone / facebook) */
    #form1 > * div[style*="1000px"] { width: 100% !important;
        display:flex !important; align-items:center; justify-content:center;
        gap:12px; padding:9px 14px !important; position:relative;
        min-height:40px; height:auto !important; }
    #phone, #date { float: none !important; width: auto !important;
        text-align: center; display: inline-flex !important; align-items:center;
        margin:0 !important; }
    #date{ position:absolute; left:12px; top:50%; transform:translateY(-50%); }
    .phoneLbl { width: auto !important; float: none !important;
        display: inline-block; padding-top:0 !important; }

    /* The scrolling marquee is decorative and eats vertical space on a
       phone — hide it (its address text also lives in the footer). */
    marquee { display:none !important; }

    /* Menu links become full-width, centred, tappable chips */
    .MenuBody{ padding:8px !important; }
    .MenuItem{
        display:block !important; text-align:center; margin:6px auto !important;
        background:rgba(255,255,255,.14); border-radius:8px; max-width:280px;
    }

    /* Brand banner blocks that rely on a fixed-size background image:
       let them fill the width and scale the artwork to fit. */
    .logoDiv {
        width: 100% !important; height: 120px !important;
        background-size: contain !important;
        background-position: center center !important;
        margin: 8px auto !important;
    }
    .headerDiv {
        width: 100% !important; height: 90px !important;
        background-size: contain !important;
        background-position: center center !important;
    }

    /* Scrolling marquee — keep it inside the viewport */
    marquee { width: 100% !important; }

    /* Main navigation menu */
    .MenuBody { width: 100% !important; height: auto !important;
        background-size: cover !important; padding: 4px 0 !important; }
    .MenuLeft, .MenuRight { display: none !important; }
    .MenuItem {
        width: auto !important; float: none !important;
        display: inline-block; margin: 6px 10px; padding: 6px 4px;
        font-size: 12pt;
    }

    /* Side accordion (services list) */
    .AccordionHead, .AccordionFooter { display: none !important; }
    .AccordionBody {
        width: 100% !important; height: auto !important;
        background: #1b2a6b !important; padding: 6px 0 !important;
    }
    .AccordionBody a {
        background-image: none !important;
        margin-right: 0 !important; padding: 8px 14px !important;
        display: block; color: #fff !important; font-size: 12pt !important;
    }
    .AccordionSubcategory {
        width: 100% !important; height: auto !important;
        background-size: cover !important; padding: 8px 14px !important;
        font-size: 12pt;
    }

    /* Decorative side images / promo boxes */
    .Majales, .Majales2 { width: 100% !important;
        background-size: contain !important; }

    /* Footer — the legacy version overflows and clips on phones;
       force everything to wrap, centre and stay inside the viewport. */
    .footerL, .footerR { display: none !important; }
    .footerB { width: 100% !important; font-size: 12px;
        padding:14px 12px !important; line-height:1.8; }
    .footerB td, .footerB span, .FMenu, .FMenu a {
        text-align:center !important;
        white-space:normal !important; word-break:break-word;
        padding-left:6px !important; padding-right:6px !important;
        float:none !important; display:block !important; width:auto !important;
    }
    /* keep the phone number in left-to-right order */
    #UCFooter1_contactLbl, #UCFooter1_contactLbl a{ direction:ltr !important; unicode-bidi:embed; }
    .footerB td{ margin:4px 0 !important; }
    .FMenu a { display:inline-block !important; margin:6px 8px !important;
        font-size:11pt !important; }

    /* Tap targets: make all links comfortable to touch */
    a { line-height: 1.7; }

    /* Make the main content column readable edge-to-edge */
    #form1 div[style*="574px"],
    #form1 div[style*="584px"],
    #form1 div[style*="width: 5px"] { width: 100% !important; padding: 8px !important; }

    /* Contact form: fixed-width inputs/textarea overflow the phone width —
       let every field fill the column and wrap its labels. */
    #form1 input[type="text"],
    #form1 input[type="email"],
    #form1 input[type="password"],
    #form1 textarea,
    #form1 select {
        width: 100% !important; max-width: 100% !important;
        padding: 10px 12px !important; font-size: 12pt !important;
        border: 1px solid #c7cede !important; border-radius: 6px !important;
        margin: 4px 0 !important;
    }
    #form1 textarea { min-height: 96px !important; }
    /* Submit / cancel buttons: comfortable tap targets, side by side */
    #form1 input[type="submit"], #form1 input[type="button"] {
        display: inline-block !important; width: auto !important;
        min-width: 96px; padding: 10px 22px !important; font-size: 12pt !important;
        margin: 6px 4px !important; border: 0 !important; border-radius: 6px !important;
        background: var(--green) !important; color: #fff !important; font-weight: 700;
    }
    /* Keep field labels from being pushed off the RTL edge */
    #form1 .fieldLbl, #form1 td[align="right"] { text-align: right !important; }
}

/* ---- Laptop / desktop ( > 1000px ) : centre & frame ------- */
/* The legacy layout is a ~1000px block centred with align="center".
   On wide screens that leaves big bare margins over a stretched,
   left-heavy background image, so it reads as "off-centre". Framing
   the column on a clean white card over a soft page colour makes the
   centring obvious and looks professional. */
@media (min-width: 1001px) {
    body {
        background: #e9edf3 !important;
    }
    #form1 > table {
        background: #ffffff;
        box-shadow: 0 6px 28px rgba(0, 0, 0, .18);
        border-radius: 8px;
        margin-top: 14px !important;
        margin-bottom: 18px !important;
    }
}

/* ============================================================
   THEME COMPONENTS  (apply at every width)
   ============================================================ */

/* ---- Top utility strip (phone + facebook) ----------------- */
div[style*="background-color: #E0E0E0"],
div[style*="background-color: #e0e0e0"]{
  background:linear-gradient(90deg,var(--navy),var(--navy-d)) !important;
  height:auto !important; min-height:34px; padding:6px 0 !important;
  box-shadow:0 1px 6px rgba(0,0,0,.25);
}
.phoneLbl span, #phone span{ color:#fff !important; font-weight:700; letter-spacing:.3px; }
.phoneImg{ display:none !important; }
#phone::before{ content:"\260E"; color:var(--gold); margin-left:6px; font-size:12pt; }

/* ---- Main navigation bar ---------------------------------- */
.MenuBody{
  background:linear-gradient(90deg,var(--green),var(--green-d)) !important;
  border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.MenuItem{
  color:#fff !important; font-weight:700 !important; font-size:12pt;
  padding:8px 16px !important; border-radius:4px;
  transition:background .2s ease, color .2s ease;
}
.MenuBody a.MenuItem:hover{
  background:rgba(255,255,255,.16); color:var(--gold) !important;
}

/* ---- Services accordion (sidebar) ------------------------- */
.AccordionSubcategory{
  background:linear-gradient(90deg,var(--navy),var(--navy-d)) !important;
  color:#fff !important; border-radius:6px; margin-bottom:5px;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  display:flex !important; align-items:center; justify-content:space-between;
  height:auto !important; min-height:44px; width:auto !important;
  padding:10px 14px !important; line-height:1.35; overflow:visible !important;
}
.AccordionSubcategory span{ color:#fff !important; padding-right:0 !important; }
.AccordionSubcategory::after{ content:"\25BE"; color:var(--gold); font-size:11pt; margin-right:8px; }
/* jQuery-UI injects its own header icon — hide it so we don't double up */
.AccordionSubcategory .ui-icon,
.AccordionSubcategory .ui-accordion-header-icon{ display:none !important; }
/* Drop the legacy decorative cap images at every width and give the
   services panel one clean light surface. */
.AccordionHead, .AccordionFooter{ display:none !important; }
.AccordionBody{
  background:#f4f6fb !important; border-radius:0 0 8px 8px;
  padding:5px !important;
}
.AccordionBody a{
  color:var(--navy) !important; font-weight:500 !important;
  border-bottom:1px solid #e2e7f1; transition:color .15s, padding .15s, background .15s;
}
.AccordionBody a:hover{
  color:var(--gold-d) !important; background:#eef1f8;
  padding-right:6px !important;
}

/* ---- Promo "خاص السفارة" box ------------------------------ */
#UCForEmbassy1_Panel1{ border-radius:8px; overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,.18); transition:transform .2s; }
#UCForEmbassy1_Panel1:hover{ transform:translateY(-2px); }

/* ---- Footer ----------------------------------------------- */
.footerB{
  background:linear-gradient(90deg,var(--navy),var(--navy-d)) !important;
  color:#dfe5f5 !important; border-radius:8px; padding:6px 4px;
}
.footerB span{ color:#eef1fb !important; }
.FMenu a{ color:#fff !important; font-weight:500; }
.FMenu a:hover{ color:var(--gold) !important; }

/* Tasteful focus outline for keyboard / accessibility */
a:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* Replace the legacy Word "symbol font" list markers (which render as a
   broken glyph) with a clean gold diamond — cosmetic only. */
#form1 span[style*="symbol"],
#form1 span[style*="symbol"] *{ font-size:0 !important; }
#form1 span[style*="symbol"]::before{
  content:"\25C6"; font-size:10pt !important; color:var(--gold);
  font-family:'Tajawal',sans-serif !important; margin-left:6px;
}

/* ---- Small phones ---------------------------------------- */
@media (max-width: 520px) {
    body { font-size: 11pt; }
    .logoDiv { height: 96px !important; }
    .headerDiv { height: 64px !important; }
    .MenuItem { display: block; margin: 4px 0; }
}