/* ==========================================================================
   Shaarli chrome, matched to the daw WordPress theme at the site root.

   Fonts and the icon sprite are pulled from the theme by absolute path — both
   apps are same-origin (WordPress at /, Shaarli at /bookmarks), so there is one
   copy of each asset. Colour/type values below are mirrored from
   wp-content/themes/daw/style.css; re-sync if the theme's chrome changes.

   Scoped to the header and footer only. Shaarli's Pure.css bookmark list is
   deliberately left alone.
   ========================================================================== */

/* --- Theme fonts (self-hosted by the WP theme) ---------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/themes/daw/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/wp-content/themes/daw/fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/wp-content/themes/daw/fonts/playfair-display-var.woff2') format('woff2');
}
@font-face {
  font-family: 'CM Sans';
  font-style: normal;
  font-weight: normal;
  src: local("☺"), url('/wp-content/themes/daw/fonts/cmunsx.woff') format('woff');
}
@font-face {
  font-family: 'Gaegu';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/wp-content/themes/daw/fonts/gaegu-v15-latin-300.woff2') format('woff2');
}

/* --- Accent colour (theme token: Slate Deep) ----------------------------- */
.shaarli-menu {background: #484c57;}
.linklist-real-url .linklist-link {color: #484c57 !important;}
.linklist-item-title .linklist-link {color: #484c57 !important;}
.searchform-block button {background: #484c57;}
.page-form input[type=submit] {background: #484c57;}
.pure-alert-success {background: #484c57;}
.page-form .window-title {color: #484c57 !important;}
.page-form a {color: #484c57 !important;}

/* De-branding: drop the Shaarli glyph and the per-link type icons. */
.fa-shaarli:before {display: none !important;}
.linklist-real-url > .fa-external-link,
.linklist-real-url > .fa-sticky-note {display: none;}

/* --- Page field ----------------------------------------------------------- */
/* Slate throughout, as on the root site's content pages (body.page etc.), with
   Shaarli's own light cards sitting on top of it. */
body {
  background: #484c57;
}

/* The theme sets these on html/body; Shaarli leaves both at `auto`. On macOS that
   is the difference between grayscale and subpixel antialiasing — without it every
   face renders visibly heavier than the same text on the root site. Applied
   globally, as the theme does, so the whole page matches and not just the chrome. */
html,
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Header: controls left, brand right (as on the root site) ------------- */
.shaarli-menu {
  font-family: 'Inter', sans-serif;
}
/* Breathing room above the bar, matching the root site (its brand sits 23px down:
   8px from .navbar + 15px from .site-title). Desktop only — Shaarli collapses this
   same element on mobile, where extra height would expose the closed menu.
   The max-height bump is required: Shaarli caps the bar at 45px with
   overflow:hidden, so padding alone is silently clipped. */
@media screen and (min-width: 64em) {
  .shaarli-menu {
    padding-top: 23px;
    padding-bottom: 23px;
    max-height: 91px;
  }
}

/* Shaarli draws a 4px white bar under every header item on hover via
   `.pure-menu-item:hover::after`. Underlines are wanted only in the footer (the
   sliding `::before` rule) and the offcanvas (`.dw-nav-underline`, a real element),
   neither of which uses `.pure-menu-item` — so switching this off is precise. */
.pure-menu-item:hover::after {
  display: none;
}
.header-buttons ul.pure-menu-list {
  display: flex;
  justify-content: flex-end;
}
/* Brand in Playfair; opens the offcanvas rather than linking home. */
#shaarli-brand .pure-menu-link,
#shaarli-title-mobile {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.45rem;
  color: #fff;
  white-space: nowrap;
  padding-top: .3125rem;
  padding-bottom: .3125rem;
}
.shaarli-menu .pure-menu-link:hover,
.shaarli-menu .pure-menu-link:focus {
  color: #25c2a0;
}

/* --- Offcanvas site nav (ported from the theme; :target-driven) ----------- */
.dw-offcanvas {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  height: 85px;
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform .3s ease-in-out, visibility .3s;
  overflow-y: auto;
  background: rgba(72, 76, 87, .7);
  backdrop-filter: blur(6px);
  /* As with the footer: restate the theme's inherited line-height, since Shaarli's
     body is 1.15 and the nav items would otherwise sit tighter than the root site. */
  line-height: 1.42857143;
}
.dw-offcanvas:target {
  visibility: visible;
  transform: none;
}
.dw-offcanvas-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, .4);
}
.dw-offcanvas:target ~ .dw-offcanvas-backdrop {
  display: block;
}
.dw-offcanvas .d-flex {display: flex;}
.dw-offcanvas .justify-content-center {justify-content: center;}
.dw-offcanvas ul.nav {
  position: relative;
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  font-size: 1.25rem;
}
.dw-offcanvas ul.nav .list-group-item {
  border: none;
  background: none;
  color: #fff;
  position: relative;
  display: block;
  padding: .5rem 1rem;
}
/* Matches the theme's `ul.nav .list-group-item a` exactly (measured: 21.6px/700). */
.dw-offcanvas ul.nav .list-group-item a {
  color: #fff;
  text-decoration: none;
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 700;
}

/* --- Page title (mirrors .container.leader > h1.cm-sans.fs-2 on the root site) -- */
/* .shaarli-menu is position:fixed (as is the theme's navbar), so the leader needs
   the theme's 100px top clearance or the title slides under the header. */
#dw-page-leader {
  /* Width/gutter come from the shared container rule below, so the title lines up
     with the header, content and footer at every breakpoint. This is the one
     deliberate deviation from the theme: there, `.container.leader` overrides the
     stepped width with `width:auto; max-width:1280px`, which makes the title 50px
     narrower than the navbar above 1400px and full-bleed below 1310px. */
  padding-top: 100px;
  margin-top: 0;
}
#dw-page-leader h1 {
  margin: 0;
  color: #fff;
  font-family: 'CM Sans', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}
.dw-nav-underline {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #25c2a0;
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
  transition: left .4s cubic-bezier(0.785, 0.135, 0.15, 0.86),
              width .4s cubic-bezier(0.785, 0.135, 0.15, 0.86),
              top .4s cubic-bezier(0.785, 0.135, 0.15, 0.86),
              opacity .3s ease;
}
/* Five items (the theme has four) don't fit one phone-width row, so wrap and let
   the panel grow. The underline script positions by offsetTop, so it follows. */
@media (max-width: 767.98px) {
  .dw-offcanvas {
    width: 100vw;
    height: auto;
    min-height: 85px;
    padding-bottom: .5rem;
  }
  /* Left-align rather than centre: Shaarli's own layout overflows horizontally at
     phone widths (long unwrapped URLs), so a centred nav gets pushed off-screen.
     Anchoring left keeps all five items visible regardless of document width. */
  .dw-offcanvas nav.justify-content-center {
    width: 100vw;
    justify-content: flex-start;
  }
  .dw-offcanvas ul.nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: .35rem;
    font-size: 1rem;
  }
  .dw-offcanvas ul.nav .list-group-item {padding: .5rem .55rem;}
}
@media (prefers-reduced-motion: reduce) {
  .dw-offcanvas {transition: none;}
  .dw-nav-underline {transition: opacity .3s ease;}
}

/* --- Chrome text on the slate field --------------------------------------- */
/* These labels sit directly on the page background rather than on a card, so they
   need the footer's light ink now that the field is slate. The per-page buttons
   (20/50/100) keep their own light chips and are deliberately left alone. */
.linkcount,
.linklist-filters-text,
.linklist-pages,
.linklist-pages .strong,
.linksperpage > div {
  color: #dadada;
}
.linklist-paging .filter-off,
.linklist-paging .filter-on,
.linklist-pages a {
  color: #dadada;
}
.linklist-paging .filter-off:hover,
.linklist-paging .filter-on:hover,
.linklist-pages a:hover {
  color: #25c2a0;
}

/* --- Footer (mirrors #dw-footer in the theme) ---------------------------- */
/* Reset Shaarli's own footer container so the theme footer can go full-bleed. */
#footer {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

#dw-footer {
  background-color: #484c57;
  color: #dadada;
  font-family: 'Inter', sans-serif;
  /* The theme inherits Bootstrap's 1.42857 from its own body; Shaarli's body is
     1.15, so it has to be restated here or every footer line sits too tight. */
  line-height: 1.42857143;
  margin: 6rem 0 0;
  padding: 6rem 0 4rem;
}
/* The theme's global `li a` rule (system stack at .9em) never reaches Shaarli, so
   without this the footer links render a full 16px in Inter instead of 14.4px.
   Scoped to the footer so Shaarli's own lists are untouched. */
#dw-footer li a {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji";
  font-size: .9em;
  line-height: 1.42857143;
}
#dw-footer h5 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1.2;
  color: #dadada;
  margin: 0;
}
#dw-footer address {
  font-style: normal;
  line-height: 1.9;
}
#dw-footer a {
  position: relative;
  color: #dadada;
  fill: #dadada;
  text-decoration: none;
}
#dw-footer a:hover {
  color: #25c2a0;
  fill: #25c2a0;
}
#dw-footer .br-widget {
  margin: 4rem 0 0;
}
#dw-footer .br-widget:first-child {
  margin-top: 0;
}
#dw-footer ul.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
#dw-footer ul.footer-links li {
  margin: 0 0 .1rem;
  padding: 0;
  line-height: 1.35;
}
#dw-footer ul.footer-links li:last-child {
  margin-bottom: 0;
}
#dw-footer .br-widget .row {
  --bs-gutter-x: 0;
  gap: 2.5rem;
  justify-content: flex-end;
}
#dw-footer .br-widget .row > [class*="col-"] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
/* Sliding underline on hover (left-to-right). */
#dw-footer .br-widget a:before,
#dw-footer .footer-end a:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}
#dw-footer .br-widget a:hover:before,
#dw-footer .footer-end a:hover:before {
  left: 0;
  right: initial;
  width: 100%;
}
#dw-footer .footer-end {
  margin-top: 4rem;
  padding-top: 2rem;
}
#dw-footer .footer-end .copyright {
  font-size: 12px;
  color: #9a9ea8;
}
#dw-footer .footer-end .gaegu {
  font-family: 'Gaegu', serif;
  font-weight: 300;
  margin-bottom: 0;
}
#dw-footer ul.footer-social {
  list-style: none;
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  margin: .5rem 0 0;
  padding: 0;
}
#dw-footer ul.footer-social li {
  margin: 0;
  padding: 0;
}
#dw-footer ul.footer-social .dw-icon-2x {
  width: 19px;
  height: 19px;
}

