/*
* Makhazin El Eulma — design layer on top of LittleLink's style.css.
* Edit colors and shapes HERE (tokens in :root), not in style.css.
* Brand colors were measured from brand-source/logo-original.png.
*/

/* 1. Tokens — light theme (white page, yellow logo card, white link cards)
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
	/* Brand palette */
	--brand-yellow:#FCB51F;
	--brand-ink:#111111;
	--brand-grey:#777777;
	--brand-white:#FFFFFF;

	/* Page */
	--page-bg:#FFFFFF;
	--page-ink:var(--brand-ink);
	--page-muted:#5A5A5A;          /* 6.9:1 on white */
	--chip-bg:#F2F2F2;

	/* Link cards */
	--card-bg:#FFFFFF;
	--card-ink:var(--brand-ink);
	--card-sub:#666666;            /* 5.7:1 on white */
	--card-border:#E6E6E6;
	--card-shadow:0 1px 2px rgba(0,0,0,0.06),0 8px 18px -10px rgba(0,0,0,0.25);

	--press-duration:420ms;        /* tap animation; keep in sync with js/press.js */

	--focus-ring:var(--brand-ink);
	--radius:16px;
}

/* 2. Tokens — dark theme (black page, yellow logo card)
   Same values twice: forced dark + automatic dark. Keep both blocks in sync.
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
:root.theme-dark {
	--page-bg:#111111;
	--page-ink:#F5F5F5;
	--page-muted:#BDBDBD;
	--chip-bg:#1F1F1F;
	--card-bg:#1C1C1C;
	--card-ink:#FFFFFF;
	--card-sub:#A8A8A8;
	--card-border:#2C2C2C;
	--card-shadow:none;
	--focus-ring:var(--brand-yellow);
}
@media (prefers-color-scheme:dark) {
	:root.theme-auto {
		--page-bg:#111111;
		--page-ink:#F5F5F5;
		--page-muted:#BDBDBD;
		--chip-bg:#1F1F1F;
		--card-bg:#1C1C1C;
		--card-ink:#FFFFFF;
		--card-sub:#A8A8A8;
		--card-border:#2C2C2C;
		--card-shadow:none;
		--focus-ring:var(--brand-yellow);
	}
}

/* 3. Page (selectors match style.css specificity so these win)
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
:root[class] body {
	background-color:var(--page-bg);
	color:var(--page-ink);
}
:root[class] :focus-visible {
	outline:3px solid var(--focus-ring);
	outline-offset:3px;
}
.container {
	max-width:30rem;
	padding-top:var(--spacing-l);
}
@media (min-width:25rem) {
	.container { width:100%; }
}

/* 4. Profile: logo lockup + tagline + chips
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.profile {
	margin-bottom:var(--spacing-l);
}
.brand-avatar {
	display:grid;
	place-items:center;
	width:clamp(7.5rem,36vw,9.5rem);
	aspect-ratio:1;
	margin:0 auto var(--spacing-s);
	border-radius:50%;
	background:var(--brand-yellow);
	box-shadow:0 0 0 4px var(--page-bg),0 0 0 6px var(--brand-yellow),0 10px 24px -10px rgba(0,0,0,0.45);
}
.brand-mark {
	width:64%;
	height:auto;
	margin-top:-4%;               /* optical centering: the roof is lighter than the ground line */
}
.brand-name {
	margin:0 auto;
	display:inline-flex;
	flex-direction:column;
	align-items:center;
	color:var(--page-ink);
	line-height:1;
}
.brand-latin {
	font-size:clamp(2rem,10vw,2.75rem);
	font-weight:800;
	letter-spacing:0.04em;
}
.brand-arabic {
	display:flex;
	align-items:center;
	gap:0.6rem;
	width:100%;
	margin-top:0.4rem;
	font-size:clamp(1.15rem,5.5vw,1.45rem);
	font-weight:800;
}
/* the lines on both sides of "مخازن العلمة", like the logo (yellow: white would vanish on a white page) */
.brand-arabic::before,
.brand-arabic::after {
	content:"";
	flex:1;
	height:3px;
	min-width:1rem;
	border-radius:2px;
	background:var(--brand-yellow);
}
.container .tagline {
	margin:var(--spacing-m) 0 var(--spacing-s);
	font-size:1.1rem;
	line-height:1.7;
	color:var(--page-ink);
}
.tagline strong { font-weight:800; }
.chips {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:0.5rem;
	margin:0;
}
.chips li {
	margin:0;
	padding:0.2rem 0.85rem;
	border-radius:999px;
	background:var(--chip-bg);
	font-size:0.85rem;
	font-weight:700;
	color:var(--page-ink);
}

