/* ==========================================================================
   cf-drawer-panels.css                                                  11.09
   --------------------------------------------------------------------------
   WHY THIS IS ITS OWN FILE

   custom.css reached 1,045,076 characters and cPanel's file API now refuses to
   read it: "larger than the maximum". The hash-verified splice deploy this
   project has used since the start reads the live file before writing it, so
   that deploy path is closed for custom.css from here on.

   The template enqueues EVERY file in css/custom/, which is how a stray .bak
   left in this folder once got served as a second stylesheet. That same
   behaviour is the way out: a new stylesheet here is picked up with no Joomla
   change, and it is small enough to read, splice and verify normally.

   Nothing in here competes with custom.css on equal terms - every selector
   below either names a class that exists nowhere else (.cfd-*) or is more
   specific than the rule it overrides - so loading before custom.css, as the
   alphabet puts it, changes nothing.
   ========================================================================== */
/* ==========================================================================
   THE MOBILE MENU: SLIDE-IN PANELS                                     11.09
   --------------------------------------------------------------------------
   Five rows, tap one, its panel slides in from the right. Built by
   cf-drawer-panels.js, which MOVES the drawer's own sub-lists into the
   panels rather than rebuilding them - so every row in a panel is the row
   that was already there, at the 14/500 it already had. Nothing below sets
   a size on those rows; it only lays them out.

   WHAT THE VIEWPORT WRAPS
   The root list only. `nav.cf-menufoot` stays where it is, pinned at the
   foot - the service block was a deliberate decision (structure E,
   Net-a-Porter) and it stays visible in every panel.
   ========================================================================== */
html body #offcanvas .cfd-vp{
  position: relative !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;   /* a flex child will not shrink below content without this */
}
html body #offcanvas .cfd-pane{
  position: absolute !important;
  inset: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  background: inherit !important;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
  will-change: transform;
}
/* The root slides out to the left as the panel comes in, so the two move
   together and the panel reads as a step forward rather than a cover. */
html body #offcanvas .cfd-pane--root{ transform: translateX(0) !important; }
html body #offcanvas .cfd-vp.is-deep .cfd-pane--root{ transform: translateX(-100%) !important; }
html body #offcanvas .cfd-pane--cat{
  transform: translateX(100%) !important;
  visibility: hidden !important;
}
html body #offcanvas .cfd-pane--cat.is-on{
  transform: translateX(0) !important;
  visibility: visible !important;
}
@media (prefers-reduced-motion: reduce){
  html body #offcanvas .cfd-pane{ transition: none !important; }
}

/* THE BACK CONTROL
   14/400, Anur's call: the same size as the rows so it belongs to them,
   one weight lighter so it does not compete with them. Caps and tracked in
   the shape of the site's other back link (Sve pozicije on a position
   page), at the drawer's own caps tracking - .26em, the value
   .cf-menufoot__label already uses in this same panel. The chevron is 8px
   against 14px text: smaller than the word, as asked. */
html body #offcanvas button.cfd-back{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 20px 20px 18px !important;
  border: 0 !important;
  background: none !important;
  font: 400 14px/1.3 var(--cf-sans) !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  color: #000000 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  min-height: 44px !important;   /* the touch rung */
}
html body #offcanvas .cfd-back__arw{
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 8px !important;
  display: block !important;
}
html body #offcanvas .cfd-back__txt{ display: inline-block !important; }

/* NO CATEGORY TITLE, DELIBERATELY
   A panel used to open with the category set in serif - the only serif in the
   drawer, against 14/500 rows, a 14/400 caps back control and 10/400 caps group
   labels. Anur's call, and the naming was redundant anyway: the reader has just
   tapped the row that says Zene, and the control above still reads MENI, so the
   panel announced itself twice and in a voice nothing else in the drawer used.

   The name is not lost, only unprinted - buildPanel() puts it on the panel's
   aria-label, so a screen reader still says which panel this is.

   NO SPECIAL CASE FOR THE FIRST GROUP LABEL. The first attempt gave it its own
   padding-top to make up for the space the title used to hold. Measured, that
   was backwards: the rule OVERRODE the label's own 24px rather than adding to
   it, and the first label ended up 27px under MENI while every later label sits
   40px under the row above it - the one gap in the panel that did not match the
   others. Removing the exception leaves the label's own 24px, which measures 43
   from MENI. One rule for every group label, and one rhythm down the panel. */

/* The moved list, flat. It arrives carrying the accordion's nesting - an
   indent and, on the groups, a sub-opener that has nothing left to open. */
html body #offcanvas .cfd-pane--cat .cfd-grouplist,
html body #offcanvas .cfd-pane--cat .cfd-grouplist ul{
  display: block !important;
  height: auto !important;
  max-height: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  transform: none !important;
}
html body #offcanvas .cfd-pane--cat .mod-offcanvas-menu--item-sub-opener{ display: none !important; }

/* A group's own row becomes its label, on the drawer's existing caps rung -
   the 10/400/.26em/#949494 that .cf-menufoot__label uses a few hundred
   pixels below. Reusing it rather than inventing a rung keeps the drawer to
   two type sizes: 14 for things you tap, 10 for things that name a group. */
