/*
Theme Name:  Dashmed
Theme URI:   https://dashmed-om.com
Author:      MartGain
Author URI:  https://martgain.com
Description: Bilingual (EN/AR) block theme for Dashmed Medical Solutions — an exclusive medical distributor in Oman. Full Site Editing, custom product catalogue, quote-request workflow, true RTL.
Version:     1.2.7
Requires at least: 6.7
Tested up to:      7.0
Requires PHP:      8.2
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dashmed
Tags:        full-site-editing, block-patterns, rtl-language-support, translation-ready, custom-colors, custom-logo
*/

/* Block themes load their design tokens from theme.json.
   Only genuinely global rules that theme.json cannot express live here. */

html { scroll-behavior: smooth; }

.dm-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--wp--preset--color--brand-blue); color: #fff;
  padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 700;
}
.dm-skip-link:focus { left: 0; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--wp--preset--color--brand-blue);
  outline-offset: 3px; border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ *
 * Icons
 * ------------------------------------------------------------------ */
.dm-i {
  width: 24px; height: 24px; flex: 0 0 auto; display: block;
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
  stroke-linejoin: round; fill: none;
}
[dir="rtl"] .dm-i--flip { transform: scaleX(-1); }

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */
.dm-header { position: sticky; top: 0; z-index: 600;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--wp--preset--color--line); transition: .3s; }
.dm-header.is-scrolled { box-shadow: 0 4px 22px rgba(12,23,39,.07); }

.dm-utility { font-size: .8rem; }
/* Direct child only. The descendant selector also matched the nested groups
   inside the row, so the padding was applied twice over and the bar grew. */