/* 4b. Circles under the name (contact + follow)
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.social-row {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:0.65rem;
	margin:var(--spacing-s) 0 0;
	padding:0;
}
.social-row + .social-row { margin-top:0.65rem; }
.social-row li { margin:0; }
.social-link {
	--button-text:var(--page-ink);   /* style.css uses it for <button>:hover too */
	position:relative;
	overflow:hidden;
	isolation:isolate;
	display:grid;
	place-items:center;
	width:3rem;
	height:3rem;
	min-height:0;
	margin:0;
	padding:0;
	border-radius:50%;
	border:1px solid var(--card-border);
	background:var(--card-bg);
	color:var(--button-text);
	cursor:pointer;
	transition:transform 0.18s ease,
	           border-color var(--press-duration) ease,color var(--press-duration) ease;
}
.social-link:hover { transform:translateY(-2px); }
/* beat style.css dark-theme link color (:root.theme-auto a:not(.button), blue) */
:root[class] a.social-link:not(.button) { color:var(--button-text); }
/* the icon is a one-color shape (mask) so it can turn white when tapped */
.social-icon {
	width:1.3rem;
	height:1.3rem;
	background:currentColor;
	-webkit-mask:var(--icon) center/contain no-repeat;
	mask:var(--icon) center/contain no-repeat;
}
/* Circles stay black & white (owner choice 2026-11-09): no platform colors, even when tapped.
   Tap = the circle inverts (light: white -> black, dark: black -> white). */
.social-row .social-link {
	--brand-color:var(--page-ink);
	--brand-solid:var(--page-ink);
	--brand-on:var(--page-bg);
}
.social-link.is-pressed {
	--button-text:var(--brand-on,#FFFFFF);
	border-color:var(--brand-solid,var(--brand-color));
	transform:scale(0.94);
}

/* 4c. Phone numbers: bottom sheet opened by the phone circle (HTML popover)
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.sheet {
	/* old browsers without popover: shown as a normal block at the end of the page */
	max-width:30rem;
	margin:var(--spacing-l) auto 0;
	padding:1rem;
	border:1px solid var(--card-border);
	border-radius:var(--radius);
	background:var(--page-bg);
	color:var(--page-ink);
}
.sheet:popover-open {
	position:fixed;
	inset:auto 0 0 0;
	width:min(100%,30rem);
	margin:0 auto;
	display:flex;
	flex-direction:column;
	gap:0.75rem;
	padding:1.25rem 1rem calc(1rem + env(safe-area-inset-bottom));
	border:0;
	border-radius:24px 24px 0 0;
	box-shadow:0 -12px 32px rgba(0,0,0,0.25);
	animation:sheet-up 0.25s ease-out;
}
.sheet::backdrop { background:rgba(0,0,0,0.45); }
@keyframes sheet-up { from { transform:translateY(100%); } }
.container .sheet-title {
	margin:0 0 0.25rem;
	font-size:1.1rem;
	font-weight:800;
	text-align:center;
}
.sheet-close {
	--button-text:var(--page-ink);
	font:inherit;
	font-weight:700;
	width:100%;
	min-height:3rem;
	margin:0;
	padding:0.5rem 1rem;
	border:1px solid var(--card-border);
	border-radius:var(--radius);
	background:var(--chip-bg);
	color:var(--button-text);
	cursor:pointer;
}

/* 5. Link cards (override LittleLink's .button)
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.button-stack {
	display:flex;
	flex-direction:column;
	gap:0.75rem;
}
.stack-title {
	margin:var(--spacing-s) 0 0;
	font-size:0.95rem;
	font-weight:800;
	text-align:start;
	color:var(--page-muted);
}
.button {
	width:100%;
	min-height:4rem;
	margin:0;
	padding:0.65rem 0.85rem;
	justify-content:flex-start;
	gap:0.85rem;
	text-align:start;
	font-size:1.05rem;
	--button-background:var(--card-bg);
	--button-text:var(--card-ink);
	--button-border:1px solid var(--card-border);
	border-radius:var(--radius);
	box-shadow:var(--card-shadow);
	position:relative;
	overflow:hidden;
	isolation:isolate;            /* keeps the ripple under the text but over the card */
	transition:transform 0.18s ease,box-shadow 0.18s ease,filter 0.18s ease,
	           border-color var(--press-duration) ease,color var(--press-duration) ease;
}
.button:hover {
	transform:translateY(-2px);
	filter:brightness(1.08);
}
.button:active { transform:translateY(0); }

/* forward arrow at the end of each card: a corner (left+bottom borders)
   rotated 45deg points left = forward in RTL; 225deg points right for LTR */
