/* =========================================================================
   Alrasly Consultancy — main.css
   Base, layout, header/nav, footer, components. Mobile-first.
   Brand law: CLAUDE.md. Tokens: assets/css/tokens.css.
   Breakpoints: tablet >= 600px, desktop >= 1040px.
   ========================================================================= */

/* ---------- Base ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* Smooth in-page anchor scrolling — disabled when reduced motion is requested. */
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
	margin:0;
	font-family:var(--font-latin);
	font-weight:var(--fw-regular);
	font-size:var(--fs-body);
	line-height:var(--lh-body);
	color:var(--ink);
	background:var(--white);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

/* Responsive media by default (CLAUDE.md: responsive images) */
img,svg,video,canvas,iframe,embed,object{ max-width:100%; height:auto; }
img{ display:block; }

/* ---------- Typography (fluid scale; CLAUDE.md §6) ---------- */
h1,h2,h3,h4,h5,h6{ margin:0 0 var(--space-4); color:var(--navy); }
h1{ font-size:var(--fs-h1); line-height:var(--lh-h1); font-weight:var(--fw-bold); }
h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); font-weight:var(--fw-bold); }
h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:var(--fw-semibold); }
h4{ font-size:var(--fs-h4); line-height:var(--lh-h4); font-weight:var(--fw-semibold); }
p{ margin:0 0 var(--space-4); }

.display{ font-size:var(--fs-display); line-height:var(--lh-display); font-weight:var(--fw-bold); color:var(--navy); }
.body-large{ font-size:var(--fs-body-lg); }
small,.small{ font-size:var(--fs-small); line-height:var(--lh-small); }
.caption{ font-size:var(--fs-caption); line-height:var(--lh-caption); }

.overline{
	display:inline-block;
	font-size:var(--fs-caption);
	font-weight:var(--fw-medium);
	letter-spacing:0.2em;       /* Latin only — disabled for Arabic below */
	text-transform:uppercase;
	line-height:1.3;
}

a{ color:var(--blue); text-decoration:none; }
a:hover,a:focus{ color:var(--blue-hover); text-decoration:underline; }

/* Focus ring — 2px blue, 2px offset (CLAUDE.md §5) */
:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

/* ---------- Arabic / RTL: looser line-heights, no tracking (CLAUDE.md §6/§11) ---------- */
:lang(ar) body,[dir="rtl"] body{ line-height:1.75; }
:lang(ar) h1,[dir="rtl"] h1{ line-height:1.3; }
:lang(ar) h2,[dir="rtl"] h2{ line-height:1.35; }
:lang(ar) h3,[dir="rtl"] h3{ line-height:1.45; }
:lang(ar) h4,[dir="rtl"] h4{ line-height:1.5; }
:lang(ar) .overline,[dir="rtl"] .overline{ letter-spacing:normal; text-transform:none; }

/* ---------- Layout (CLAUDE.md §7) ---------- */
.container{
	width:100%;
	max-width:var(--container-max);
	margin-inline:auto;
	padding-inline:var(--container-pad);
}
.section{ padding-block:var(--space-7); }

/* Block alignment support (align-wide) */
.alignwide{ max-width:min(var(--wide-max), 100% - (var(--space-4) * 2)); margin-inline:auto; }
.alignfull{ max-width:none; width:100%; }

/* Full-bleed colour sections */
.section--navy{ background:var(--navy); color:var(--white); }
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{ color:var(--white); }
.section--offwhite{ background:var(--offwhite); }

/* ---------- Buttons (CLAUDE.md §9) — reusable sitewide system ----------
   Feedback: a SQUARE fill-sweep on hover (a hard-edged two-tone background slid
   with background-position — no rounding, no glow, no shadow, palette only), the
   label flips colour, a pressed state nudges down 1px and darkens to the *-active
   token, and keyboard focus shows the 2px blue ring. Variants work on light
   surfaces and auto-invert inside dark `.section--navy` blocks (e.g. the hero).
   Transitions are transform/background/colour only. */
.btn{
	display:inline-flex; align-items:center; justify-content:center;
	padding:var(--space-3) var(--space-5);   /* 12 / 24 */
	font-family:inherit; font-size:var(--fs-body); font-weight:var(--fw-medium);
	line-height:1.2; text-align:center; text-decoration:none;
	border:0; cursor:pointer;
	color:var(--white); background-color:var(--navy);
	background-repeat:no-repeat; background-size:200% 100%; background-position:100% 0;
	transition:background-position .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn:hover{ text-decoration:none; }
.btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }   /* CLAUDE.md §5 */
.btn:active{ transform:translateY(1px); }

