/*
Theme Name: iHelp Media
Theme URI: https://ihelpmedia.com
Description: The iHelp Media product site — Ollie wearing the family identity: ink and ivory, one gold hairline, IBM Plex Arabic, and galleries given room to breathe.
Author: iHelp
Author URI: https://ihelp.co
Template: ollie
Version: 1.1.1
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: ihelp-media-site
*/

/* ---------------------------------------------------------------------
 * Type: IBM Plex, self-hosted, Arabic and Latin from one family stack.
 * ------------------------------------------------------------------- */
@font-face { font-family: "Plex"; font-weight: 400; font-display: swap; src: url("assets/fonts/plex-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 600; font-display: swap; src: url("assets/fonts/plex-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 700; font-display: swap; src: url("assets/fonts/plex-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 400; font-display: swap; src: url("assets/fonts/plex-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex"; font-weight: 600; font-display: swap; src: url("assets/fonts/plex-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex"; font-weight: 700; font-display: swap; src: url("assets/fonts/plex-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

:root {
	--ihm-ink: #17181c;
	--ihm-gold: #f4c020;
	--ihm-gold-dark: #d9a400;
	--ihm-wash: #fef7e0;
	--ihm-line: #e9e7e1;
	--ihm-muted: #6b6f76;
}

/* Arabic never carries tracking — the letters must stay joined. */
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; }

/* ---------------------------------------------------------------------
 * Header: quiet, with the gold mark leading the wordmark.
 * ------------------------------------------------------------------- */
.wp-block-site-title a {
	align-items: center;
	display: inline-flex;
	gap: 10px;
	text-decoration: none;
}
.wp-block-site-title a::before {
	background: var(--ihm-gold);
	border-radius: 9px;
	color: var(--ihm-ink);
	content: "i";
	display: grid;
	font-size: 18px;
	font-weight: 700;
	height: 34px;
	place-items: center;
	width: 34px;
}

/* ---------------------------------------------------------------------
 * Sections: the seeded pages are groups; give them rhythm and let the
 * washed ones read as bands across the full width.
 * ------------------------------------------------------------------- */
/* The page's own content wrapper is what boxed the bands in. Widen the
   wrapper itself — no viewport tricks, so a scrollbar can never push the
   colour off the edge — and let each band own its inner measure. */
body.page .wp-block-post-content {
	max-width: none;
	padding-inline: 0;
}
.wp-site-blocks .wp-block-group.has-background {
	margin-block: 0;
	margin-inline: 0;
	max-width: none;
	padding-inline: max(24px, calc((100% - 1180px) / 2));
	width: 100%;
}
/* Inside a band, content keeps the wide measure and stays centred. */
.wp-site-blocks .wp-block-group.has-background > * {
	margin-inline: auto;
	max-width: 1180px;
}
/* Bands alternate, so consecutive ivory sections still read apart. */
.wp-site-blocks .wp-block-group.has-background + .wp-block-group.has-background {
	border-top: 1px solid var(--ihm-line);
}

/* The eyebrow-free hero: first heading on the page carries the weight. */
.home .wp-block-group.has-background:first-of-type h1,
.wp-block-post-content > .wp-block-group:first-child h1 {
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	line-height: 1.2;
	max-width: 18ch;
}
.home .wp-block-group.has-background:first-of-type p,
.wp-block-post-content > .wp-block-group:first-child > p {
	color: var(--ihm-muted);
	font-size: 1.15rem;
	max-width: 60ch;
}

/* Buttons: ink pills, gold on hover — the family's hand. */
.wp-block-button__link {
	border-radius: 999px;
	font-weight: 600;
	padding: 0.85em 1.9em;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--ihm-ink);
	color: #fff;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--ihm-gold);
	color: var(--ihm-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1.5px solid var(--ihm-ink);
	color: var(--ihm-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--ihm-ink);
	color: #fff;
}

/* Section headings sit under a short gold hairline — the only ornament. */
.wp-block-group.has-background > h2:first-child,
.wp-block-group.has-background > .wp-block-heading:first-child {
	padding-top: 18px;
	position: relative;
}
.wp-block-group.has-background > h2:first-child::before,
.wp-block-group.has-background > .wp-block-heading:first-child::before {
	background: var(--ihm-gold);
	content: "";
	height: 3px;
	inset-block-start: 0;
	inset-inline-start: 0;
	position: absolute;
	width: 46px;
}

/* Feature columns: card-like without shouting. */
.wp-block-columns .wp-block-column > h3 {
	font-size: 1.25rem;
	margin-bottom: 0.4em;
}
.wp-block-columns .wp-block-column > p {
	color: var(--ihm-muted);
}

/* Product screenshots: framed like a window, never edge-to-edge. */
.ihelp-screenshot img {
	border: 1px solid var(--ihm-line);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(23, 24, 28, 0.09);
	width: 100%;
}
.ihelp-screenshot { margin-block: 0; }

/* Hero collage: images crop to a band and round like the brand. */
.wp-block-columns .wp-block-image img {
	border-radius: 16px;
}

/* ---------------------------------------------------------------------
 * Galleries: the star of the site — full width, generous, no chrome.
 * ------------------------------------------------------------------- */
.ihelp-gallery {
	margin-block: 8px 4px;
}
.ihelp-gallery img {
	border-radius: 14px;
}

/* Posts: an event reads like a story, centred and unhurried. */
.single .wp-block-post-title {
	font-size: clamp(2rem, 4vw, 2.8rem);
	text-align: center;
}
.single .wp-block-post-content > p:first-of-type {
	color: var(--ihm-muted);
	font-size: 1.1rem;
	margin-inline: auto;
	max-width: 62ch;
	text-align: center;
}

/* ---------------------------------------------------------------------
 * Footer: an ink slab closing the page — three quiet columns, one rule.
 * ------------------------------------------------------------------- */
.ihelp-footer { color: #b9bcc2; }
.ihelp-footer .wp-block-site-title a { color: #fff; }
.ihelp-footer-note { color: #9a9da5; font-size: 0.95rem; max-width: 42ch; margin-block: 12px 20px; }
.ihelp-footer-h { color: #fff; font-size: 0.95rem; margin-bottom: 12px; }
.ihelp-footer-list { list-style: none; margin: 0; padding: 0; }
.ihelp-footer-list li { margin-bottom: 9px; }
.ihelp-footer-list a { color: #b9bcc2; font-size: 0.95rem; text-decoration: none; }
.ihelp-footer-list a:hover { color: var(--ihm-gold); }
.ihelp-footer .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: #4a4d55;
	color: #fff;
}
.ihelp-footer .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--ihm-gold);
	border-color: var(--ihm-gold);
	color: var(--ihm-ink);
}
.ihelp-footer-rule { background: #2c2e35; border: 0; height: 1px; margin-block: 36px 22px; }
.ihelp-footer-fine { color: #7d818a; font-size: 0.85rem; margin: 0; }

/* ---------------------------------------------------------------------
 * Prices in Arabic: each figure is its own island, so the bidi algorithm
 * can never braid "50 GB" and "300 ريال" into one scrambled run.
 * ------------------------------------------------------------------- */
.ihelp-plan-row {
	align-items: baseline;
	border-top: 1px solid var(--ihm-line);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding-block: 14px;
}
.ihelp-plan-row:first-of-type { border-top: 0; }
.ihelp-plan-row .size { font-size: 1.05rem; font-weight: 700; }
.ihelp-plan-row .cost { color: var(--ihm-muted); font-variant-numeric: tabular-nums; }
.ihelp-plan-row .cost b { color: var(--ihm-ink); font-size: 1.15rem; }


/* Columns inside a band: even gutters and vertical air on small screens. */
.wp-block-group.has-background .wp-block-columns {
	gap: 34px;
	margin-block-start: 30px;
}

/* Gallery blocks fill the band's full measure. */
.wp-block-group.has-background .ihelp-gallery {
	max-width: 1180px;
}