html body #offcanvas .cfd-pane--cat .cfd-grouplist > li.mod-offcanvas-menu--deeper > a,
html body #offcanvas .cfd-pane--cat .cfd-grouplist > li.mod-offcanvas-menu--deeper > span{
  font: 400 10px/1.4 var(--cf-sans) !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  color: #949494 !important;
  padding: 24px 20px 8px !important;
  min-height: 0 !important;
  pointer-events: none !important;   /* it is a label, not a destination */
}
html body #offcanvas .cfd-pane--cat .cfd-grouplist > li.mod-offcanvas-menu--deeper > a *,
html body #offcanvas .cfd-pane--cat .cfd-grouplist > li.mod-offcanvas-menu--deeper > span *{
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
}
/* A group that collapsed to a single link is a row again, not a label. */
html body #offcanvas .cfd-pane--cat .cfd-grouplist > li.cfd-grp--flat > a{
  pointer-events: auto !important;
  padding: 0 20px !important;
}

/* Vidi sve, for the two categories that are also real pages. It is one of
   the rows, so it is set like one: 14/500, the same gutter, the same rung. */
html body #offcanvas a.cfd-prow{
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  font: 500 14px/1.3 var(--cf-sans) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #000000 !important;
  text-decoration: none !important;
}

/* The level-1 rows are now doors, so the accordion's + becomes the chevron
   the proposal called for. A > implies a panel; a + implies expand in
   place, and it would now be lying. */
html body #offcanvas li.cfd-haspanel > a.mod-offcanvas-menu--item-anchor,
html body #offcanvas li.cfd-haspanel > span.mod-offcanvas-menu--heading{ cursor: pointer !important; }
html body #offcanvas li.cfd-haspanel > .mod-offcanvas-menu--item-anchor .mod-offcanvas-menu--item-sub-opener,
html body #offcanvas li.cfd-haspanel > .mod-offcanvas-menu--heading .mod-offcanvas-menu--item-sub-opener{
  opacity: 1 !important;
}

/* THE INDENT THE ROWS ARRIVE WEARING
   A row three levels down in an accordion is indented to say so. Moved into a
   panel it keeps that indent, and the panel then has four different left edges
   running down it: back and title at 20, a group label at 74, its rows at 88.

   In a panel the indent has nothing left to say - the panel IS the nesting -
   so it goes, and the gutter is set once, on the row, at the 20 the drawer
   already uses. This is the one place moving the real markup costs something,
   and it is still cheaper than rebuilding the rows.

   THREE THINGS THE FIRST ATTEMPT GOT WRONG, ALL MEASURED
   1. SPECIFICITY, NOT ORDER. Files in css/custom/ are enqueued alphabetically,
      so cf-drawer-panels.css loads BEFORE custom.css - later rules there win
      every tie. custom.css carries
        html body #offcanvas .mod-offcanvas-menu--sub .--item-inner > .--item-title
      at (1,3,2); the reset was (1,2,2) and lost on both counts. Doubling the id
      and the panel class takes it to (2,4,2), which wins on specificity alone
      and so does not depend on load order at all.
   2. THE 14px WAS NOT PADDING. `span.mod-offcanvas-menu--item-indent` is an
      empty spacer the template prints inside each row, 14px per level - 14 on a
      group, 28 on its rows. Zeroing padding left it behind: rows measured 34
      and 48 instead of 20. It draws the accordion's nesting, so in a panel it
      is hidden outright.
   3. NAS SVIJET HAS NO GROUPS. Its six children are flat level-2 items with no
      sub-list and no --deeper class, so a gutter written as
      `> li.--deeper > a` and `> li > ul > li > a` missed every one of them and
      they sat at 0. One rule for every row at any depth covers all five panels
      and whatever shape the menu takes next.

   Measured after, all five panels, at 390 / 430 / 570: every text left edge is
   20, and the back label is 38 because its 8px arrow sits at 20. */
html body #offcanvas#offcanvas .cfd-pane--cat.cfd-pane--cat .mod-offcanvas-menu--item-indent{
  display: none !important;
}
html body #offcanvas#offcanvas .cfd-pane--cat.cfd-pane--cat .mod-offcanvas-menu--item-inner,
html body #offcanvas#offcanvas .cfd-pane--cat.cfd-pane--cat .mod-offcanvas-menu--item-title,
html body #offcanvas#offcanvas .cfd-pane--cat.cfd-pane--cat .cfd-grouplist ul,
html body #offcanvas#offcanvas .cfd-pane--cat.cfd-pane--cat .cfd-grouplist li{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* the gutter, set once, on the row - every row, at every depth */
html body #offcanvas#offcanvas .cfd-pane--cat.cfd-pane--cat .cfd-grouplist li > a,
html body #offcanvas#offcanvas .cfd-pane--cat.cfd-pane--cat .cfd-grouplist li > span{
  padding-left: 20px !important;
  padding-right: 20px !important;
}