/*
 * matahari.css
 *
 * The only stylesheet in this project that we own. Every other stylesheet
 * under static/ was generated by the WordPress export (the Fargo/Pixelgrade
 * theme, WooCommerce, Jetpack, ...) and is never hand-edited; theme fixes
 * live here instead. It sits in `assets/` rather than `static/` because only
 * `assets/` goes through Hugo Pipes, which fingerprints the filename; see the
 * comment on the <link> in layouts/_default/baseof.html for why that matters.
 * This file is linked last in the page chrome so its rules
 * win on cascade order, not through specificity hacks or !important, with
 * one documented exception below where a theme rule is itself `!important`
 * and nothing short of `!important` can override it.
 *
 * Fixes the navbar menu control's visuals, which the export ships broken: no
 * CSS anywhere sizes the `.c-burger` icon markup, and it hides the icon
 * wrapper (`.c-navbar__label-icon`) unconditionally. Every selector below is
 * scoped under `.c-navbar`, whose markup exists exactly once, in the site
 * header.
 *
 * KNOWN OPEN DEFECT, not fixed here: the theme also hides the toggle
 * checkbox (`.c-navbar__checkbox`) with `display: none`, which removes the
 * only route to the navigation from the keyboard tab order entirely (the
 * skip link cannot reach it). Overriding `display` alone was tried in a
 * real browser: it makes the element focusable programmatically, but
 * tabbing from the skip link still does not land on it, and the element's
 * box then measures 21x21 rather than the expected 1x1, so the usual
 * visually-hidden technique does not behave as intended either. The cause
 * is not yet understood; needs its own investigation, not a guess here.
 */

/* The menu control: icon + "Menu" text. No box. The header is deliberately
   quiet, and a bordered rectangle in the corner reads as a stray artifact
   rather than as a control. The padding stays for the hit area. */
.c-navbar .c-navbar__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.c-navbar .c-navbar__label:hover {
  opacity: 0.65;
}

/* The theme hides this wrapper unconditionally; the burger lives inside it. */
.c-navbar__label .c-navbar__label-icon {
  display: inline-flex;
  align-items: center;
}

.c-navbar__label-icon .c-burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 14px;
}

.c-navbar__label-icon .c-burger__slice {
  display: block;
  width: 100%;
  height: 2px;
  background-color: currentColor;
}

/* ---------------------------------------------------------------------------
 * Homepage hero: let the fixed header overlay it on narrow screens, the way
 * it already does on desktop, instead of pushing the hero down.
 *
 * `.site` (the page wrapper) gets `padding-top` set inline by the theme's
 * own JS (`StickyHeader.onResize`, main-ver-1-0-1.js) equal to the header's
 * height, so content clears a header that would otherwise sit on top of it.
 * On desktop that push is cancelled again: the parent theme has
 * `.has-hero .site { padding-top: 0 !important }` (style-ver-7-0.css), so a
 * hero page's content starts at the very top and the fixed header floats
 * over the photograph. But the CHILD theme re-adds the push, `!important`,
 * specifically for screens <=800px and specifically for this page template
 * (fargo-child-master/style.css, `@media (max-width: 800px)`,
 * `.page-template-portfolio-page.has-hero .site`). That is what makes
 * mobile the odd one out: the header takes 56px of layout flow there, so a
 * 100vh hero overflows the viewport by exactly the header's height and
 * whatever sits at the hero's bottom (the caption below) gets clipped by
 * that same 56px.
 *
 * Cancelling that one theme rule (same selector, so we don't touch pages
 * this was never meant to affect) needs `!important` to win: nothing short
 * of it beats an `!important` declaration. This file otherwise wins purely
 * on load order and avoids `!important` on purpose (see the file header),
 * this is the one place fighting an upstream `!important` leaves no other
 * way to remove the push at its source rather than compensate for it
 * downstream with a hard-coded offset.
 *
 * The query below is `max-width: 800px`, in px, matching the child theme's
 * own rule exactly, NOT the `50em` used elsewhere in this file. The two are
 * equal at the default root font size, but `max-width: 800px` is inclusive
 * of 800px while `not (min-width: 50em)` is not: measured, the push this
 * rule cancels is still applied by the theme at exactly 800px, so matching
 * `not (min-width: 50em)` here would leave a 1px-wide gap at 800px where
 * the hero overflows again. The caption rule further below counters a
 * different theme rule, one that does use `50em`, so it correctly keeps
 * `50em` for itself.
 * --------------------------------------------------------------------------- */
@media only screen and (max-width: 800px) {
  .page-template-portfolio-page.has-hero .site {
    padding-top: 0 !important;
  }

  /* With the header now overlaying the hero, reuse the exact mechanism
     desktop already uses to keep it legible: while the page hasn't been
     scrolled past the hero, the theme's own JS keeps `u-site-header-sticky--
     top` on <body>, and the theme's CSS uses that to make the header
     background transparent and its text/icons white
     (style-ver-7-0.css, `@media (min-width: 50em)`). That rule is scoped to
     desktop only; this mirrors it below 50em, for the same page. */
  .page-template-portfolio-page.u-site-header-sticky--top .site-header {
    background: transparent;
  }

  .page-template-portfolio-page.u-site-header-sticky--top .c-navbar,
  .page-template-portfolio-page.u-site-header-sticky--top .c-navbar li {
    color: #fff;
  }
}

