/*
Theme Name: Equal Rights Documents Clearing
Theme URI: https://equalrights.ae
Author: Equal Rights Documents Clearing Services L.L.C
Author URI: https://equalrights.ae
Description: A one-page business theme for Equal Rights Documents Clearing Services L.L.C, Dubai. Covers PRO and government services, visa and immigration, business setup, legal support and documentation. Contact details, logo and section text are all editable from Appearance > Customize.
Version: 1.1
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: equal-rights
Tags: business, one-column, custom-logo, custom-menu, translation-ready
*/

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root {
	--navy: #1a247d;
	--navy-deep: #131a5c;
	--blue: #183583;
	--teal: #006b6d;
	--teal-light: #33b5a9;
	--gold: #b49157;
	--ink: #14181f;
	--ink-soft: #4a5260;
	--paper: #ffffff;
	--tint: #f2f5f8;
	--tint-warm: #faf7f1;
	--rule: #dde3ec;

	--serif: "Spectral", "Iowan Old Style", Georgia, serif;
	--sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

	--measure: 66ch;
	--gap: clamp(2.5rem, 6vw, 5.5rem);
	--pad: clamp(1.15rem, 5vw, 3rem);

	--header-h: 4.75rem;
	--tap: 44px; /* minimum comfortable touch target */
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 1rem);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	overflow-x: clip; /* 'clip' rather than 'hidden' so position:sticky still works */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Long emails, URLs and Arabic strings must not push the layout sideways. */
p, li, h1, h2, h3, h4, a, td { overflow-wrap: break-word; }

/* Grid and flex children default to min-width:auto, which is the usual
   cause of horizontal scrollbars on phones. */
.wrap > *, .two-col > *, .service > *, .contact-grid > *, .partner > *, .footer-grid > * { min-width: 0; }

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

a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--teal); }

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--navy-deep);
	margin: 0 0 .6em;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1.1em; max-width: var(--measure); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--navy); color: #fff;
	padding: .75rem 1.25rem; z-index: 999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.wrap {
	width: min(1180px, 100%);
	margin-inline: auto;
	padding-inline: var(--pad);
}

/* ---------------------------------------------------------------
   3. Header
   --------------------------------------------------------------- */
.site-top {
	background: var(--navy-deep);
	color: #cfd6ee;
	font-size: .8125rem;
	letter-spacing: .01em;
}
.site-top .wrap {
	display: flex; flex-wrap: wrap; gap: .4rem 1.75rem;
	align-items: center; justify-content: flex-end;
	min-height: 2.5rem;
}
.site-top a { color: #eef1fa; text-decoration: none; }
.site-top a:hover { color: var(--teal-light); }

.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255,255,255,.94);
	backdrop-filter: saturate(160%) blur(8px);
	border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; min-height: var(--header-h);
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: clamp(46px, 6vw, 62px); width: auto; }
.brand-text { font-family: var(--serif); color: var(--navy); font-size: 1.35rem; }

.nav-toggle {
	display: none;
	background: none; border: 1px solid var(--rule);
	border-radius: 3px; padding: .55rem .8rem;
	font: inherit; font-size: .9rem; color: var(--navy-deep); cursor: pointer;
}

.site-nav ul {
	list-style: none; display: flex; flex-wrap: wrap;
	gap: 1.5rem; margin: 0; padding: 0;
}
.site-nav a {
	color: var(--ink); text-decoration: none;
	font-size: .95rem; font-weight: 500;
	padding-block: .35rem;
	border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav .current-menu-item > a {
	color: var(--navy); border-bottom-color: var(--gold);
}

@media (max-width: 900px) {
	.nav-toggle { display: block; }
	.site-nav {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		background: #fff; border-bottom: 1px solid var(--rule);
		padding: .5rem var(--pad) 1.25rem;
	}
	.site-nav.is-open { display: block; }
	.site-nav ul { flex-direction: column; gap: 0; }
	.site-nav li + li { border-top: 1px solid var(--rule); }
	.site-nav a { display: block; padding: .85rem 0; border-bottom: 0; }
}

/* ---------------------------------------------------------------
   4. Hero
   --------------------------------------------------------------- */
.hero {
	background:
		radial-gradient(120% 90% at 88% 8%, #ffffff 0%, var(--tint) 55%, var(--tint) 100%);
	border-bottom: 1px solid var(--rule);
	padding-block: clamp(3rem, 8vw, 6rem);
}
.hero .wrap {
	display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	align-items: center;
}
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }

.hero-kicker {
	font-family: var(--serif);
	font-size: 1rem; font-style: italic;
	color: var(--teal); margin-bottom: .9rem;
}
.hero h1 { color: var(--navy-deep); max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--teal); }
.hero-lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); max-width: 52ch; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

.btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .85rem 1.6rem;
	font-family: var(--sans); font-size: .98rem; font-weight: 600;
	text-decoration: none; border-radius: 2px;
	border: 1px solid transparent;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--teal); color: #fff; }
.btn-ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-ghost:hover { background: var(--navy); color: #fff; }

.hero-panel {
	background: #fff;
	border: 1px solid var(--rule);
	border-top: 3px solid var(--gold);
	padding: clamp(1.5rem, 3vw, 2rem);
}
.hero-panel img.hero-logo { width: min(280px, 70%); margin: 0 auto 1.5rem; }
.hero-index { list-style: none; margin: 0; padding: 0; }
.hero-index li + li { border-top: 1px solid var(--rule); }
.hero-index a {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	padding: .8rem .1rem; text-decoration: none; color: var(--ink);
	font-size: .97rem;
}
.hero-index a:hover { color: var(--teal); }
.hero-index .code {
	font-family: var(--serif); font-size: .8rem; letter-spacing: .08em;
	color: var(--gold);
}

/* ---------------------------------------------------------------
   5. Sections
   --------------------------------------------------------------- */
.section { padding-block: var(--gap); }
.section + .section { border-top: 1px solid var(--rule); }
.section-tint { background: var(--tint); }
.section-warm { background: var(--tint-warm); }

.section-head { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.section-head h2 { margin-bottom: .35rem; }
.section-head .rule {
	width: 68px; height: 2px; background: var(--gold);
	margin-top: 1rem;
}

.two-col {
	display: grid; gap: clamp(1.75rem, 4vw, 3.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	align-items: start;
}

/* Service blocks: ledger rows, not identical cards */
.service {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2.5rem);
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
.service + .service { border-top: 1px solid var(--rule); }
@media (max-width: 760px) { .service { grid-template-columns: 1fr; gap: .75rem; } }

.service-code {
	font-family: var(--serif);
	font-size: .8rem; letter-spacing: .12em;
	color: var(--gold);
	padding-top: .45rem;
	border-top: 2px solid var(--gold);
	align-self: start;
}
.service h3 { color: var(--navy); }
.service p { color: var(--ink-soft); }

.list-grid {
	list-style: none; margin: 1.25rem 0 0; padding: 0;
	display: grid; gap: .1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.list-grid li {
	position: relative;
	padding: .5rem 0 .5rem 1.4rem;
	font-size: .97rem;
	border-bottom: 1px solid var(--rule);
}
.list-grid li::before {
	content: ""; position: absolute; left: 0; top: 1.05em;
	width: .5rem; height: 1px; background: var(--teal);
}

/* Mission / overview */
.prose p { color: var(--ink-soft); }
.prose p:first-of-type { color: var(--ink); font-size: 1.12rem; }

.mission {
	border-left: 3px solid var(--teal);
	padding: .25rem 0 .25rem 1.5rem;
}
.mission h3 { font-style: italic; color: var(--teal); }

/* Partnership */
.partner {
	display: grid; gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	align-items: center;
}
@media (max-width: 760px) { .partner { grid-template-columns: 1fr; } }
.partner-logo { background: #10131c; padding: 1.5rem; border-radius: 2px; }
.partner-logo img { margin-inline: auto; }

/* Why choose */
.why { list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	background: var(--rule); border: 1px solid var(--rule);
}
.why li {
	background: #fff; padding: 1.4rem 1.5rem;
	font-size: 1rem; font-weight: 500; color: var(--navy-deep);
}
.why li span {
	display: block; font-family: var(--serif); font-size: .78rem;
	letter-spacing: .1em; color: var(--gold); margin-bottom: .5rem;
}

/* ---------------------------------------------------------------
   6. Contact
   --------------------------------------------------------------- */
.contact-grid {
	display: grid; gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.contact-list .label {
	display: block; font-family: var(--serif); font-size: .78rem;
	letter-spacing: .1em; color: var(--gold); margin-bottom: .3rem;
}
.contact-list a { color: var(--navy); text-decoration: none; font-weight: 500; }
.contact-list a:hover { color: var(--teal); text-decoration: underline; }

.enquiry {
	background: #fff; border: 1px solid var(--rule);
	border-top: 3px solid var(--navy);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.field { margin-bottom: 1.1rem; }
.field label {
	display: block; font-size: .9rem; font-weight: 600;
	color: var(--navy-deep); margin-bottom: .4rem;
}
.field input, .field select, .field textarea {
	width: 100%; padding: .75rem .85rem;
	font: inherit; font-size: .97rem; color: var(--ink);
	background: #fdfefe; border: 1px solid #c8d1de; border-radius: 2px;
}
.field input:focus, .field select:focus, .field textarea:focus {
	border-color: var(--teal); outline: 2px solid rgba(0,107,109,.18); outline-offset: 0;
}
.field textarea { min-height: 7rem; resize: vertical; }
.form-note { font-size: .85rem; color: var(--ink-soft); margin-top: .9rem; }

/* ---------------------------------------------------------------
   7. Footer
   --------------------------------------------------------------- */
.site-footer {
	background: var(--navy-deep); color: #c8d0e8;
	padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
	font-size: .95rem;
}
.site-footer h4 {
	color: #fff; font-size: 1rem; letter-spacing: .01em; margin-bottom: .9rem;
}
.footer-grid {
	display: grid; gap: 2rem clamp(2rem, 5vw, 4rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.14);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: .28rem 0; }
.site-footer a { color: #dbe2f4; text-decoration: none; }
.site-footer a:hover { color: var(--teal-light); text-decoration: underline; }
.footer-mark { background: #fff; padding: .9rem 1rem; display: inline-block; border-radius: 2px; }
.footer-mark img { width: 190px; }
.footer-tag {
	font-family: var(--serif); font-style: italic;
	color: var(--gold); margin-top: 1.1rem;
}
.footer-base {
	padding-top: 1.5rem; display: flex; flex-wrap: wrap;
	gap: .5rem 1.5rem; justify-content: space-between;
	font-size: .85rem; color: #97a2c4;
}

/* ---------------------------------------------------------------
   8. Blog / page fallbacks
   --------------------------------------------------------------- */
.entry { padding-block: var(--gap); }
.entry-title a { color: var(--navy-deep); text-decoration: none; }
.entry-meta { font-size: .85rem; color: var(--ink-soft); margin-bottom: 1rem; }
.entry-content > * { max-width: var(--measure); }
.entry-content img { max-width: 100%; }
.pagination { display: flex; gap: 1rem; padding-block: 2rem; }

blockquote {
	border-left: 3px solid var(--gold);
	margin: 0 0 1.2em; padding-left: 1.25rem;
	font-family: var(--serif); font-style: italic; color: var(--ink-soft);
}

/* ---------------------------------------------------------------
   9. One orchestrated entrance
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.hero-kicker, .hero h1, .hero-lede, .hero-actions, .hero-panel {
		animation: rise .7s cubic-bezier(.2,.7,.3,1) backwards;
	}
	.hero h1 { animation-delay: .06s; }
	.hero-lede { animation-delay: .12s; }
	.hero-actions { animation-delay: .18s; }
	.hero-panel { animation-delay: .24s; }
}
@keyframes rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

/* WordPress core alignment classes */
.alignleft { float: left; margin: .3rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .3rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.wp-caption-text { font-size: .85rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------
   10. Responsive — tablet and phone
   ---------------------------------------------------------------
   Breakpoints:
     1180  large tablet / small laptop
     1024  tablet landscape
     900   tablet portrait  (navigation collapses here)
     680   large phone
     480   phone
     380   small phone
   --------------------------------------------------------------- */

/* ---- Large tablet / small laptop.
       Lower-bounded so it cannot re-widen the stacked phone layouts below. ---- */
@media (min-width: 761px) and (max-width: 1180px) {
	.hero .wrap { gap: 3rem; }
	.service { grid-template-columns: 7rem minmax(0, 1fr); }
}

/* ---- Tablet landscape ---- */
@media (min-width: 901px) and (max-width: 1024px) {
	.hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
	.hero h1 { max-width: 18ch; }
	.hero-panel img.hero-logo { width: min(230px, 62%); }
}

@media (min-width: 761px) and (max-width: 1024px) {
	.service { grid-template-columns: 6rem minmax(0, 1fr); gap: 1.5rem; }
}

@media (min-width: 901px) and (max-width: 1024px) {
	.partner { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 2rem; }
}

@media (max-width: 1024px) {
	:root { --gap: clamp(2.25rem, 6vw, 4rem); }
	.list-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
	.why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.prose p { max-width: 62ch; }
}

/* ---- Tablet portrait: navigation collapses, layouts go single column ---- */
@media (max-width: 900px) {
	:root { --header-h: 4.25rem; }

	.site-top { font-size: .78rem; }
	.site-top .wrap {
		justify-content: center;
		text-align: center;
		gap: .2rem 1.1rem;
		padding-block: .45rem;
	}

	.brand img { height: 44px; }

	/* Menu panel: full-height tap targets, scrollable if the list grows */
	.site-nav {
		max-height: calc(100vh - var(--header-h));
		max-height: calc(100dvh - var(--header-h));
		overflow-y: auto;
		box-shadow: 0 14px 30px rgba(19, 26, 92, .09);
	}
	.site-nav a { min-height: var(--tap); display: flex; align-items: center; font-size: 1.02rem; }
	.nav-toggle { min-height: var(--tap); min-width: var(--tap); }

	/* Hero: copy first, index panel underneath */
	.hero { padding-block: clamp(2.25rem, 7vw, 3.5rem); }
	.hero .wrap { grid-template-columns: 1fr; gap: 2.25rem; }
	.hero h1 { max-width: 20ch; }
	.hero-lede { max-width: 60ch; }
	.hero-panel { order: 2; }
	.hero-panel img.hero-logo { width: min(240px, 55%); }
	.hero-index a { min-height: var(--tap); }

	.two-col { gap: 2rem; }
	.mission { margin-top: .5rem; }

	/* Partnership: logo above the explanation, capped so it stays a badge */
	.partner { grid-template-columns: 1fr; gap: 1.75rem; }
	.partner-logo { max-width: 300px; }

	.contact-grid { gap: 2.25rem; }
}

/* ---- Large phone ---- */
@media (max-width: 680px) {
	:root { --gap: 2.5rem; }

	body { font-size: 1rem; line-height: 1.6; }

	h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); line-height: 1.18; }
	h2 { font-size: clamp(1.45rem, 6vw, 1.85rem); }
	h3 { font-size: 1.15rem; }

	.site-top .wrap span { display: none; }        /* address repeats in the footer */
	.site-top .wrap { gap: .35rem 1.25rem; }
	.site-top a { min-height: 2rem; display: inline-flex; align-items: center; }

	.hero h1, .hero-lede { max-width: none; }

	/* Full-width, thumb-friendly buttons */
	.hero-actions { gap: .7rem; }
	.hero-actions .btn { flex: 1 1 100%; justify-content: center; min-height: var(--tap); }
	.btn { padding: .9rem 1.35rem; }

	.hero-panel { padding: 1.25rem 1.15rem; }
	.hero-panel img.hero-logo { width: min(210px, 62%); margin-bottom: 1.15rem; }
	.hero-index a { padding: .75rem .1rem; font-size: .95rem; gap: .75rem; }
	.hero-index .code { flex: 0 0 auto; }

	/* Services: the code becomes a short rule above the heading */
	.service { grid-template-columns: 1fr; padding-block: 1.75rem; gap: .85rem; }
	.service-code {
		justify-self: start; /* grid items are blockified; inline-block alone won't shrink */
		min-width: 4.5rem;
		padding-top: .4rem;
		font-size: .74rem; letter-spacing: .14em;
	}
	.list-grid { grid-template-columns: 1fr; margin-top: 1rem; }
	.list-grid li { padding-block: .55rem; }

	.partner { grid-template-columns: 1fr; gap: 1.5rem; }
	.partner-logo { padding: 1.15rem; }
	.partner-logo img { max-width: 260px; }

	.why { grid-template-columns: 1fr; }
	.why li { padding: 1.1rem 1.15rem; }

	.contact-list li { padding: .85rem 0; }
	.enquiry { padding: 1.25rem 1.15rem; }
	.enquiry .btn { width: 100%; justify-content: center; min-height: var(--tap); }

	/* 16px keeps iOS Safari from zooming in on focus */
	.field input, .field select, .field textarea { font-size: 16px; padding: .8rem .8rem; }
	.field textarea { min-height: 6rem; }

	.footer-grid { gap: 1.75rem; padding-bottom: 1.5rem; }
	.footer-mark img { width: 160px; }
	.site-footer li { padding: .35rem 0; }
	.site-footer a { display: inline-block; min-height: 1.9rem; }
	.footer-base { flex-direction: column; gap: .35rem; }
}

/* ---- Phone ---- */
@media (max-width: 480px) {
	.section-head .rule { width: 52px; }
	.brand img { height: 40px; }
	.hero-panel img.hero-logo { width: 70%; }
	.hero-index a { flex-wrap: wrap; gap: .15rem; }
	.hero-index .code { width: 100%; }
	.partner-logo img { max-width: 100%; }
	.why li span { font-size: .72rem; }
}

/* ---- Small phone ---- */
@media (max-width: 380px) {
	:root { --pad: 1rem; }
	h1 { font-size: 1.7rem; }
	.brand img { height: 36px; }
	.site-top { font-size: .72rem; }
	.hero-index a { font-size: .92rem; }
}

/* ---- Short landscape phones: don't let the sticky header eat the screen ---- */
@media (max-height: 460px) and (orientation: landscape) {
	.site-header { position: static; }
	.site-nav { max-height: 70vh; }
	.hero { padding-block: 2rem; }
}

/* ---- Coarse pointers: no hover-dependent affordances ---- */
@media (hover: none) {
	.site-nav a:hover { border-bottom-color: transparent; }
	.btn { transition: none; }
}

/* ---- Print ---- */
@media print {
	.site-top, .site-header, .hero-actions, .enquiry, .nav-toggle { display: none !important; }
	body { font-size: 11pt; color: #000; }
	.section { padding-block: 1rem; }
	.site-footer { background: none; color: #000; }
	.site-footer a { color: #000; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}