/*
 * Madi & Partners - brand layer (hand-written).
 * Palette: navy + grey are sampled from the supplied wordmark (web-logo.png);
 * gold accent, slate and tints are design decisions, contrast-checked (WCAG 2.2 AA).
 */

/* ---------- Tokens ---------- */
:root {
	--mp-navy:        #2a3973;   /* logo navy        - white on it 10.9:1, on white 10.9:1 */
	--mp-navy-dark:   #1c2550;   /* hover / footer   - white on it 15.6:1 */
	--mp-navy-tint:   #eef0f7;   /* soft section bg  - navy on it 9.9:1 */
	--mp-grey:        #79797a;   /* logo ampersand   - decorative only (4.3:1 on white) */
	--mp-slate:       #5b6270;   /* secondary text   - 6.1:1 on white */
	--mp-gold:        #c9a24a;   /* accent on navy   - 4.5:1 on navy; never for text on white */
	--mp-gold-text:   #7a5f1a;   /* accent text on white - 6.0:1 */
	--mp-ink:         #232833;   /* body text        - 14.6:1 on white */
	--mp-line:        #dfe3ee;
	--mp-bg:          #ffffff;
	--mp-radius:      2px;
	--mp-font-serif:  "Libre Baskerville", Georgia, "Times New Roman", serif;
	--mp-font-sans:   "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
	--mp-font-arabic: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", "Arabic Typesetting", sans-serif;
}

/* ---------- Self-hosted fonts (latin subset; replaces 3 Google Fonts stylesheets) ---------- */
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url("../fonts/baskerville-var.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap;
	src: url("../fonts/baskerville-italic-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url("../fonts/montserrat-var.woff2") format("woff2"); }

/* ---------- Typography ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
	font-family: var(--mp-font-sans);
	font-weight: 400;                      /* theme default was 300: too thin at 15px */
	font-size: 16px;
	line-height: 1.75;
	color: var(--mp-ink);
	text-rendering: optimizeLegibility;
}
p, li, td, th, label, input, select, textarea { font-weight: 400; }
h1, h2, h3, h4 { font-family: var(--mp-font-serif); color: var(--mp-navy); font-weight: 700; line-height: 1.3; letter-spacing: 0; }
h5, h6 { font-family: var(--mp-font-sans); color: var(--mp-navy); font-weight: 600; line-height: 1.4; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
h4 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); }
a { text-underline-offset: 0.18em; }
p a, li a, .entry-content a { text-decoration: underline; }