/* ---------------------------------------------------------------------------
 * Hero caption on narrow screens.
 *
 * The theme breaks the caption out of the overlay below 50em on purpose:
 * `.c-hero__wrapper` gets `position: static` (which cancels the inherited
 * `.c-hero__layer { position: absolute; inset: 0 }`), plus `order: -1` and
 * `color: initial`. The result stacks a large block of black type above the
 * photograph, about 190px of it on a 390px screen, so the first thing a
 * visitor to a photography site sees is a caption rather than a photograph.
 *
 * This restores the desktop treatment. Note WHY desktop can do it without a
 * scrim and mobile cannot: on desktop the photograph occupies part of the
 * width and the title sits over the theme's dark backdrop, so white type is
 * legible for free. Mobile is full bleed, over whichever photograph the
 * slider happens to be on, so the scrim below is explicit rather than
 * inherited. Do not remove it because a particular slide looks fine without.
 *
 * The breakpoint is the theme's own 50em, written the same way, so there is
 * no width at which both treatments apply or neither does.
 * --------------------------------------------------------------------------- */
@media not screen and (min-width: 50em) {
  .c-hero .c-hero__wrapper {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    padding: 72px 20px 22px;
    text-align: left;
    color: #fff;
    background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.45) 40%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .c-hero .c-hero__title-mask {
    margin-top: 0;
    margin-bottom: 0;
  }

  .c-hero .c-hero__title {
    font-size: 26px;
    line-height: 1.15;
  }
}

/* ---------------------------------------------------------------------------
 * Hero slide gutters on narrow screens: the CSS half.
 *
 * The theme insets each slide with `.c-hero__slide > .c-hero__layer
 * { margin: 0 8px }` below 50em. Combined with slick's own 28px of
 * centre padding that put the photograph at 318px inside a 390px viewport,
 * with page background and slivers of the neighbouring slides down both
 * sides. The site sells photographs, so the photograph fills the frame.
 *
 * This cancels the 8px. **The other 28px per side is not CSS-fixable** and is
 * handled in `assets/js/matahari.js`, which asks slick to re-lay-out with
 * `centerPadding: 0`. The reason it cannot be done here is written up there:
 * slick sets the list padding and every slide width INLINE and derives the
 * track offset from them, so changing one in CSS desynchronises the rest.
 *
 * The breakpoint is `max-width: 800px` to match that script and the header
 * rule above. If you change one, change all three.
 * --------------------------------------------------------------------------- */
@media only screen and (max-width: 800px) {
  .c-hero .c-hero__slide > .c-hero__layer {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---------------------------------------------------------------------------
 * The price list package cards.
 *
 * Three problems this solves, all of them visible only by LOOKING at the page
 * rather than measuring it, which is how they shipped in the first place.
 *
 * 1. The packages stacked in one narrow column on a wide screen. The theme
 *    caps `.row` inside `.u-content-width` at about 768px, a prose measure,
 *    so a 1440px screen showed a 768px ribbon of text: correct by every
 *    number we checked, and it read like a phone page. The markup now puts
 *    the grid OUTSIDE `u-content-width`, so the theme's own `col-4` and
 *    `col-6` can spread across the full container. The intro line and the
 *    styling paragraph stay inside it, because prose still wants a measure.
 *
 * 2. The photographs were gone. A price list with no pictures on a
 *    photography site reads as a spreadsheet. These are the same five images
 *    the old WooCommerce archive used.
 *
 * 3. The source images have five different aspect ratios, from 1536x1024
 *    landscape to 863x1536 portrait. Dropped into a grid unaltered they
 *    stagger the headings below them, which is the ragged-strip problem this
 *    project already hit once on the business page. `aspect-ratio` plus
 *    `object-fit: cover` makes every card the same shape whatever the source,
 *    so removing it will re-rag the grid.
 * --------------------------------------------------------------------------- */
.mh-package__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: 18px;
}

/* The card title needs to sit tight to its price, and both need air above,
   so a scanner sees five packages rather than one continuous list. The
   theme's default h2 rhythm is tuned for prose, where headings are far
   apart already. */
.mh-package .mh-package__title {
  margin-top: 0;
  margin-bottom: 2px;
}

.mh-package .mh-package__price {
  margin-top: 0;
  margin-bottom: 14px;
  font-weight: 700;
}

.mh-package ul {
  margin-bottom: 22px;
}

/* Cards in a row are unequal in height (different numbers of inclusions), so
   without this the "Vraag een offerte aan" buttons sit at different heights
   and the row looks broken rather than deliberate. */
.mh-packages {
  align-items: stretch;
  /* Load-bearing. `margin-top: auto` below pushes each button to the bottom
     of its card, which without this puts it flush against the NEXT row's
     photographs: measured, row one's buttons were overlapping row two's
     images. The gap has to live on the row, not on the card, or the last
     row gains a stray gap above the section that follows. */
  margin-bottom: 56px;
}

.mh-packages .mh-package {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mh-packages .mh-package > p:last-child {
  margin-top: auto;
}

/* The closing note sits in the same grid as the cards so it lines up with
   them on the left. Putting it in the theme's `u-content-width` instead
   centred it in a narrower measure, which read as a misalignment against
   the full-width grid above. It still wants a prose measure, so it gets one
   here rather than running the full width. */
.mh-packages--last {
  margin-bottom: 0;
}

.mh-note {
  max-width: 46em;
}

/* One column on a phone, with real separation between cards. Stacked cards
   with the theme's default spacing ran together, so the five packages read
   as one long list. */
@media only screen and (max-width: 800px) {
  .mh-packages .mh-package {
    margin-bottom: 44px;
  }
}

/* The row gap is NOT cancelled on mobile, and that is deliberate. An earlier
   version zeroed it there, reasoning that the per-card margin above already
   separates stacked cards. It does not do the job at a ROW boundary: the
   button is pushed to the very bottom edge of its card by `margin-top: auto`,
   so with no gap on the row it lands on top of the next row's photograph.
   Measured on a 390px screen, the Elegantie button overlapped the
   Bedrijfsreportage image and the Bruiloftsreportage button overlapped the
   "Styling erbij" heading. */