/* ==========================================================================
   Home Improvement KSA — brand styles for Kadence
   Colours follow the Kadence global palette (set in the Customizer); the
   fallbacks below are the same values, so the patterns still render if the
   palette has not been set yet.
   ========================================================================== */

:root {
	--hik-green: var(--global-palette1, #1E5C4F);
	--hik-green-dark: var(--global-palette2, #174A3F);
	--hik-ink: var(--global-palette3, #1D2A26);
	--hik-text: var(--global-palette4, #2C3A35);
	--hik-muted: var(--global-palette5, #4B5B55);
	--hik-subtle: var(--global-palette6, #8FA39A);
	--hik-line: var(--global-palette7, #D9E2DD);
	--hik-soft: var(--global-palette8, #F1F5F2);
	--hik-white: var(--global-palette9, #FFFFFF);
	--hik-gold: #F2B33D;
	--hik-sadu: #A3262A;
	--hik-sand: #F6F1E7;
	--hik-sand-line: #E6DDCB;
	--hik-mint: #E2EFE9;
	--hik-on-green: #D4E7DF;
	--hik-radius: 16px;
	--hik-radius-sm: 12px;
	--hik-wrap: 1240px;
	--hik-gutter: clamp(16px, 3vw, 24px);
	--hik-radius-lg: 20px;
	--hik-shadow-sm: 0 1px 2px rgba(29, 42, 38, .06), 0 2px 8px rgba(29, 42, 38, .04);
	--hik-shadow-md: 0 8px 24px rgba(29, 42, 38, .08);
	/* Type scale (mobile → desktop) */
	--hik-fs-xs: 13px;
	--hik-fs-sm: 15px;
	--hik-fs-base: 17px;
	--hik-fs-lg: clamp(18px, 1.6vw, 20px);
	--hik-fs-h3: clamp(18px, 1.8vw, 21px);
	--hik-fs-h2: clamp(23px, 2.6vw, 32px);
	--hik-fs-h1: clamp(30px, 4.2vw, 52px);
	/* Spacing scale (4px base) */
	--hik-space-1: 4px;
	--hik-space-2: 8px;
	--hik-space-3: 12px;
	--hik-space-4: 16px;
	--hik-space-5: 24px;
	--hik-space-6: 32px;
	--hik-space-7: 48px;
	--hik-space-8: 64px;
	--hik-font-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
	--hik-font-head: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', Tahoma, sans-serif;
	--hik-sadu-stripe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6'%3E%3Crect width='16' height='6' fill='%23A3262A'/%3E%3Cpath d='M0 6L4 0L8 6Z M8 6L12 0L16 6Z' fill='%23F2B33D'/%3E%3C/svg%3E");
}

/* --- Base typography ---------------------------------------------------- */

body,
.editor-styles-wrapper {
	font-family: var(--hik-font-body);
	color: var(--hik-text);
	line-height: 1.8;
}

h1, h2, h3, h4,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
	font-family: var(--hik-font-head);
	color: var(--hik-ink);
	line-height: 1.5;
	font-weight: 700;
}

a { color: var(--hik-green); }
a:hover, a:focus { color: var(--hik-green-dark); }

/* Accessible hidden text (Kadence ships this too; kept here as a safety net) */
.screen-reader-text:not(:focus) {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

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

/* --- Header & footer accents (Kadence) ---------------------------------- */

#masthead { position: relative; }
#masthead::after,
.site-footer::before,
.hik-sadu {
	content: "";
	display: block;
	height: 6px;
	background-image: var(--hik-sadu-stripe);
	background-repeat: repeat-x;
}

/* Mobile category chips (Kadence "Mobile HTML" element) */
.hik-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	white-space: nowrap;
	padding: 4px 0 8px;
	scrollbar-width: none;
}
.hik-chips::-webkit-scrollbar { display: none; }
.hik-chips a {
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--hik-soft);
	color: var(--hik-ink);
	text-decoration: none;
	font-size: 14px;
}

/* --- Classic-theme group wrapper ------------------------------------------
   Without theme.json layout support WordPress wraps every Group's content in
   .wp-block-group__inner-container. Make that wrapper transparent so our
   flex/grid groups lay out the same with or without it. */
[class*="hik-"] > .wp-block-group__inner-container { display: contents; }

/* --- Section shell -------------------------------------------------------- */

/* The extra selector beats Kadence's ".entry-content .alignfull { padding: 0 }",
   which otherwise removes the side gutter below the 1240px wrap width. */
.hik-section,
.entry-content .alignfull.hik-section {
	padding: clamp(40px, 6vw, 64px) var(--hik-gutter);
}
.hik-section > .hik-wrap,
.hik-wrap {
	max-width: var(--hik-wrap);
	margin-inline: auto;
}
.hik-section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.hik-section-head h2 {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 30px);
}
.hik-section-head p { margin: 0; }
.hik-more a,
a.hik-more {
	display: inline-block;
	padding: 10px 0;
	font-weight: 600;
	text-decoration: none;
	font-size: 15px;
}
.hik-kicker {
	margin: 0 0 8px;
	color: var(--hik-green);
	font-weight: 600;
	font-size: 15px;
}
.hik-bg-sand { background: var(--hik-sand); }
.hik-bg-soft { background: var(--hik-soft); }

/* --- Hero ------------------------------------------------------------------ */

.hik-hero .hik-hero-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: stretch;
}
.hik-hero-text {
	flex: 999 1 460px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hik-hero h1 {
	margin: 0 0 16px;
	font-size: clamp(30px, 4.2vw, 54px);
	line-height: 1.45;
	text-wrap: balance;
}
.hik-hero-lead {
	margin: 0 0 28px;
	color: var(--hik-muted);
	font-size: clamp(16px, 1.5vw, 19px);
	max-width: 34em;
}

/* Search block inside the hero */
.hik-search { max-width: 580px; margin: 0; }
.hik-search .wp-block-search__inside-wrapper {
	gap: 8px;
	border: 0;
	padding: 0;
	flex-wrap: wrap;
}
.hik-search .wp-block-search__input {
	flex: 1 1 220px;
	min-width: 0;
	height: 54px;
	padding: 0 18px;
	border: 1px solid #D6CBB4;
	border-radius: var(--hik-radius-sm);
	background: var(--hik-white);
	font: inherit;
	font-size: 16px;
	color: var(--hik-ink);
}
/* .wp-block-search.hik-search: Kadence's content.css styles
   ".wp-block-search .wp-block-search__button:not(.has-background)" (0,3,0),
   which would otherwise win over a two-class selector. */
.wp-block-search.hik-search .wp-block-search__button {
	height: 54px;
	margin: 0;
	padding: 0 28px;
	border: 0;
	border-radius: var(--hik-radius-sm);
	background: var(--hik-green);
	color: var(--hik-white);
	font: inherit;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
}
.wp-block-search.hik-search .wp-block-search__button:hover,
.wp-block-search.hik-search .wp-block-search__button:focus {
	background: var(--hik-green-dark);
	color: var(--hik-white);
}

.hik-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 16px 0 0;
	font-size: 14px;
}
.hik-tags p { margin: 0; color: var(--hik-muted); }
.hik-tags .wp-block-buttons { gap: 8px; margin: 0; }
.hik-tags .wp-block-button__link {
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid #D6CBB4;
	background: var(--hik-white);
	color: var(--hik-ink);
	font-size: 14px;
	font-weight: 400;
}

/* Cover story (query loop: 1 sticky post) */
.hik-cover {
	flex: 1 1 380px;
	min-width: 0;
	margin: 0;
}
.hik-cover .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.hik-cover .wp-block-post {
	height: 100%;
	background: var(--hik-white);
	border: 1px solid var(--hik-sand-line);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.hik-cover .wp-block-post-featured-image { margin: 0; }
.hik-cover .wp-block-post-featured-image img { width: 100%; height: 260px; object-fit: cover; display: block; }
.hik-cover .hik-cover-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.hik-cover .wp-block-post-title { margin: 0; font-size: 22px; line-height: 1.6; }
.hik-cover .wp-block-post-title a { color: var(--hik-ink); text-decoration: none; }
.hik-cover .wp-block-post-excerpt { margin: 0; color: var(--hik-muted); font-size: 15px; }
.hik-cover .wp-block-post-excerpt__excerpt { margin: 0; }

/* --- Shared meta in cards ---------------------------------------------- */

.hik-term,
.hik-term a {
	margin: 0;
	color: var(--hik-green);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.hik-meta { margin: 0; color: var(--hik-muted); font-size: 13px; }

/* --- Categories grid ---------------------------------------------------- */

.hik-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
	gap: 16px;
}
.hik-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	border: 1px solid var(--hik-line);
	border-radius: var(--hik-radius);
	background: var(--hik-white);
	color: var(--hik-ink);
	transition: border-color .15s, transform .15s;
}
.hik-cat h3,
.hik-cat p { margin: 0; }
.hik-cat h3 { font-size: 17px; line-height: 1.5; }
.hik-cat h3 a { color: var(--hik-ink); text-decoration: none; }
/* Whole card is clickable through the heading link */
.hik-cat h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hik-cat:hover,
.hik-cat:focus-within { border-color: var(--hik-green); transform: translateY(-2px); }
/* Category icons: CSS masks (no custom-HTML blocks needed) */
.hik-cat::before {
	content: "";
	width: 50px;
	height: 50px;
	border-radius: 13px;
	background: var(--hik-mint);
}
.hik-cat::after {
	content: "";
	position: absolute;
	top: 34px;
	inset-inline-start: 34px;
	width: 26px;
	height: 26px;
	background: var(--hik-green);
	-webkit-mask: var(--hik-cat-icon) center / contain no-repeat;
	mask: var(--hik-cat-icon) center / contain no-repeat;
	pointer-events: none;
}
.hik-cat--kitchen { --hik-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h16v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z'/%3E%3Cpath d='M2 10h2M20 10h2M9 6.5C9 5 10.3 4 12 4s3 1 3 2.5'/%3E%3C/svg%3E"); }
.hik-cat--storage { --hik-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4v10l-9 4-9-4z'/%3E%3Cpath d='M3 7l9 4 9-4M12 11v10'/%3E%3C/svg%3E"); }
.hik-cat--cleaning { --hik-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 8h5l1 3v9a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-7z'/%3E%3Cpath d='M9 8V5h4M13 5h3l1 2M19 4l1.5-.8M19 7h2'/%3E%3C/svg%3E"); }
.hik-cat--appliances { --hik-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3Cpath d='M8 6.5h2'/%3E%3C/svg%3E"); }
.hik-cat--decor { --hik-cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
@media (max-width: 600px) {
	.hik-cat::after { top: 28px; inset-inline-start: 28px; }
}
.hik-cat .hik-cat-desc { color: var(--hik-muted); font-size: 14px; line-height: 1.7; }
@media (max-width: 600px) {
	.hik-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.hik-cat { padding: 16px; }
}

/* --- Latest posts grid (query loop) ----------------------------------- */

.hik-latest .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
	gap: 28px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hik-latest .wp-block-post { display: flex; flex-direction: column; gap: 10px; }
.hik-latest .wp-block-post-featured-image { margin: 0; border-radius: 14px; overflow: hidden; background: var(--hik-sand); }
.hik-latest .wp-block-post-featured-image img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block; }
.hik-latest .wp-block-post-title { margin: 0; font-size: 17px; line-height: 1.6; }
.hik-latest .wp-block-post-title a { color: var(--hik-ink); text-decoration: none; }
.hik-latest .wp-block-post-title a:hover { color: var(--hik-green); }

/* --- Featured guides (query loop: sticky posts) ----------------------- */

/* «Guides worth saving» needs 2+ sticky posts; until then the whole section is hidden
   instead of showing an empty band (e.g. at launch with 3 articles). */
.hik-section:has(.hik-featured > .wp-block-query-no-results) { display: none; }

.hik-featured .wp-block-post-template {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	grid-auto-rows: auto;
	gap: 16px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hik-featured .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px;
	background: var(--hik-white);
	border: 1px solid var(--hik-line);
	border-radius: var(--hik-radius);
}
.hik-featured .wp-block-post:first-child {
	grid-row: span 3;
	justify-content: flex-end;
	gap: 12px;
	padding: 32px;
	min-height: 340px;
	background: var(--hik-green);
	border-color: var(--hik-green);
	color: var(--hik-white);
}
.hik-featured .wp-block-post-title { margin: 0; font-size: 16px; line-height: 1.6; }
.hik-featured .wp-block-post-title a { color: var(--hik-ink); text-decoration: none; }
.hik-featured .wp-block-post:first-child .wp-block-post-title { font-size: clamp(22px, 2.4vw, 30px); }
.hik-featured .wp-block-post:first-child .wp-block-post-title a { color: var(--hik-white); }
/* Lighter gold: brand gold is 4.18:1 on green, this is 4.90:1 (WCAG AA for small text). */
.hik-featured .wp-block-post:first-child .hik-term a,
.hik-featured .wp-block-post:first-child .hik-term { color: #F7C664; }
.hik-featured .wp-block-post:first-child .hik-meta,
.hik-featured .wp-block-post:first-child .wp-block-post-excerpt { color: var(--hik-on-green); }
.hik-featured .wp-block-post-excerpt { display: none; margin: 0; }
.hik-featured .wp-block-post:first-child .wp-block-post-excerpt { display: block; }
.hik-featured .wp-block-post-excerpt__excerpt { margin: 0; }
@media (max-width: 781px) {
	.hik-featured .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
	.hik-featured .wp-block-post:first-child { grid-row: auto; min-height: 260px; padding: 24px; }
}

/* --- Methodology band ---------------------------------------------------- */

.hik-method { background: var(--hik-green); color: var(--hik-white); }
.hik-method h2 { color: var(--hik-white); margin: 0 0 8px; font-size: clamp(22px, 2.4vw, 30px); }
.hik-method .hik-method-lead { margin: 0 0 32px; color: var(--hik-on-green); max-width: 40em; }
.hik-steps {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: 24px;
	margin: 0;
}
.hik-step { display: flex; flex-direction: column; gap: 8px; }
.hik-step h3,
.hik-step p { margin: 0; }
.hik-step-num {
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: 999px;
	background: var(--hik-gold);
	color: var(--hik-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}
.hik-step h3 { margin: 0; color: var(--hik-white); font-family: var(--hik-font-body); font-size: 17px; font-weight: 600; }
.hik-step p { margin: 0; color: var(--hik-on-green); font-size: 15px; }
.hik-method .wp-block-buttons { margin-top: 32px; }
.hik-method .wp-block-button__link {
	background: var(--hik-white);
	color: var(--hik-green);
	border-radius: var(--hik-radius-sm);
	font-weight: 600;
	padding: 12px 22px;
}

/* --- Newsletter (enable when GetResponse is connected) ------------------ */

.hik-newsletter {
	border: 1px solid var(--hik-sand-line);
	border-radius: 20px;
	background: var(--hik-sand);
	padding: 32px;
}
.hik-newsletter h2 { margin: 0 0 6px; font-size: 22px; }
.hik-newsletter p { margin: 0; color: var(--hik-muted); }

/* --- Affiliate note -------------------------------------------------------- */

.hik-disclosure { margin: 16px 0 0; color: var(--hik-muted); font-size: 13px; }

/* --- Footer columns (Kadence footer widget area) ------------------------- */

.hik-footer { color: #DCE5E0; }
.hik-footer .hik-footer-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
.hik-footer .hik-footer-about { flex: 2 1 280px; }
.hik-footer .hik-footer-col { flex: 1 1 160px; }
.hik-footer h2,
.hik-footer h3 {
	margin: 0 0 10px;
	color: var(--hik-white);
	font-family: var(--hik-font-body);
	font-size: 16px;
	font-weight: 600;
}
.hik-footer p { margin: 0; font-size: 15px; color: #DCE5E0; }
.hik-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.hik-footer a { color: #DCE5E0; text-decoration: none; }
.hik-footer a:hover { color: var(--hik-white); text-decoration: underline; }
.hik-footer .hik-footer-brand { font-family: var(--hik-font-head); color: var(--hik-white); font-size: 17px; margin: 0 0 12px; }
.hik-footer .hik-footer-note {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid #34433E;
	font-size: 14px;
}

/* --- Small screens ---------------------------------------------------------- */

@media (max-width: 600px) {
	.hik-hero .hik-hero-grid { gap: 28px; }
	.hik-cover .wp-block-post-featured-image img { height: 200px; }
	.hik-newsletter { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.hik-cat { transition: none; }
	.hik-cat:hover { transform: none; }
}

/* Small phones (≤ 380px, e.g. 360px Android): keep the site name on one line
   next to the search and menu buttons. */
@media (max-width: 380px) {
	#mobile-header .site-title { font-size: 14px; white-space: nowrap; }
}