/* ---------- Links, buttons, focus ---------- */
a { color: var(--mp-navy); }
a:hover, a:focus { color: var(--mp-navy-dark); }
:focus-visible { outline: 3px solid var(--mp-gold); outline-offset: 2px; }   /* 3:1+ on both light and navy */
.vc_btn3, .btn, button, input[type=submit], .wpcf7-submit, .radiantthemes-button, .button {
	background: var(--mp-navy); color: #fff; border: 2px solid var(--mp-navy);
	border-radius: var(--mp-radius); font-family: var(--mp-font-sans); font-weight: 600; letter-spacing: 0.04em;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.vc_btn3:hover, .btn:hover, button:hover, input[type=submit]:hover, .wpcf7-submit:hover, .button:hover,
.vc_btn3:focus, .btn:focus, button:focus, input[type=submit]:focus, .wpcf7-submit:focus {
	background: var(--mp-navy-dark); border-color: var(--mp-navy-dark); color: #fff;
}

/* ---------- Forms ---------- */
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=search], input[type=number],
input[type=date], input[type=time], select, textarea {
	font-family: var(--mp-font-sans); font-size: 16px;      /* 16px stops iOS zoom-on-focus */
	color: var(--mp-ink); border-radius: var(--mp-radius);
	min-height: 44px;                                        /* WCAG 2.5.8 target size */
}
input:focus, select:focus, textarea:focus { border-color: var(--mp-navy); box-shadow: 0 0 0 3px rgba(42, 57, 115, .18); }
::placeholder { color: var(--mp-slate); opacity: 1; }
.wpcf7-not-valid-tip { color: #9b1c1c; font-weight: 600; }

/* ---------- Cards / surfaces ---------- */
blockquote { border-inline-start: 4px solid var(--mp-gold); }

/* ---------- Header (solid light surface so the navy/grey wordmark keeps 10.9:1 contrast) ---------- */
html body .wraper_header .wraper_header_top { background: var(--mp-navy-dark); }
html body .wraper_header .wraper_header_top,
html body .wraper_header .wraper_header_top a,
html body .wraper_header .wraper_header_top span { color: #fff; }
html body .wraper_header .wraper_header_top i { color: var(--mp-gold); }
html body .wraper_header .wraper_header_main,
html body .wraper_header .wraper_header_main.sticky-active {
	background: #fff;
	box-shadow: 0 1px 0 var(--mp-line), 0 8px 24px rgba(28, 37, 80, .10);
}
html body .wraper_header_main .logo img.madi-logo { width: 380px; max-width: 100%; height: auto; display: block; }
html body .wraper_header_main nav.nav ul.menu > li > a,
html body .wraper_header_main nav.nav ul.menu > li > a:visited {
	color: var(--mp-navy); font-family: var(--mp-font-sans); font-weight: 600; font-size: 15px; letter-spacing: .02em;
}
html body .wraper_header_main nav.nav ul.menu > li > a:hover,
html body .wraper_header_main nav.nav ul.menu > li.current-menu-item > a { color: var(--mp-navy-dark); border-color: var(--mp-gold); }
html body .wraper_header_main nav.nav ul.menu > li > a::after { background: var(--mp-gold); }
html body .wraper_header_main nav.nav ul.sub-menu { background: #fff; border-top: 3px solid var(--mp-gold); box-shadow: 0 12px 28px rgba(28, 37, 80, .16); }
html body .wraper_header_main nav.nav ul.sub-menu li a { color: var(--mp-navy); font-family: var(--mp-font-sans); font-weight: 500; }
html body .wraper_header_main nav.nav ul.sub-menu li a:hover { background: var(--mp-navy-tint); color: var(--mp-navy-dark); }
html body .wraper_header_main .responsive-nav i { color: var(--mp-navy); }
html body .wraper_header_main .logo { padding-block: 14px; }
html body .wraper_header .wraper_header_top i,
html body .wraper_header .wraper_header_top .fa { color: var(--mp-gold) !important; }
html body .wraper_header_main nav.nav ul.menu > li.menu-item-has-children > a i,
html body .wraper_header_main nav.nav ul.menu > li.menu-item-has-children > a::before { color: var(--mp-navy); }

/* Off-canvas "Schedule a callback" panel sits right of the viewport; stop it creating a horizontal scrollbar */
html { overflow-x: clip; }

/* Hero: the background is a video; dim + cool only the media layer so white slider copy keeps AA contrast
   over the bright sky. Text layers (sr7-txt / a.sr7-layer) are untouched. */
sr7-module sr7-media, sr7-module sr7-poster, sr7-module sr7-bg.sr7-layer { filter: brightness(.66) saturate(.9) contrast(1.05); }

/* Photo bands: the vendor artwork is baked sepia. Re-tint to brand navy without touching the images:
   luminosity blend keeps the photo's light/dark, navy supplies the hue; inset scrim guarantees text contrast. */
html body .vc_row.home-why-choose,
html body .vc_row.vc_custom_1502864094704 {
	background-color: var(--mp-navy) !important;
	background-blend-mode: luminosity;
	box-shadow: inset 0 0 0 100vmax rgba(28, 37, 80, .55);
}
/* the left column of the Why-Choose band is the photo itself: no extra fill */
html body .vc_column-inner.vc_custom_1498115587529 { background: transparent !important; }
html body .vc_row.vc_custom_1502864094704 a { color: var(--mp-gold); text-decoration: underline; }
/* Buttons on the navy photo band invert to gold-on-navy (4.5:1) so they do not vanish into the background */
html body .vc_row.vc_custom_1502864094704 input[type=submit],
html body .vc_row.vc_custom_1502864094704 .wpcf7-submit,
html body .vc_row.vc_custom_1502864094704 button { background: var(--mp-gold); border-color: var(--mp-gold); color: var(--mp-navy-dark); }
html body .vc_row.vc_custom_1502864094704 input[type=submit]:hover,
html body .vc_row.vc_custom_1502864094704 .wpcf7-submit:hover { background: #fff; border-color: #fff; color: var(--mp-navy-dark); }
/* NOTE: the three "Why choose us" icons are vendor PNGs used as CSS backgrounds on the text element itself,
   so they cannot be recoloured without tinting the copy. They need replacement artwork (see report). */
html body .vc_custom_1498115587529 h1, html body .vc_custom_1498115587529 h2, html body .vc_custom_1498115587529 h3,
html body .vc_custom_1497934073304 h1, html body .vc_custom_1497934073304 h2, html body .vc_custom_1497934073304 h3 { color: #fff; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	body { font-size: 16px; line-height: 1.7; }
	img, video, iframe { max-width: 100%; height: auto; }
	table { display: block; overflow-x: auto; }
}

/* ---------- Arabic / RTL readiness (site is English today; ready for an Arabic layer) ---------- */
html[dir="rtl"] body, :lang(ar) { font-family: var(--mp-font-arabic); line-height: 1.95; letter-spacing: 0; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 { font-family: var(--mp-font-arabic); font-weight: 700; text-transform: none; letter-spacing: 0; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}