/* ==========================================================================
   dns-chrome.css
   dubainotaryservices.ae, the chrome: header fixes and the footer.

   Loaded after dns-commerce.css (see inc/assets.php), so a rule here wins any
   tie with the commerce layer on source order alone. Nothing here needs more
   specificity than the rule it replaces, and nothing here uses !important.

   WHAT LIVES HERE
   1. Header fixes: the sticky header under the WordPress admin bar, the stuck
      state keeping its dark ground, and a tighter utility row on phones.
   2. The footer, business rendering per _design-spec-business.md.

   THE RULES THIS FILE KEEPS
   Tokens only, no hex. Logical properties only, because the Arabic route
   reuses every rule in RTL. Region defaults on bare elements sit in :where()
   at zero specificity; components carry their own colour on every state.
   Grid tracks are minmax(0, Xfr), so a long email address or a long menu
   label can never widen a column. No text element carries a width cap; the
   column track sets the measure.
   ========================================================================== */


/* ==========================================================================
   1. Header
   ========================================================================== */

/* Under the WordPress admin bar. WordPress sets the custom property in its
   admin-bar.css: 32px, and 46px below 783px. The header is position: sticky
   with inset-block-start: 0 in dns-commerce.css, so without this it slides
   under the fixed bar once the page scrolls, and the brand and the menu
   toggle are unreachable for a logged in editor. */
body.admin-bar .dns-index {
  inset-block-start: var(--wp-admin--admin-bar--height);
}

/* Below 601px WordPress switches the admin bar to position: absolute, so it
   scrolls away with the page. Keeping the offset there would leave a bar's
   height of empty space above the stuck header, so it returns to the edge.
   The breakpoint is WordPress's own, not one of ours. */
@media (max-width: 600px) {
  body.admin-bar .dns-index {
    inset-block-start: 0;
  }
}

/* The stuck state. dns-ui.js adds the class after 24px of scroll. The utility
   row goes, the shadow comes, and the ground and text colour are restated so
   nothing later in the cascade can lighten a header that is now floating
   over page content. */
.dns-index--stuck.dns-index {
  background: var(--dns-surface-invert);
  color: var(--dns-text-invert);
  box-shadow: var(--dns-lift-2);
}
.dns-index--stuck.dns-index .dns-index__utility {
  display: none;
}

/* Below 48rem the utility row holds only the language switcher (the phone
   shows from 48rem, WhatsApp from 75rem), so it does not get a full row of
   padding for one small link. */
.dns-index__utility {
  padding-block: var(--dns-s1);
}
@media (min-width: 48rem) {
  .dns-index__utility {
    padding-block: var(--dns-s2);
  }
}


/* ==========================================================================
   2. Footer

   Markup: dnsae_render_colophon() in inc/nav.php.

   .dns-colophon
     .dns-wrap.dns-colophon__inner              the column grid
       .dns-colophon__col.dns-colophon__col--brand
       .dns-colophon__col.dns-colophon__col--contact
         .dns-colophon__title + ul.dns-colophon__contact > li.dns-colophon__item
       nav.dns-colophon__col.dns-colophon__col--services
         .dns-colophon__title + ul.dns-colophon__list
       .dns-colophon__col.dns-colophon__col--company
         nav.dns-colophon__group (company), nav.dns-colophon__group (legal)
     .dns-wrap.dns-colophon__base               the base bar
       .dns-colophon__meta (copy, disclaimer, reviewed) + .dns-colophon__lang
   ========================================================================== */

.dns-colophon {
  background: var(--dns-surface-invert);
  color: var(--dns-text-invert-muted);
  border-block-start: var(--dns-border-width) solid var(--dns-surface-invert-2);
  padding-block: var(--dns-section-y-act) var(--dns-s6);
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-sm);
  line-height: var(--dns-leading-normal);
}

/* Region defaults at zero specificity. Anything dropped into the footer (a
   menu item WordPress marks up, a paragraph from a filter) reads in the
   invert palette, and every component below repaints it without a fight. */
:where(.dns-colophon) p {
  margin: 0;
  color: var(--dns-text-invert-muted);
}
:where(.dns-colophon) a {
  color: var(--dns-text-invert-muted);
  background: transparent;
}
:where(.dns-colophon) a:hover,
:where(.dns-colophon) a:focus-visible {
  color: var(--dns-action-bright);
  background: transparent;
}
:where(.dns-colophon) ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(.dns-colophon) li {
  margin: 0;
  padding: 0;
}


/* --- the column grid: one column, two at 40rem, four at 62rem ------------ */

.dns-colophon__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dns-s8) var(--dns-s6);
  align-items: start;
}
@media (min-width: 40rem) {
  .dns-colophon__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 62rem) {
  .dns-colophon__inner {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: var(--dns-s8);
  }
}

.dns-colophon__col {
  display: grid;
  gap: var(--dns-s4);
  align-content: start;
  min-inline-size: 0;
}
.dns-colophon__col--company.dns-colophon__col {
  gap: var(--dns-s6);
}
.dns-colophon__group {
  display: grid;
  gap: var(--dns-s4);
}


/* --- brand ---------------------------------------------------------------- */