/* Primary — light surfaces: navy at rest → blue sweeps in, label stays white. */
.btn-primary{ color:var(--white); background-color:var(--navy); background-image:linear-gradient(90deg, var(--blue) 0 50%, var(--navy) 50%); }
.btn-primary:hover,.btn-primary:focus-visible{ background-position:0 0; color:var(--white); }
.btn-primary:active{ background-image:linear-gradient(90deg, var(--blue-active) 0 50%, var(--navy-active) 50%); }

/* Secondary — light surfaces: blue at rest → navy sweeps in. */
.btn-secondary,.btn--secondary{ color:var(--white); background-color:var(--blue); background-image:linear-gradient(90deg, var(--navy) 0 50%, var(--blue) 50%); }
.btn-secondary:hover,.btn-secondary:focus-visible,.btn--secondary:hover,.btn--secondary:focus-visible{ background-position:0 0; color:var(--white); }
.btn-secondary:active,.btn--secondary:active{ background-image:linear-gradient(90deg, var(--navy-active) 0 50%, var(--blue-active) 50%); }

/* Ghost — light surfaces: navy 1px square outline, transparent → fills navy, label flips white. */
.btn-ghost{ color:var(--navy); background-color:transparent; background-image:linear-gradient(90deg, var(--navy) 0 50%, transparent 50%); box-shadow:inset 0 0 0 1px var(--navy); }
.btn-ghost:hover,.btn-ghost:focus-visible{ background-position:0 0; color:var(--white); }
.btn-ghost:active{ background-image:linear-gradient(90deg, var(--navy-active) 0 50%, transparent 50%); }

/* ---- Dark context (hero / navy sections) inverts; legacy aliases kept ---- */
/* Primary on dark: white at rest (navy label) → navy sweeps in, label flips white. */
.section--navy .btn-primary,.btn--on-dark{
	color:var(--navy); background-color:var(--white);
	background-image:linear-gradient(90deg, var(--navy) 0 50%, var(--white) 50%);
}
.section--navy .btn-primary:hover,.section--navy .btn-primary:focus-visible,.btn--on-dark:hover,.btn--on-dark:focus-visible{ background-position:0 0; color:var(--white); }
.section--navy .btn-primary:active,.btn--on-dark:active{ background-image:linear-gradient(90deg, var(--navy-active) 0 50%, var(--white) 50%); }

/* Ghost on dark: white 1px outline + white label → blue fills, label stays white. */
.section--navy .btn-ghost,.btn--ghost-dark{
	color:var(--white); background-color:transparent;
	background-image:linear-gradient(90deg, var(--blue) 0 50%, transparent 50%);
	box-shadow:inset 0 0 0 1px var(--white);
}
.section--navy .btn-ghost:hover,.section--navy .btn-ghost:focus-visible,.btn--ghost-dark:hover,.btn--ghost-dark:focus-visible{ background-position:0 0; color:var(--white); box-shadow:inset 0 0 0 1px var(--blue); }
.section--navy .btn-ghost:active,.btn--ghost-dark:active{ background-image:linear-gradient(90deg, var(--blue-active) 0 50%, transparent 50%); }

/* Reduced motion: keep the colour state change; drop the slide + press translate. */
@media (prefers-reduced-motion:reduce){
	.btn{ transition:color .15s ease, box-shadow .15s ease; }
	.btn:active{ transform:none; }
}

/* ---------- Card / input (CLAUDE.md §9) ---------- */
.card{ padding:var(--space-5); background:var(--white); color:var(--ink); border:1px solid var(--offwhite); }
.input{ padding:var(--space-2) var(--space-3); background:var(--white); color:var(--ink); border:1px solid var(--ink); font-family:inherit; }
.input:focus{ border-color:var(--focus-ring); }

/* ---------- Header ---------- */
.site-header{ background:var(--white); border-bottom:1px solid var(--offwhite); }
.site-header__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--space-4);
	min-height:64px;
	flex-wrap:wrap;
}
.site-branding{ display:flex; align-items:center; }
.site-branding .custom-logo,
.site-logo__img{ display:block; max-height:40px; width:auto; }
.site-logo{ display:inline-flex; align-items:center; line-height:0; }
/* Compact square mark on very small screens; full lockup from 480px up. */
.site-logo__lockup{ display:none; }
.site-logo__mark{ display:block; }
@media (min-width:480px){
	.site-logo__lockup{ display:block; }
	.site-logo__mark{ display:none; }
}
.site-title{ font-weight:var(--fw-bold); font-size:var(--fs-h4); color:var(--navy); }
.site-title:hover,.site-title:focus{ color:var(--navy); text-decoration:none; }