.button::after {
	content:"";
	width:0.55rem;
	height:0.55rem;
	margin-inline-start:auto;
	border-left:2.5px solid currentColor;
	border-bottom:2.5px solid currentColor;
	transform:rotate(45deg);
	opacity:0.6;
	flex-shrink:0;
}
[dir="ltr"] .button::after { transform:rotate(225deg); }

.badge {
	display:grid;
	place-items:center;
	width:2.6rem;
	height:2.6rem;
	border-radius:12px;
	background:var(--badge-bg,#333333);
	flex-shrink:0;
}
.badge .icon {
	width:1.4rem;
	height:1.4rem;
	margin:0;
}
.label {
	display:flex;
	flex-direction:column;
	align-items:flex-start;       /* = right side in RTL, also for LTR parts like phone digits */
	font-weight:700;
	line-height:1.35;
}
.label small {
	font-size:0.82rem;
	font-weight:400;
	color:var(--card-sub);
}

/* Main call-to-action: bigger, same colors as the other cards */
.button-primary {
	min-height:4.75rem;
	font-size:1.2rem;
}

/* Tap animation (js/press.js adds .is-pressed and sets --x/--y/--ripple):
   a circle in the platform color grows from the tap point, then the link opens.
   Shared by the big cards (.button) and the circles (.social-link). */
.button::before,
.social-link::before {
	content:"";
	position:absolute;
	z-index:-1;
	left:var(--x,50%);
	top:var(--y,50%);
	width:var(--ripple,200%);
	aspect-ratio:1;
	border-radius:50%;
	background:var(--brand-color,var(--brand-ink));
	transform:translate(-50%,-50%) scale(0);
	pointer-events:none;
}
.button.is-pressed::before,
.social-link.is-pressed::before {
	transform:translate(-50%,-50%) scale(1);
	transition:transform var(--press-duration) cubic-bezier(0.2,0.7,0.3,1);
}
.button.is-pressed {
	--button-text:var(--brand-on,#FFFFFF);
	--button-border:1px solid var(--brand-solid,var(--brand-color));
	transform:scale(0.98);
}
.button.is-pressed .label small { color:inherit; opacity:0.85; }
.button.is-pressed .badge { box-shadow:0 0 0 2px rgba(255,255,255,0.75); }  /* icon square stays visible on its own color */

/* Platform colors
   --badge-bg    : the small icon square on big cards (always visible)
   --brand-color : the tap ripple (can be a gradient)
   --brand-solid : the border while pressed (must be a plain color)
   --brand-on    : icon/text color while pressed (default white)
   --icon        : one-color icon for the circles
   ––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.brand-phone {
	--badge-bg:#111111;
	--brand-color:var(--page-ink);       /* our own line: black & white, no yellow (owner choice) */
	--brand-solid:var(--page-ink);
	--brand-on:var(--page-bg);
	--icon:url('../images/icons/generic-phone.svg');
}
.brand-whatsapp  { --badge-bg:#FFFFFF; --brand-color:#25D366; --icon:url('../images/icons/whatsapp-mono.svg'); }
.brand-telegram  { --badge-bg:#2AABEE; --brand-color:#2AABEE; --icon:url('../images/icons/telegram.svg'); }
.brand-messenger {
	--badge-bg:linear-gradient(45deg,#0099FF,#A033FF,#FF5280,#FF7061);
	--brand-color:var(--badge-bg);
	--brand-solid:#A033FF;
	--icon:url('../images/icons/messenger.svg');
}
.brand-tiktok    { --badge-bg:#000000; --brand-color:#000000; --icon:url('../images/icons/tiktok.svg'); }
.brand-instagram {
	--badge-bg:linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5);
	--brand-color:var(--badge-bg);
	--brand-solid:#D62976;
	--icon:url('../images/icons/instagram.svg');
}
.brand-facebook  { --badge-bg:#0866FF; --brand-color:#0866FF; --icon:url('../images/icons/facebook.svg'); }
.brand-tiktok .badge,
.brand-phone .badge { box-shadow:inset 0 0 0 1px #333333; }

/* 6. Footer
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
.site-footer {
	margin:var(--spacing-xl) 0;
	font-size:0.85rem;
	color:var(--page-muted);
}
.container .site-footer p {
	margin:0 0 0.25rem;
	font-size:0.85rem;
}
:root[class] .site-footer a:not(.button) {
	color:var(--page-ink);
	font-weight:700;
}

/* 7. Respect "reduce motion" on the phone
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (prefers-reduced-motion:reduce) {
	.button,
	.social-link { transition:none; }
	.button:hover,
	.button.is-pressed,
	.social-link:hover,
	.social-link.is-pressed { transform:none; }
	.button::before,
	.social-link::before { display:none; }
	.sheet:popover-open { animation:none; }
}