/* DK Theme - the small amount of CSS that theme.json cannot express. */

/* ------------------------------------------------------------------
   OVERSCROLL. Drag the page down on a Mac or a phone and the browser
   shows whatever colour is behind the document. Left alone that is the
   cream page background, so a white-ish strip flashes above the navy
   header. Navy is right at BOTH ends: header navy at the top, footer
   navy at the bottom.
   ------------------------------------------------------------------ */
html{background:#0b1d35}

/* ------------------------------------------------------------------
   FULL-BLEED BANDS MUST TOUCH.
   WordPress puts a 24px "block gap" between every top-level block. On a
   design where the navy bands run edge to edge that gap shows the page
   background as a stripe between header, hero, sections and footer.
   ------------------------------------------------------------------ */
.wp-site-blocks > *{margin-block-start:0}
.dk-hero,.dk-punch,.dk-titleband,.dk-main,.dk-header,.dk-footer{margin-block-start:0}

/* HERO. Height comes from the padding, exactly as in the approved preview.
   A min-height was doing the same job before, but it made the band 154px
   taller than the design and pushed everything below it off the screen. */
.dk-hero{
  min-height:0;padding:118px 0;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(168deg,#0b1d35 0%,#132d52 100%);
}
.dk-hero-in{position:relative;z-index:1;width:100%}
.dk-hero h1,.dk-hero h2,.dk-hero p{color:#fff}
/* The chip is the one thing in the hero that is not white. It has to beat
   the rule above, which is why the element is named. */
.dk-hero p.dk-eyebrow{color:#c48a1f}
.dk-hero h1{text-wrap:wrap;margin:0 auto}
.dk-hero h1 em{color:#c48a1f;font-style:normal}
.dk-hero .dk-sub{
  color:#c8d3e2;font-size:1.1875rem;margin:18px auto 0;max-width:44ch;
}
.dk-hero .wp-block-buttons{margin-top:32px}
/* Page buttons are 17px. Left to inherit they take the site's 20px body
   size, which is a different button from the one that was approved. */
.dk-hero .wp-block-button__link,
.dk-punch .wp-block-button__link{font-size:1.0625rem}
/* The manual break balances the two lines on desktop. On a phone the headline
   wraps naturally and a forced break would look wrong. */
@media (max-width:781px){
  .dk-brk{display:none}
  /* The side padding is NOT optional. The hero group is full bleed, so
     without it the headline runs into both edges of the phone. */
  .dk-hero{min-height:0;padding:52px 20px}
  .dk-hero h1{font-size:1.875rem;letter-spacing:-.01em}
  .dk-hero .dk-sub{font-size:1.0625rem;margin-top:14px}
  .dk-hero .wp-block-buttons{margin-top:26px}
  .dk-hero .wp-block-button__link{font-size:1rem;padding:15px 26px}
  .dk-eyebrow{margin-bottom:18px}
}
@media (max-width:400px){
  .dk-hero{padding:44px 16px}
  .dk-hero h1{font-size:1.6875rem}
}

/* Second punch: portrait, then the reason to click. */
.dk-punch .dk-punch-cols{gap:52px;align-items:center}
.dk-punch .dk-portrait img{border-radius:18px;display:block;width:100%;height:auto}
.dk-punch h2{line-height:1.2;font-size:2rem}
.dk-punch h2 em{color:#c48a1f;font-style:normal}
.dk-punch p{font-size:1.125rem;color:#3a3a3a;margin-top:16px}
/* The signature sits under the photo, centred to it, as a caption. */
.dk-punch .dk-portrait-col{text-align:center}
.dk-punch .dk-sig{color:#666;font-size:.90625rem;margin-top:14px;line-height:1.45}
@media (max-width:781px){
  /* column-reverse puts the TEXT first and the photo below it. A reader on a
     phone should finish the argument and reach the button before meeting the
     face, not scroll past a portrait to find out why they are here. */
  .dk-punch .dk-punch-cols{
    gap:30px;text-align:center;flex-direction:column-reverse;
  }
  .dk-punch .dk-portrait{max-width:190px;margin-left:auto;margin-right:auto}
  .dk-punch .wp-block-buttons{justify-content:center}
  .dk-punch .dk-sig{margin-top:12px}
}

/* Eyebrow pill - gold outline, uppercase. Straight from the sales page. */
/* SIGNED OFF: gold outline, gold text, nothing behind it. Confirmed against
   the approved preview. Do not fill this in - a solid gold chip competes
   with the gold button below it, and the hero should have one gold object
   the eye lands on, not two. */
.dk-eyebrow{
  display:inline-block;background:transparent;border:1px solid #c48a1f;color:#c48a1f;
  border-radius:50px;padding:6px 16px;margin-bottom:22px;
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;
  font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
}

/* Page title band. The title is CENTRED so it never collides with the icons
   sitting at the far edges. */
.dk-titleband{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(168deg,#0b1d35 0%,#132d52 100%);
  padding:46px 20px;min-height:0;
}
.dk-titleband h1,.dk-titleband .wp-block-post-title,
.dk-titleband .wp-block-query-title{
  color:#fff;margin:0 auto;max-width:1000px;text-wrap:wrap;
  /* An inner banner is NOT the hero. Left alone it inherits the h1 style from
     theme.json, tops out at 52px, and "Blog" ends up shouting louder than the
     homepage headline. The approved previews set this at 36px. */
  font-size:clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  line-height:1.2;
}
@media (max-width:900px){
  .dk-titleband h1,.dk-titleband .wp-block-post-title,
  .dk-titleband .wp-block-query-title{max-width:100%}
}
.dk-titleband .dk-tag{margin-top:14px;display:inline-block}

/* Brand icons, same four as the YouTube banner. Decoration only, so they are
   hidden from screen readers and dropped before they can crowd the title. */
/* The icon layer must span the WHOLE band, not the text column.
   WordPress caps every direct child of a constrained group at the content
   width and centres it with "margin-left:auto !important". That silently
   shrank this layer to 960px, so "4.5% from the edge" became 43px from the
   edge of the HEADLINE and the icons crowded the text. */
.dk-icons{
  position:absolute;inset:0;pointer-events:none;color:#c48a1f;opacity:.5;
  max-width:none !important;width:auto !important;
  margin-left:0 !important;margin-right:0 !important;
}
/* The icon layer takes no space, but WordPress still puts its 24px block gap
   after it, which pushed the hero content down and made the band taller than
   the design. Third place this same gap has caused a defect. */
.dk-icons + *{margin-block-start:0 !important}
.dk-icons svg{position:absolute;width:32px;height:32px}
.dk-icons.is-hero svg{width:42px;height:42px;opacity:1}
.dk-icons.is-hero svg:nth-child(1){left:4.5%;top:28%}
.dk-icons.is-hero svg:nth-child(2){left:4.5%;top:56%}
.dk-icons.is-hero svg:nth-child(3){right:4.5%;top:28%}
.dk-icons.is-hero svg:nth-child(4){right:4.5%;top:56%}
.dk-icons svg:nth-child(1){left:3.5%;top:22%}
.dk-icons svg:nth-child(2){left:3.5%;top:58%}
.dk-icons svg:nth-child(3){right:3.5%;top:22%}
.dk-icons svg:nth-child(4){right:3.5%;top:58%}
/* The hero has more room than the inner banners, so it keeps its icons longer. */
@media (max-width:1180px){.dk-icons:not(.is-hero){display:none}}
@media (max-width:900px){.dk-icons.is-hero{display:none}}

/* The reading surface. Body copy always sits on pure white.
   Padding is deliberately modest: nobody visits for the margins. */
.dk-sheet{
  background:#fff;border:1px solid #e6e2da;border-radius:16px;
  padding:34px 40px;
  box-shadow:0 1px 2px rgba(11,29,53,.05), 0 8px 24px rgba(11,29,53,.05);
}
.dk-article{font-size:1.25rem;line-height:1.7}
.dk-article strong{font-weight:800;color:#111}
.dk-article > *:first-child{margin-top:0}
.dk-article > *:last-child{margin-bottom:0}
/* Older posts were written in the classic editor, so the body arrives as
   plain HTML with no block spacing attached. Without these the whole post
   renders as one unbroken slab. */
.dk-article p{margin:0 0 18px}
.dk-article h2{font-size:1.625rem;margin:30px 0 12px}
.dk-article h3{font-size:1.3125rem;margin:26px 0 10px}
.dk-article ul,.dk-article ol{margin:0 0 18px;padding-left:22px;color:#3a3a3a}
.dk-article li{margin-bottom:8px}
.dk-article blockquote{
  border-left:3px solid #c48a1f;padding-left:24px;margin:26px 0;
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;
  font-size:1.25rem;line-height:1.45;color:#111;
}
/* Photos inside a post. The rounded corner is the house style; the float
   rules are what the classic editor's alignleft/alignright expect. */
.dk-article img{border-radius:16px}
.dk-article .alignleft{float:left;margin:4px 30px 22px 0}
.dk-article .alignright{float:right;margin:4px 0 22px 30px}
.dk-article .aligncenter{display:block;margin:0 auto 22px}
/* The About portrait. A figure floats as a block, so the margin goes on the
   figure and the radius on the image inside it. */
.dk-article .wp-block-image.alignright{float:right;margin:4px 0 22px 30px}
.dk-article .wp-block-image.alignleft{float:left;margin:4px 30px 22px 0}
.dk-article .wp-block-image img{border-radius:16px;display:block}
.dk-article .wp-block-embed{clear:both;margin:26px 0}
/* Emoji are images too. They must stay square and inline. */
.dk-article img.emoji,.dk-article img.wp-smiley{
  border-radius:0;float:none;display:inline;width:1em;height:1em;
  margin:0 .07em;vertical-align:-.1em;
}
/* A 210px photo floated inside a 309px phone column leaves 69px for the
   text beside it. Nothing floats on a phone. */
@media (max-width:600px){
  .dk-article .alignleft,.dk-article .alignright,
  .dk-article .wp-block-image.alignleft,.dk-article .wp-block-image.alignright{
    float:none;display:block;margin:0 auto 20px;
  }
}
/* Standard pages get a wider sheet, but the reading column stays ~90 characters.
   Past that a reader loses their place on the line, so the extra width goes into
   padding rather than into longer lines. */
.dk-sheet.is-page{padding:34px 86px}
@media (max-width:1000px){.dk-sheet.is-page{padding:30px 40px}}
@media (max-width:781px){.dk-sheet,.dk-sheet.is-page{padding:22px 18px;border-radius:12px}}
@media (max-width:600px){.dk-sheet{padding:20px 15px;border-radius:10px}}

/* Closing quiz box at the foot of a page or post. clear:both so it never
   sits beside a floated photo. */
.dk-aclose{
  background:#faf3e6;border:1px solid rgba(196,138,31,.28);
  border-radius:14px;padding:24px 26px;margin-top:8px;clear:both;
}
.dk-aclose p{margin:0 0 16px;font-size:1.1875rem}
.dk-aclose .wp-block-button__link{font-size:1.0625rem}

/* Posts-per-page control. Appears above and below the list. */
.dk-perpage{
  display:flex;align-items:center;gap:9px;justify-content:flex-end;
  margin:0 0 20px;font-size:.875rem;color:#666;
}
.dk-postgrid + .dk-perpage{margin:24px 0 0}
.dk-perpage select{
  font:inherit;font-size:.9375rem;padding:7px 34px 7px 12px;border:1px solid #ccc7bd;
  border-radius:8px;color:#1a1a1a;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%230b1d35' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center/12px 12px;
}
.dk-perpage select:hover{border-color:#c48a1f}

/* Cards. Gold ring marks the primary one, same as the sales page. */
.dk-card{
  background:#fff;border:1px solid #eceae6;border-radius:16px;padding:28px;
}
.dk-card.is-featured{
  border:1.5px solid #c48a1f;outline:4px solid rgba(196,138,31,.10);
}

/* ------------------------------------------------------------------
   BLOG. Built for posts with NO featured image. Nothing here reserves
   space for a picture, so a post without one does not look broken.
   ------------------------------------------------------------------ */
.dk-postgrid .wp-block-post-title a{text-decoration:none;color:#111}
.dk-postgrid .wp-block-post-title a:hover{color:#c48a1f}

/* Gold is reserved for the one thing we want clicked. Post cards are quiet. */
.dk-pcard{
  background:#fff;border:1px solid #e6e2da;
  border-radius:14px;padding:20px 22px;height:100%;
  box-shadow:0 1px 2px rgba(11,29,53,.05), 0 8px 20px rgba(11,29,53,.05);
}
/* text-wrap:balance evens the line lengths and makes short titles break early.
   Card titles read better filling each line. */
/* WordPress puts a 24px block gap between every child, which opens holes
   inside a card. Spacing inside a card is set here, deliberately. */
.dk-pcard > *{margin-top:0}
.dk-pcard .wp-block-post-title{font-size:1.3125rem;line-height:1.3;margin:0 0 10px;text-wrap:wrap}
.dk-pcard .dk-tag{margin:0}
.dk-pcard .wp-block-post-excerpt{margin:10px 0 0}
/* Card grid gap: 18px in the preview, not WordPress's 24px block gap. */
.dk-postgrid .dk-cardgrid{gap:18px}
.dk-pcard .wp-block-post-excerpt__excerpt{color:#3a3a3a;font-size:1.0625rem;line-height:1.6}
.dk-pcard .wp-block-post-excerpt__more-link{
  display:block;margin-top:12px;color:#c48a1f;font-weight:700;
  font-family:"Plus Jakarta Sans",sans-serif;font-size:.9063rem;text-decoration:none;
}
.dk-pcard .wp-block-post-excerpt__more-link:hover{text-decoration:underline}

/* Category chip. The text comes from the post's real category in WordPress. */
.dk-tag,.dk-tag a{
  font-family:"Plus Jakarta Sans",sans-serif;font-size:.6875rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:#0b1d35;
}
.dk-tag{display:inline-block}
.dk-tag a{background:#eef2f7;border-radius:50px;padding:4px 11px;display:inline-block}
.dk-tag a:hover{background:#e2e9f2}
.dk-tag.on-navy a{background:rgba(255,255,255,.12);color:#fff !important}
.dk-date{color:#666;font-size:.8438rem;margin-top:9px}
.dk-date.on-navy{color:#9fb0c6;margin-top:12px}

/* Pagination. */
.dk-pager{margin-top:40px;padding-top:24px;border-top:1px solid #eceae6;gap:12px}
.dk-pager a,.dk-pager .page-numbers{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:.9375rem;
  text-decoration:none;color:#0b1d35;
}
.dk-pager a:hover{color:#c48a1f}
.dk-pager .current{color:#c48a1f}

/* Previous / next post links under an article. */
.dk-rule{margin:48px 0 28px;border:0;border-top:1px solid #eceae6}
.dk-postnav{gap:20px}
.dk-postnav .wp-block-post-navigation-link{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:.9375rem;max-width:46%;
}
.dk-postnav a{text-decoration:none;color:#0b1d35}
.dk-postnav a:hover{color:#c48a1f}

/* ------------------------------------------------------------------
   SIDEBAR. This is the widget area. It is a template part, so blocks
   can be added, removed and reordered in Appearance > Editor.
   ------------------------------------------------------------------ */
/* Inner pages put their content on WHITE, not on the page background.
   Measured against the approved preview: the band ends and white begins.
   The cards are separated from it by their border and shadow, not by colour. */
.dk-main{background:#fff}

.dk-withside{gap:36px;align-items:flex-start}
.dk-col-side{position:sticky;top:24px}
.dk-sidebar .dk-widget + .dk-widget{margin-top:28px}
.dk-widget{background:#fff;border:1px solid #e6e2da;border-radius:14px;padding:20px 22px;
  box-shadow:0 1px 2px rgba(11,29,53,.05), 0 8px 20px rgba(11,29,53,.05)}
.dk-widget-title{
  font-size:.75rem !important;letter-spacing:.12em;text-transform:uppercase;
  color:#666;font-weight:800;margin:0 0 12px;
}
.dk-eyebrow-sm{
  font-family:"Plus Jakarta Sans",sans-serif;font-size:.75rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#666;margin:0 0 10px;
}

/* ------------------------------------------------------------------
   SEARCH BOX.
   WordPress ships this as a plain input with a wp-element-button next to
   it, so the button inherits the gold hero button: 20px text, 16px/34px
   padding, a 50px pill. That forced the whole box to 74px tall and cut
   the placeholder off mid-word. One quiet navy box, per the preview.
   ------------------------------------------------------------------ */
.dk-widget .wp-block-search__inside-wrapper{
  border:1px solid #ddd;border-radius:10px;overflow:hidden;padding:0;background:#fff;
}
.dk-widget .wp-block-search__input{
  border:0;background:transparent;padding:11px 13px;
  font-size:.9375rem;color:#1a1a1a;min-width:0;
}
.dk-widget .wp-block-search__input::placeholder{color:#666;opacity:1}
.dk-widget .wp-block-search__input:focus{outline:0}
.dk-widget .wp-block-search__inside-wrapper:focus-within{border-color:#c48a1f}
.dk-widget .wp-block-search__button{
  background:#0b1d35;color:#fff;border:0;border-radius:0;margin:0;
  padding:11px 18px;font-size:.875rem;font-weight:700;line-height:1.4;
  font-family:"Plus Jakarta Sans",sans-serif;cursor:pointer;
}
.dk-widget .wp-block-search__button:hover{background:#132d52}

/* Quiz card. The question is the loud element, the button is one short line. */
.dk-quizcard{text-align:center;padding:24px}
.dk-quizcard h3{font-size:1.4375rem !important;line-height:1.25;margin:10px 0 12px}
.dk-quizcard p{font-size:1.0313rem;color:#3a3a3a;margin:0 0 20px}
/* The eyebrow is also a paragraph, so it has to outrank the rule above or it
   gets dragged up to body size. */
.dk-quizcard p.dk-eyebrow-sm{font-size:.75rem;margin-bottom:10px}
.dk-quizcard .wp-block-button__link{font-size:.9375rem;padding:13px 20px;white-space:nowrap}
.dk-sidebar ul{list-style:none;margin:0;padding:0}
.dk-sidebar li{padding:7px 0;border-bottom:1px solid #f2f0ec;font-size:1rem}
.dk-sidebar li:last-child{border-bottom:0}
/* :not(.wp-element-button) matters. A button IS a link, so without it this
   rule painted the gold quiz button's text near-black, and the hover rule
   below turned it gold on gold, which is invisible. */
.dk-sidebar a:not(.wp-element-button){text-decoration:none;color:#1a1a1a}
.dk-sidebar a:not(.wp-element-button):hover{color:#c48a1f}
.dk-btn-block,.dk-btn-block .wp-block-button__link{width:100%;text-align:center}

/* Classic widgets dropped in from Appearance > Widgets. They get the same
   card treatment as the blocks above them so the column stays consistent. */
.dk-sidebar .dk-widget-area .dk-widget{margin-top:28px}
.dk-widget-area select,.dk-widget-area input[type="text"],
.dk-widget-area input[type="search"]{
  width:100%;font:inherit;font-size:.9375rem;padding:9px 12px;
  border:1px solid #ddd;border-radius:10px;background:#fff;
}
.dk-footer .dk-widget-area{margin:0 0 28px}
.dk-footer .dk-footer-widget{margin-bottom:20px}
.dk-footer .dk-footer-widget:last-child{margin-bottom:0}
.dk-footer .dk-widget-area ul{list-style:none;margin:0;padding:0}
.dk-footer .dk-widget-area li{padding:4px 0;font-size:.875rem}

@media (max-width:781px){
  .dk-col-side{position:static}
  .dk-withside{gap:28px}
}

/* Narrow screens get MORE of the screen, not less. The old theme squeezed
   content into the middle and left the edges empty. */
@media (max-width:600px){
  body > .wp-site-blocks,
  .wp-site-blocks > *{--wp--style--root--padding-left:14px;--wp--style--root--padding-right:14px}
  .dk-titleband{padding:32px 14px}
  .dk-footer{padding:40px 14px 32px}
  .dk-pcard{padding:18px 18px}
  .dk-widget{padding:18px 18px}

  /* The header must stay ONE line. Left to wrap it became 125px tall, with
     the wordmark stranded on its own row above the button. Everything on
     the line shrinks just enough to fit a 360px phone. */
  .dk-header{padding:12px 14px}
  .dk-header > .wp-block-group{flex-wrap:nowrap;gap:12px}
  .dk-brand,.dk-brand a{font-size:.875rem;letter-spacing:0}
  .dk-navwrap{gap:12px}
  .dk-navcta .wp-block-button__link{font-size:.8125rem;padding:9px 16px}

  /* 32px over a 347px column ran the second headline to five lines. */
  .dk-punch h2{font-size:1.5625rem}
  .dk-punch{padding-top:52px !important;padding-bottom:52px !important}
}

/* Method numbers read as instrument values, not decoration. */
.dk-stat{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;
  font-size:2.25rem;line-height:1;color:#c48a1f}
.dk-stat + p{color:#666;font-size:.9375rem;margin-top:6px}

/* ------------------------------------------------------------------
   HEADER.
   Everything on this line is small on purpose. The one thing a reader
   should notice is the gold button, and it only stands out if the brand
   and the menu stay quiet. Left to inherit, the button takes the site's
   body size (20px) and the hero's padding, which measured 74px tall and
   swallowed the line. All four sizes below are the approved preview's.
   ------------------------------------------------------------------ */
.dk-header{background:#0b1d35;padding:16px 20px}
.dk-header a{text-decoration:none !important}
.dk-header .wp-block-navigation{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:.90625rem;
  gap:22px;--wp--style--block-gap:22px;
}
.dk-header .wp-block-navigation a{color:#cfd8e4 !important}
.dk-header .wp-block-navigation a:hover,
.dk-header .wp-block-navigation .current-menu-item > a,
.dk-header .wp-block-navigation .current_page_item > a{color:#fff !important}
.dk-brand,.dk-brand a{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:1rem;
  letter-spacing:.02em;color:#fff !important;
}
/* The gold half of the wordmark. */
.dk-brand i{font-style:normal;color:#c48a1f !important}
/* The header button is a signpost, not the hero call to action. */
.dk-navcta .wp-block-button__link{font-size:.875rem;padding:9px 20px}

/* ------------------------------------------------------------------
   MOBILE MENU.
   WordPress swaps the menu for a hamburger BUTTON below 600px. A button
   is not a link, so the white link colour above never reached it and it
   inherited the site's near-black body colour: invisible on navy. The
   panel it opens is white by default, which would have hidden the white
   links too, so both ends are set here.
   ------------------------------------------------------------------ */
.dk-header .wp-block-navigation__responsive-container-open,
.dk-header .wp-block-navigation__responsive-container-close{
  color:#fff;background:transparent;border:0;cursor:pointer;
}
.dk-header .wp-block-navigation__responsive-container-close svg{fill:currentColor}

/* THREE bars, not WordPress's two. Two reads as a list icon; three is the
   shape everyone already knows means "menu". Core's icon is an SVG with no
   hook to add a line to, so it is hidden and the bars are drawn here. */
.dk-header .wp-block-navigation__responsive-container-open svg{display:none}
.dk-header .wp-block-navigation__responsive-container-open{
  width:26px;height:18px;padding:0;border-radius:0;flex:0 0 auto;
  background-image:linear-gradient(currentColor,currentColor),
                   linear-gradient(currentColor,currentColor),
                   linear-gradient(currentColor,currentColor);
  background-size:26px 2px;
  background-position:left top, left center, left bottom;
  background-repeat:no-repeat;
}
/* The long selector is deliberate: core's own default-white rule is
   ".wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)",
   which outranks anything shorter. Measured white-on-white before this. */
.dk-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
.dk-header .wp-block-navigation__responsive-container.is-menu-open{
  background-color:#0b1d35;padding:28px 20px;
}
.dk-header .wp-block-navigation__responsive-container.is-menu-open a{
  color:#fff !important;font-size:1.25rem;
}
/* Right-aligned is correct in the header bar. In a full-screen panel it
   just pins the words to one edge, so the overlay centres them. */
.dk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  gap:18px;align-items:center;justify-content:center;
}
.dk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  justify-content:center;align-items:center;flex:1 1 auto;
}

/* Footer.
   It sits on navy, so headings must be light. Left alone they inherit the
   near-black heading colour from theme.json and vanish into the background. */
.dk-footer{background:#0b1d35;color:#fff;padding:44px 20px 34px;font-size:.8125rem}
.dk-footer a{color:#fff !important;text-decoration:none !important;opacity:.85}
.dk-footer a:hover{opacity:1;text-decoration:underline !important}
.dk-footer h3,.dk-footer h4,.dk-footer .wp-block-heading{
  color:#fff;font-family:"Plus Jakarta Sans",sans-serif;
  font-size:.8125rem !important;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;margin:0 0 14px;
}
.dk-footer p{font-size:.875rem;line-height:1.65}
.dk-footer .dk-brand{font-size:.8125rem;margin:0 0 12px}
/* A footer list is a list, not a menu with 24px of air between each item. */
.dk-footer .wp-block-navigation{font-size:.875rem;gap:8px;row-gap:8px}
.dk-footer .wp-block-columns{gap:36px}
/* The small print is the one place a long line does real harm: it is already
   hard to read, so it is capped well short of the full width. */
.dk-footer .dk-fine{color:rgba(255,255,255,.55);font-size:.8125rem;line-height:1.6;max-width:900px}

/* Images never shift the page. */
img{max-width:100%;height:auto}

/* Respect reduced motion. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}