/* ---------- Navigation: mobile-first hamburger (square) ---------- */
.menu-toggle{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:44px; height:44px;       /* min touch target */
	padding:0;
	background:var(--navy);
	color:var(--white);
	border:0;
	cursor:pointer;
}
.menu-toggle__box{ position:relative; display:block; width:20px; height:14px; }
.menu-toggle__bar,
.menu-toggle__bar::before,
.menu-toggle__bar::after{
	content:""; position:absolute; left:0; width:20px; height:2px; background:var(--white);
	transition:transform .2s ease, opacity .2s ease, background-color .2s ease;
}
.menu-toggle__bar{ top:6px; }
.menu-toggle__bar::before{ top:-6px; }
.menu-toggle__bar::after{ top:6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar{ background:transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar::before{ transform:translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar::after{ transform:translateY(-6px) rotate(-45deg); }

.main-navigation{ flex-basis:100%; display:none; }
.main-navigation.is-open{ display:block; }
.nav-menu{ list-style:none; margin:0; padding:0 0 var(--space-4); display:flex; flex-direction:column; }
.nav-menu li{ border-top:1px solid var(--offwhite); }
.nav-menu a{ display:block; padding:var(--space-3) 0; color:var(--navy); font-weight:var(--fw-medium); }
.nav-menu a:hover,.nav-menu a:focus{ color:var(--blue); text-decoration:none; }
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a{ color:var(--blue); }

/* ---------- Hero (front-page placeholder) ---------- */
.hero{ padding-block:var(--space-8); }
.hero__inner{ display:flex; flex-direction:column; gap:var(--space-6); align-items:flex-start; }
.hero__title{ font-size:var(--fs-display); line-height:var(--lh-display); margin-bottom:var(--space-4); }
.hero__lead{ font-size:var(--fs-body-lg); max-width:54ch; }
.hero__actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.squares-mark{ width:120px; height:120px; display:block; }

/* ---------- Mega-footer (CLAUDE.md §9: navy/dark fill, sky/white text, square) ----------
   Inner pages: solid navy. Homepage (dark world): transparent so the page gradient
   flows straight through — no seam between the CTA and the footer. */
.site-footer{ background:var(--navy); color:var(--white); padding-block:var(--space-8) 0; }
.has-overlay-header .site-footer{ background:transparent; }   /* seamless on the continuous dark surface */
.site-footer a{ color:var(--sky); text-decoration:none; }     /* sky text allowed on navy/dark (CLAUDE.md §5) */
.site-footer a:hover,.site-footer a:focus-visible{ color:var(--white); text-decoration:underline; text-underline-offset:3px; }

.site-footer__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-7); }
.site-footer__col{ display:flex; flex-direction:column; gap:var(--space-3); }
.site-footer__heading{ font-size:var(--fs-small); letter-spacing:0.12em; text-transform:uppercase;
	font-weight:var(--fw-semibold); color:var(--white); margin:0 0 var(--space-1); }
[dir="rtl"] .site-footer__heading{ letter-spacing:normal; text-transform:none; }   /* never letter-space Arabic (CLAUDE.md §6) */

.site-footer__brand{ gap:var(--space-4); max-width:34ch; }
.site-footer__logo-link{ display:inline-block; }
.site-footer__logo{ display:block; height:48px; width:auto; }
.site-footer__tagline{ font-weight:var(--fw-bold); font-size:var(--fs-h4); margin:0; color:var(--white); }
.site-footer__about{ margin:0; color:rgba(255,255,255,.78); font-size:var(--fs-small); line-height:1.6; }
.site-footer__social{ list-style:none; margin:0; padding:0; display:flex; gap:var(--space-2); min-height:1px; }  /* icons land here later */

.site-footer__links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.site-footer__contact{ display:flex; flex-direction:column; gap:var(--space-2); font-style:normal; }

.site-footer__bar{ margin-top:var(--space-8); padding-block:var(--space-4); border-top:1px solid rgba(255,255,255,.14); }
.site-footer__bar-inner{ display:flex; flex-direction:column; gap:var(--space-3); align-items:flex-start; }
.site-footer__copy{ color:rgba(255,255,255,.7); }
.site-footer__legal{ display:flex; gap:var(--space-5); }

/* ---------- Posts ---------- */
.entry{ margin-bottom:var(--space-6); }
.entry__title{ margin-bottom:var(--space-3); }
.entry__title a{ color:var(--navy); }
.entry__title a:hover,.entry__title a:focus{ color:var(--blue); text-decoration:none; }
.entry__thumb{ margin-bottom:var(--space-4); }
.no-results{ padding-block:var(--space-7); }

/* ---------- Accessibility helpers ---------- */
.screen-reader-text{
	border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
	height:1px; width:1px; margin:-1px; padding:0; overflow:hidden; position:absolute !important; word-wrap:normal !important;
}
.skip-link{ position:absolute; left:-9999px; top:0; z-index:100000; background:var(--navy); color:var(--white); padding:var(--space-3) var(--space-4); }
.skip-link:focus{ left:var(--space-4); }

/* =========================================================================
   Responsive
   ========================================================================= */

/* Tablet ≥ 600px */
@media (min-width:600px){
	.section{ padding-block:var(--space-8); }
	.hero__actions{ gap:var(--space-4); }
	/* Footer: brand spans the top row, the three link columns sit beneath it. */
	.site-footer__grid{ grid-template-columns:repeat(3,1fr); gap:var(--space-7) var(--space-6); }
	.site-footer__brand{ grid-column:1 / -1; }
	.site-footer__bar-inner{ flex-direction:row; justify-content:space-between; align-items:center; }
}

/* Desktop ≥ 1040px: brand column + three link columns on one row. */
@media (min-width:1040px){
	.site-footer__grid{ grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-8); }
	.site-footer__brand{ grid-column:auto; }
}