.dns-colophon .dns-index__wordmark {
  display: grid;
  gap: var(--dns-s1);
}
.dns-colophon .dns-index__name {
  font-size: var(--dns-text-lg);
  color: var(--dns-text-invert);
}
.dns-colophon .dns-index__strapline {
  color: var(--dns-text-invert-muted);
}

.dns-colophon__blurb {
  margin: 0;
  font-size: var(--dns-text-sm);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text-invert-muted);
}

/* The capacity statement, small and muted. The commerce layer boxed it and
   capped its measure; both are undone here and the column track sets the
   measure. */
.dns-colophon__capacity {
  margin: 0;
  padding: 0;
  inline-size: auto;
  background: transparent;
  border-radius: 0;
  font-size: var(--dns-text-xs);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text-invert-muted);
}


/* --- column titles -------------------------------------------------------- */

.dns-colophon__title {
  margin: 0;
  font-family: var(--dns-font-text);
  font-size: var(--dns-text-xs);
  font-weight: var(--dns-weight-bold);
  line-height: var(--dns-leading-snug);
  letter-spacing: var(--dns-tracking-label);
  text-transform: uppercase;
  text-wrap: auto;
  color: var(--dns-text-invert-muted);
}

/* Arabic has no case and tracking breaks its joins. The universal reset in
   dns-rtl.css is zero specificity and cannot reach a class, so the route is
   named here instead. */
:where([dir="rtl"]) .dns-colophon__title {
  letter-spacing: normal;
  text-transform: none;
}


/* --- contact -------------------------------------------------------------- */

.dns-colophon__contact {
  display: grid;
  gap: var(--dns-s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dns-colophon__item {
  display: flex;
  align-items: flex-start;
  gap: var(--dns-s3);
  margin: 0;
}

/* The icon chip: the same 2rem disc as the header phone, action green on the
   card surface, so both ends of the page share one contact vocabulary. */
.dns-colophon__itemicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--dns-radius-pill);
  background: var(--dns-surface-invert-2);
  color: var(--dns-action-bright);
}

/* The first line of text centres on the chip: the chip is 2rem, a 14px line
   at 1.62 is about 22.7px, so a 4px top pad puts the line on the middle of
   the disc. overflow-wrap lets an email address break rather than overflow
   a narrow column; it is not a cap. */
.dns-colophon__itemtext {
  min-inline-size: 0;
  padding-block-start: var(--dns-s1);
  overflow-wrap: anywhere;
  color: var(--dns-text-invert-muted);
}


/* --- links, shared by the contact rows and the menu columns --------------- */

.dns-colophon__link,
.dns-colophon__navlink {
  color: var(--dns-text-invert-muted);
  background: transparent;
  text-decoration: none;
  text-underline-offset: 0.15em;
  transition: color var(--dns-transition);
}
.dns-colophon__link:hover,
.dns-colophon__link:focus-visible,
.dns-colophon__link:active,
.dns-colophon__navlink:hover,
.dns-colophon__navlink:focus-visible,
.dns-colophon__navlink:active {
  color: var(--dns-action-bright);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.dns-colophon__link:focus-visible,
.dns-colophon__navlink:focus-visible {
  outline: var(--dns-focus-width) solid var(--dns-action-bright);
  outline-offset: var(--dns-focus-offset);
}

/* The commerce layer made this an inline-flex row with its own icon gap. The
   icon now sits outside the link, so the link is plain inline text. */
.dns-colophon__link {
  display: inline;
  font-weight: var(--dns-weight-medium);
}


/* --- menu columns --------------------------------------------------------- */

.dns-colophon__list {
  display: grid;
  gap: var(--dns-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dns-colophon__list > li {
  margin: 0;
  padding: 0;
}

.dns-colophon__navlink {
  display: inline-block;
  padding-block: var(--dns-s1);
  line-height: var(--dns-leading-snug);
}

/* The page the reader is on, in the invert text colour rather than muted.
   WordPress also marks the link aria-current="page", so colour is not the
   only signal. A weight change would shift the column; colour does not. */
.dns-colophon__list .current-menu-item > .dns-colophon__navlink {
  color: var(--dns-text-invert);
  background: transparent;
}
.dns-colophon__list .current-menu-item > .dns-colophon__navlink:hover,
.dns-colophon__list .current-menu-item > .dns-colophon__navlink:focus-visible,
.dns-colophon__list .current-menu-item > .dns-colophon__navlink:active {
  color: var(--dns-action-bright);
  background: transparent;
}


/* --- base bar ------------------------------------------------------------- */

.dns-colophon__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dns-s3) var(--dns-s6);
  margin-block-start: var(--dns-s8);
  padding-block-start: var(--dns-s5);
  border-block-start: var(--dns-border-width) solid var(--dns-surface-invert-2);
}

.dns-colophon__meta {
  display: grid;
  gap: var(--dns-s1);
  flex: 1 1 auto;
  min-inline-size: 0;
}

.dns-colophon__copy,
.dns-colophon__disclaimer,
.dns-colophon__reviewed {
  margin: 0;
  font-size: var(--dns-text-xs);
  line-height: var(--dns-leading-normal);
  color: var(--dns-text-invert-muted);
}

.dns-colophon__lang {
  flex: none;
}