/* Sprite icons, sized like a font icon. */
#dw-footer .dw-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
}
#dw-footer .dw-icon-2x {
  width: 2em;
  height: 2em;
  vertical-align: middle;
}

/* --- Shared page container ------------------------------------------------
   The theme's stepped Bootstrap-3-style `.container`, applied to the header row,
   the main content and the footer so all three share one gutter — otherwise they
   run edge to edge on wide screens while the theme's own chrome stops at 1380px.

   `box-sizing: border-box` is required: the theme gets it from Bootstrap's global
   reset, Shaarli has no such reset, and without it these boxes come out 30px wider
   than the theme's (the 15px gutters land outside the declared width).

   The page title is in this list on purpose, unlike the theme — see #dw-page-leader
   above for why. */
.shaarli-menu .menu-transform,
#dw-page-leader,
#content,
#dw-footer .container {
  box-sizing: border-box;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
/* Shaarli's own `.container { margin-top: 45px }` clears its fixed header. #content
   still wants it; the footer's inner container does not (the theme's is 0). */
#dw-footer .container {margin-top: 0;}
/* The theme puts `word-wrap: break-word` on every .container. Keep it to the footer:
   on #content it lets Shaarli's tight UI chips break mid-word — the "Links per page"
   100 button splits across two lines. */