/* Desktop ≥ 1040px — inline nav, hide toggle */
@media (min-width:1040px){
	.menu-toggle{ display:none; }
	.main-navigation{ display:block; flex-basis:auto; }
	.nav-menu{ flex-direction:row; gap:var(--space-5); padding:0; }
	.nav-menu li{ border-top:0; }
	.nav-menu a{ padding:var(--space-2) 0; }

	.section{ padding-block:var(--space-9); }

	.hero__inner{ flex-direction:row; align-items:center; justify-content:space-between; }
	.hero__copy{ flex:1 1 60%; }
	.hero__device{ flex:0 0 auto; }
	.squares-mark{ width:200px; height:200px; }
}

/* Lock body scroll while the mobile menu is open */
@media (max-width:1039.98px){
	body.nav-open{ overflow:hidden; }
}

/* ---------- Entrance reveal (progressive enhancement) ----------
   The hidden state is gated behind `.js` (set by an inline <head> script). With
   JS disabled the class is never added, so ALL content stays visible — nothing
   meaningful is hidden behind a reveal. JS adds .is-visible; see reveal.js. */
.js [data-reveal]{
	opacity:0;
	transform:translateY(16px);
	transition:opacity .55s ease, transform .55s ease;
	will-change:opacity, transform;
}
.js [data-reveal].is-visible{ opacity:1; transform:none; }
.js [data-reveal][data-reveal-delay="1"]{ transition-delay:.08s; }
.js [data-reveal][data-reveal-delay="2"]{ transition-delay:.16s; }
.js [data-reveal][data-reveal-delay="3"]{ transition-delay:.24s; }

/* Square-wipe reveal (the brand device). Text is always present in the DOM;
   only the reveal animates. clip-path inset wipes L→R (R→L under RTL). */
.js [data-reveal="wipe"]{ opacity:1; transform:none; clip-path:inset(0 100% 0 0); transition:clip-path .7s cubic-bezier(.7,0,.2,1); }
.js [data-reveal="wipe"].is-visible{ clip-path:inset(0); }
[dir="rtl"] .js [data-reveal="wipe"]{ clip-path:inset(0 0 0 100%); }

/* Square frame reveal (top→bottom clip). */
.js [data-reveal="frame"]{ opacity:1; transform:none; clip-path:inset(0 0 100% 0); transition:clip-path .8s cubic-bezier(.7,0,.2,1); }
.js [data-reveal="frame"].is-visible{ clip-path:inset(0); }

/* Respect reduced-motion — never hide content; show the final state instantly. */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
	.js [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
}