.dm-utility > .wp-block-group { padding-block: 7px; }
.dm-utility .wp-block-group .wp-block-group { padding-block: 0; }
.dm-utility__items { display: flex; gap: 26px; flex-wrap: wrap; }
.dm-utility__items a { display: inline-flex; align-items: center; gap: 8px;
  color: #A9B8CB; text-decoration: none; }
.dm-utility__items a:hover { color: #fff; }
.dm-utility .dm-i { width: 15px; height: 15px; opacity: .7; }

.dm-lang { display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 100px;
  padding: 6px 15px; color: #fff; font-weight: 700; font-size: .79rem;
  text-decoration: none; transition: .2s; }
.dm-lang:hover { background: var(--wp--preset--color--brand-blue);
  border-color: var(--wp--preset--color--brand-blue); color: #fff; }
.dm-lang .dm-i { width: 14px; height: 14px; }

/* Same again on the navigation row, and this one mattered more: the logo and
   the call to action each sit in their own group now, so a descendant rule
   added 13px above and below twice — the header was roughly a third taller
   than it needed to be on every page. */
.dm-nav > .wp-block-group { padding-block: 9px; }
.dm-nav .wp-block-group .wp-block-group { padding-block: 0; }
.dm-nav__right { gap: 10px; }

/* ------------------------------------------------------------------ *
 * Section furniture
 * ------------------------------------------------------------------ */
.dm-section-head { margin-bottom: var(--wp--preset--spacing--60); }
.dm-eyebrow { display: flex; align-items: center; gap: 8px;
  font-size: .775rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wp--preset--color--brand-green-aa);
  margin-bottom: 15px; }
.dm-eyebrow.has-text-align-center { justify-content: center; }
.dm-eyebrow::before { content: ""; width: 26px; height: 2px;
  background: var(--wp--preset--color--brand-green); border-radius: 2px; }

.dm-hero__lead { max-width: 565px; }
.dm-hero__image img { aspect-ratio: 1/1.05; object-fit: cover; width: 100%;
  box-shadow: var(--wp--preset--shadow--lift); }

.dm-page-hero .wp-block-post-title { margin-bottom: 16px; }

.dm-divisions { gap: 26px; }

.dm-breadcrumb { font-size: .85rem; color: var(--wp--preset--color--muted);
  margin-bottom: 16px; }

/* ------------------------------------------------------------------ *
 * Contact
 * ------------------------------------------------------------------ */
.dm-contact { display: flex; flex-direction: column; gap: 20px; }
.dm-contact__row { display: flex; align-items: flex-start; gap: 14px; }
.dm-contact__row .dm-i { width: 20px; height: 20px; margin-top: 3px; opacity: .8; }
.dm-contact__row a { color: inherit; text-decoration: none; }
.dm-contact__row a:hover { color: var(--wp--preset--color--brand-green); }
.dm-form-fallback { padding: 20px; border-radius: 14px;
  background: var(--wp--preset--color--surface-alt);
  border: 1px solid var(--wp--preset--color--line); }

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */
.dm-footer__logo img { filter: brightness(0) invert(1); opacity: .96; }
.dm-footer__nav a { text-decoration: none; font-size: .915rem; }
.dm-footer__nav a:hover { color: var(--wp--preset--color--brand-green); }
.dm-footer__rule { border-color: rgba(255,255,255,.08);
  margin-block: var(--wp--preset--spacing--50); }

/* ------------------------------------------------------------------ *
 * Floating WhatsApp
 * ------------------------------------------------------------------ */
.dm-wa { position: fixed; bottom: 26px; inset-inline-end: 26px;
  width: 58px; height: 58px; border-radius: 50%; background: #1FAF54;
  color: #fff; display: grid; place-items: center; z-index: 700;
  box-shadow: 0 10px 28px rgba(31,175,84,.42); transition: .26s; }
.dm-wa:hover { transform: scale(1.09); }
.dm-wa .dm-i { width: 28px; height: 28px; }

/* ------------------------------------------------------------------ *
 * Reveal on scroll
 * ------------------------------------------------------------------ */
.dm-reveal { opacity: 0; transform: translateY(26px);
  transition: .75s cubic-bezier(.2,.7,.3,1); }
.dm-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .dm-nav__cta { display: none; }
  .dm-utility__items { gap: 14px; }
  .dm-utility__items a:nth-child(n+2) { display: none; }
}

/* ------------------------------------------------------------------ *
 * Social row
 * ------------------------------------------------------------------ */
.dm-social { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.dm-social__link { width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; color: #B9C6D6;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  transition: .26s; }
a.dm-social__link:hover { background: var(--wp--preset--gradient--brand);
  color: #fff; transform: translateY(-3px); border-color: transparent; }
.dm-social__link .dm-i { width: 18px; height: 18px; }
.dm-social__link.is-empty { opacity: .32; cursor: default; }

/* ------------------------------------------------------------------ *
 * Layout width
 *
 * theme.json sets contentSize to the layout width (1260px), so sections are
 * the right width by default and only backgrounds need align:full. Prose is
 * narrowed where it lives, not globally.
 *
 * The only rules left here are the ones CSS has to own.
 * ------------------------------------------------------------------ */

/* The nav row must never wrap onto a second line on desktop. */
@media (min-width: 861px) {
  .dm-nav .wp-block-navigation__container { flex-wrap: nowrap; }
  .dm-nav .wp-block-navigation-item__content { white-space: nowrap; }
}

/* Four footer columns need room; below that they stack rather than cram. */
@media (max-width: 1100px) {
  .dm-footer__grid { flex-wrap: wrap !important; }
  .dm-footer__grid > .wp-block-column { flex-basis: 45% !important; }
}
@media (max-width: 700px) {
  .dm-footer__grid > .wp-block-column { flex-basis: 100% !important; }
}

/* ------------------------------------------------------------------ *
 * Contact panel
 *
 * The dark details card and the form column must sit at the same height
 * and keep their own padding; without this the heading rode up over the
 * rounded corner.
 * ------------------------------------------------------------------ */
.dm-contact-panel { align-self: stretch; }
.dm-contact-panel > :first-child { margin-block-start: 0; }
.dm-contact-panel .wp-block-heading { margin-block-start: 0; }
.dm-contact-form { align-self: stretch; }

@media (max-width: 781px) {
  .dm-contact-panel { margin-bottom: var(--wp--preset--spacing--40); }
}

/* Page standfirst sits under the H1, not crammed against it. */
.dm-page-hero__lead { margin-block-start: 16px; max-width: 680px; }
.dm-page-hero__lead:empty { display: none; }

/* ------------------------------------------------------------------ *
 * Product category panels
 *
 * The numbered "01 · PPE" listings from the approved design. These are the
 * substance of each division page — every item the company actually stocks,
 * not just a product grid.
 * ------------------------------------------------------------------ */
.dm-pcat {
  background: #fff;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 24px;
  overflow: hidden;
  margin-block: 24px;
  transition: .3s;
}
.dm-pcat:hover { box-shadow: var(--wp--preset--shadow--card); }

.dm-pcat__head {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 24px 30px;
  background: var(--wp--preset--color--surface-alt);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.dm-pcat__head .wp-block-heading { margin: 0; flex: 1; min-width: 200px; font-size: 1.2rem; }
.dm-pcat__num {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 15px;
  background: var(--wp--preset--gradient--brand); color: #fff;
  display: grid; place-items: center;
}
.dm-pcat__num .dm-i { width: 30px; height: 30px; }
.dm-pcat__origin {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 100px; background: #fff;
  border: 1px solid var(--wp--preset--color--line);
  font-size: .775rem; font-weight: 700; color: var(--wp--preset--color--body);
}
.dm-pcat__origin .dm-i { width: 15px; height: 15px; color: var(--wp--preset--color--brand-blue); }

.dm-pcat__body {
  padding: 26px 30px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px;
}
.dm-pitem {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 17px; border-radius: 13px;
  background: var(--wp--preset--color--surface-alt);
  border: 1px solid transparent;
  font-size: .915rem; font-weight: 500;
  color: var(--wp--preset--color--ink);
  transition: .22s;
}
.dm-pitem:hover {
  background: var(--wp--preset--color--brand-blue-tint);
  border-color: rgba(47,107,176,.18);
}
.dm-pitem .dm-i {
  width: 16px; height: 16px; flex: 0 0 16px;
  color: var(--wp--preset--color--brand-green-aa); stroke-width: 2.6;
}

@media (max-width: 1024px) { .dm-pcat__body { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .dm-pcat__body { grid-template-columns: 1fr; padding: 20px; }
                             .dm-pcat__head { padding: 20px; } }

/* ------------------------------------------------------------------ *
 * Vision / mission, values, departments
 * ------------------------------------------------------------------ */
.dm-vm .wp-block-column,
.dm-vm { }
.dm-values .wp-block-column,
.dm-depts .wp-block-column {
  background: #fff; border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--card); padding: 30px; transition: .3s;
}
.dm-values .wp-block-column:hover,
.dm-depts .wp-block-column:hover {
  border-color: var(--wp--preset--color--brand-green);
  transform: translateY(-5px); box-shadow: var(--wp--preset--shadow--card);
}
.dm-value__icon, .dm-dept__icon {
  width: 50px; height: 50px; border-radius: 14px; display: inline-grid; place-items: center;
  background: var(--wp--preset--color--brand-green-tint);
  color: var(--wp--preset--color--brand-green-aa); margin-bottom: 16px;
}
.dm-dept__num {
  float: inline-end; font-size: 1.5rem; font-weight: 800;
  color: #C6D2E0; letter-spacing: -.04em;
}
.dm-values .wp-block-heading,
.dm-depts .wp-block-heading { font-size: 1.05rem; margin: 0 0 8px; }

/* ------------------------------------------------------------------ *
 * One supplier vs. fragmented sourcing
 * ------------------------------------------------------------------ */
.dm-cmp__col {
  border: 1.6px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--card); padding: 32px; background: #fff;
}
.dm-cmp__col.is-good {
  border-color: var(--wp--preset--color--brand-green);
  background: var(--wp--preset--color--brand-green-tint);
}
.dm-cmp__col .wp-block-heading { margin-top: 0; margin-bottom: 18px; }
.dm-cmp__row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 13px; font-size: .94rem; }
.dm-cmp__row .dm-i { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 2.4; margin-top: 3px; }
.dm-cmp__col.is-good .dm-cmp__row .dm-i { color: var(--wp--preset--color--brand-green-aa); }
.dm-cmp__col.is-bad  .dm-cmp__row .dm-i { color: #B34B47; }

.dm-lead { max-width: 760px; }
.dm-i--lg { width: 30px; height: 30px; }

/* ---------------------------------------------------------------------------
   Logo sizing
   ---------------------------------------------------------------------------
   The block editor's `width` attribute only constrains one axis, so the source
   image's own aspect ratio decided the rendered height. That made the header
   logo sit at a different size to the footer logo, and different again on the
   Arabic pages where the header is mirrored. Constraining both axes and letting
   the image contain itself inside the box makes every placement identical.
   -------------------------------------------------------------------------- */
.wp-block-site-logo img,
.wp-block-site-logo a img {
	width: auto;
	max-width: 180px;
	height: 38px;
	object-fit: contain;
	object-position: left center;
}

[dir="rtl"] .wp-block-site-logo img,
[dir="rtl"] .wp-block-site-logo a img {
	object-position: right center;
}

.dm-footer__logo img {
	max-width: 190px;
	height: 46px;
	filter: brightness(0) invert(1);
	opacity: .92;
}

/* ---------------------------------------------------------------------------
   Secondary (outline) button
   ---------------------------------------------------------------------------
   theme.json sets the button text colour to `surface` (white) for the filled
   primary button. The outline variant inherited that same white text but has
   no fill, so on the light hero wash it was white-on-white — the button was
   there, clickable, and completely invisible.

   It now carries its own colours: dark text and a visible border on light
   backgrounds, inverted to white when it sits on the dark or gradient bands.
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	background-image: none;
	color: var(--wp--preset--color--brand-blue-dark);
	border: 2px solid var(--wp--preset--color--brand-blue-dark);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--brand-blue-dark);
	color: #fff;
}

/* On the dark band and the brand gradient, invert it. */
.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-brand-gradient-background .wp-block-button.is-style-outline > .wp-block-button__link,
.dm-cta .wp-block-button.is-style-outline > .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, .75);
}

.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-brand-gradient-background .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.dm-cta .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--brand-blue-dark);
	border-color: #fff;
}

/* The white "Get in Touch" button on the gradient band needs a real border too,
   otherwise its edge disappears wherever the gradient runs light. */
.dm-cta .wp-block-button__link.has-surface-background-color {
	border: 2px solid #fff;
}

/* ---------------------------------------------------------------------------
   Header layout — logo left, menu dead centre, call to action right
   ---------------------------------------------------------------------------
   The menu used to sit in the same group as the "Request a Quote" button and
   was pushed to the right edge with it, so it read as an appendix to the
   button rather than as the site's navigation.

   The two outer cells share the leftover space equally and the menu itself is
   auto-width, which puts it on the true centre line of the header rather than
   the centre of whatever space happened to be left over. Because the rule is
   symmetric it holds in Arabic without a mirrored copy — RTL simply reverses
   which cell the logo lands in.
   -------------------------------------------------------------------------- */
.dm-nav > .alignwide {
	align-items: center;
	gap: 20px;
	min-height: 0;
}

/* The button sets the row height; trim it back from the page default so the
   header stays compact without shrinking buttons everywhere else. */
.dm-nav__cta .wp-block-button__link {
	padding-top: 11px;
	padding-bottom: 11px;
	font-size: 0.88rem;
}

.dm-nav__brand,
.dm-nav__right {
	flex: 1 1 0;
	min-width: 0;
}

.dm-nav__right {
	justify-content: flex-end;
}

.dm-nav .dm-nav-primary {
	flex: 0 0 auto;
}

.dm-nav .dm-nav-primary .wp-block-navigation__container {
	justify-content: center;
	flex-wrap: nowrap;
	white-space: nowrap;
}

/* Below the desktop breakpoint the menu collapses to the overlay toggle, so the
   three-cell split is no longer useful — let the logo take its natural width
   and keep the toggle and CTA together on the right. */
@media (max-width: 860px) {
	.dm-nav__brand,
	.dm-nav__right {
		flex: 0 0 auto;
	}

	.dm-nav > .alignwide {
		justify-content: space-between;
	}

	.dm-nav .dm-nav-primary {
		order: 3;
	}
}