#dw-footer .container {word-wrap: break-word;}

@media (min-width: 768px) {
  .shaarli-menu .menu-transform, #dw-page-leader, #content, #dw-footer .container {width: 760px;}
}
@media (min-width: 992px) {
  .shaarli-menu .menu-transform, #dw-page-leader, #content, #dw-footer .container {width: 970px;}
}
@media (min-width: 1200px) {
  .shaarli-menu .menu-transform, #dw-page-leader, #content, #dw-footer .container {width: 1170px;}
}
@media (min-width: 1310px) {
  .shaarli-menu .menu-transform, #dw-page-leader, #content, #dw-footer .container {max-width: 1280px; width: 1280px;}
}
@media (min-width: 1400px) {
  .shaarli-menu .menu-transform, #dw-page-leader, #content, #dw-footer .container {max-width: 1380px; width: 1380px;}
}
/* Below Shaarli's desktop breakpoint the header row is the collapsing mobile menu,
   and its sibling title block sits outside it — constraining one and not the other
   would misalign them. Leave it full-bleed on phones. */
@media screen and (max-width: 63.99em) {
  .shaarli-menu .menu-transform {
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}
/* Tablet band (768px – Shaarli's 64em desktop switch): the *mobile* header block is
   the visible one here, and it is a sibling of .menu-transform, so it needs the
   gutter too — otherwise the title sits flush left while the content below is inset.
   `position: relative` is required because .menu-toggle is absolutely positioned at
   `right: 0`, which would otherwise anchor to the full-width fixed .shaarli-menu and
   strand the hamburger at the viewport edge. */
@media screen and (min-width: 768px) and (max-width: 63.99em) {
  .shaarli-menu > .pure-u-lg-0 > .pure-menu {
    position: relative;
    box-sizing: border-box;
    width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (min-width: 992px) and (max-width: 63.99em) {
  .shaarli-menu > .pure-u-lg-0 > .pure-menu {width: 970px;}
}

#dw-footer .row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--bs-gutter-x) * -.5);
  margin-right: calc(var(--bs-gutter-x) * -.5);
  margin-top: calc(var(--bs-gutter-y) * -1);
}
#dw-footer .row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  margin-top: var(--bs-gutter-y);
  max-width: 100%;
  padding-left: calc(var(--bs-gutter-x) * .5);
  padding-right: calc(var(--bs-gutter-x) * .5);
  width: 100%;
}
#dw-footer .col-4 {flex: 0 0 auto; width: 33.333333%;}
#dw-footer .align-items-end {
  align-items: flex-end;
}
#dw-footer .mt-3 {margin-top: 1rem;}
#dw-footer .mt-5 {margin-top: 3rem;}
#dw-footer .mb-n1 {margin-bottom: -.25rem;}
#dw-footer p {margin: 0;}

@media (min-width: 768px) {
  #dw-footer .col-md-6 {flex: 0 0 auto; width: 50%;}
  #dw-footer .mt-md-0 {margin-top: 0;}
  #dw-footer .text-md-start {text-align: left;}
  #dw-footer .text-md-end {text-align: right;}
}
@media (min-width: 992px) {
  #dw-footer .col-lg-5 {flex: 0 0 auto; width: 41.666667%;}
  #dw-footer .col-lg-6 {flex: 0 0 auto; width: 50%;}
  #dw-footer .offset-lg-1 {margin-left: 8.333333%;}
}
@media (max-width: 767.98px) {
  #dw-footer .footer-end .gaegu,
  #dw-footer ul.footer-social {
    justify-content: flex-start;
  }
  #dw-footer .footer-end .col-md-6.text-md-end {
    text-align: left;
  }
  #dw-footer .br-widget .row {
    justify-content: flex-start;
  }
}