/*
 * Enkairo child theme stylesheet (BRIEF.md "Design"; THEME-SPEC.md).
 *
 * Everything theme.json cannot express lives here: the palette custom
 * properties the toggle flips, the frame border-image, the flame divider,
 * header, Work grid, project page, footer, focus and motion rules.
 * inc/setup.php enqueues it on the front end and registers it with
 * add_editor_style, so framed blocks look framed while editing.
 *
 * Sections
 *   1  Palettes and frame knobs
 *   2  Page colours, links, emphasis, palette-specific artwork
 *   3  Frame (border-image)
 *   4  Flame divider
 *   5  Header: site mark, navigation, toggle
 *   6  Work grid
 *   7  Project page
 *   8  Pull quote
 *   9  Footer
 *  10  Focus, motion, small screens
 */

/* 1. Palettes (BRIEF.md, verbatim). Custom properties on html; class
   "charcoal" on html flips them. The inline script inc/setup.php prints in
   wp_head applies the stored choice before first paint; theme-toggle.js
   wires the button. No prefers-color-scheme auto-detection: parchment is
   the default and the button is the only switch. color-scheme follows so
   native form controls and scrollbars match the palette. The parchment
   values are repeated in inc/setup.php (enkairo_editor_palette_properties)
   for the admin document around the editor canvas; change both. */
html {
  color-scheme: light;
  --ed-bg: #F3EBDA;
  --ed-ink: #3B2A14;
  --ed-ink2: #5C4525;
  --ed-ink3: #7A5C30;
  --ed-tile: #E4D6B8;
  --ed-mark: #854F0B;
  /* Gold rules are the same in both palettes. */
  --ed-gold: #BA7517;
  --ed-gold-2: #EF9F27;
  /* Frame knobs (section 3): the band width, and the border-image slice
     that cuts the 32-unit band out of the 96-unit frame.svg. Decision
     note: 16px, not the spec's 12px. frame.svg is drawn so that one unit
     is 0.5px at 16px, which keeps the 3px double rule and the 0.5px inner
     rule pixel-true and leaves room for a 9px corner ornament; at 12px the
     ornament was about 7px and read as a heavier corner at 1x screens. The
     rules scale with the width, so a different width means redrawing the
     SVG, not just changing this value. */
  --ed-frame-width: 16px;
  --ed-frame-slice: 32;
}

html.charcoal {
  color-scheme: dark;
  --ed-bg: #1F1C18;
  --ed-ink: #EFE4CC;
  --ed-ink2: #C9B58E;
  --ed-ink3: #A08C66;
  --ed-tile: #2E2924;
  --ed-mark: #FAC775;
}

/* 2. Page colours. theme.json paints body through its presets, which are
   var(--ed-*) references (see style.css); the wrapper is painted as well so
   the palette also fills the editor canvas. */
body,
.wp-site-blocks {
  background-color: var(--ed-bg);
  color: var(--ed-ink);
}

/* Decision note: the brief names no link colour. Links stay ink (theme.json)
   with a gold hairline underline and turn "mark" on hover; mark-coloured
   links read too loud in running text. */
a:where(:not(.wp-element-button)) {
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ed-gold);
  text-underline-offset: 0.18em;
}

/* Emphasis is Alegreya medium (500), not browser bold; the variable font
   carries the weight (THEME-SPEC.md "Typography"). */
strong,
b {
  font-weight: 500;
}

/* Palette-specific artwork (BRIEF.md: Kai supplies light, dark and dual-use
   versions where needed). Decision note: dual-use artwork is the default and
   nothing swaps an image by itself. Where two versions exist Kai places both
   Image blocks and gives each one of these classes (block settings, Advanced,
   Additional CSS class(es)); the one for the other palette is hidden. Scoped
   to .wp-site-blocks so both versions stay visible and editable in the
   editor canvas, which has no such wrapper. !important outranks core's
   display rules on gallery tiles. */
html:not(.charcoal) .wp-site-blocks .ed-only-charcoal,
html.charcoal .wp-site-blocks .ed-only-parchment {
  display: none !important;
}

/* 3. Frame (BRIEF.md): 3px double gold rule, 0.5px inner rule and corner
   ornaments, drawn once in assets/svg/frame.svg and applied as a
   border-image, so replacing that one file re-skins every frame. Slice 32
   cuts the corners and the rule bands; "stretch" is safe because only the
   rules cross the edge slices. Applied to the framed Image (figure), each
   tile of a framed Gallery, the framed Cover, the framed Group, the header
   group (parts/header.html carries is-style-framed) and the Work grid
   tiles (no block style needed there).
   Class-less fallback: "Framed" is the default style inside projects
   (inc/block-styles.php) and a default style saves no is-style-* class, so
   an Image, Gallery or Cover inserted directly into a project is framed
   here by context: inside .ed-project (the project template, front end and
   site editor) and inside the portfolio editor canvas, whose wrapper
   carries post-type-portfolio. Group is left out on purpose: the meta and
   nav groups live inside .ed-project and must stay unframed. */
.is-style-framed,
.ed-frame,
.wp-block-gallery.is-style-framed .wp-block-image,
.ed-work-grid .wp-block-post-featured-image,
.ed-project .wp-block-image:not([class*="is-style-"]),
.ed-project .wp-block-gallery:not([class*="is-style-"]) .wp-block-image,
.ed-project .wp-block-cover:not([class*="is-style-"]),
.editor-styles-wrapper.post-type-portfolio .wp-block-image:not([class*="is-style-"]),
.editor-styles-wrapper.post-type-portfolio .wp-block-gallery:not([class*="is-style-"]) .wp-block-image,
.editor-styles-wrapper.post-type-portfolio .wp-block-cover:not([class*="is-style-"]) {
  box-sizing: border-box;
  /* The border is the fallback and stays real: border-style is ignored
     while the border-image paints, so the double gold rule only shows when
     frame.svg fails to load (a 404 after a bad sync, a blocked request). A
     transparent border here would make every frame vanish silently. */
  border: var(--ed-frame-width) double var(--ed-gold);
  border-image: url(../svg/frame.svg) var(--ed-frame-slice) / var(--ed-frame-width) / 0 stretch;
  /* Block backgrounds stop at the band; the page shows through its
     transparent parts. */
  background-clip: padding-box;
}

/* Image: the figure carries the frame, the picture fills it and a caption
   sits inside the band like a plate label. The same class-less selectors
   as above so a directly inserted image behaves like a framed one. */
.wp-block-image.is-style-framed,
.ed-project .wp-block-image:not([class*="is-style-"]),
.editor-styles-wrapper.post-type-portfolio .wp-block-image:not([class*="is-style-"]) {
  padding: 0;
}
.wp-block-image.is-style-framed a,
.ed-project .wp-block-image:not([class*="is-style-"]) a,
.editor-styles-wrapper.post-type-portfolio .wp-block-image:not([class*="is-style-"]) a {
  display: block;
}
.wp-block-image.is-style-framed img,
.ed-project .wp-block-image:not([class*="is-style-"]) img,
.editor-styles-wrapper.post-type-portfolio .wp-block-image:not([class*="is-style-"]) img {
  display: block;
  width: 100%;
  height: auto;
}
.wp-block-image.is-style-framed figcaption,
.ed-project .wp-block-image:not([class*="is-style-"]) figcaption,
.editor-styles-wrapper.post-type-portfolio .wp-block-image:not([class*="is-style-"]) figcaption {
  margin: 0.5em 0.75em 0.75em;
}

/* Gallery: each tile is framed, never the wrapper. Core sizes the tiles
   with box-sizing: border-box, so the band fits inside the column width. */
.wp-block-gallery.is-style-framed {
  border: 0;
  border-image: none;
}

/* Cover: the frame sits on the container. Core positions the background
   image and the dim overlay against the padding box, so they stay inside
   the band and the rules remain visible around the hero. */
.wp-block-cover.is-style-framed,
.ed-project .wp-block-cover:not([class*="is-style-"]),
.editor-styles-wrapper.post-type-portfolio .wp-block-cover:not([class*="is-style-"]) {
  padding: var(--wp--preset--spacing--50);
}

/* Group: content sits inside the band. */
.wp-block-group.is-style-framed {
  padding: var(--wp--preset--spacing--50);
}

/* 4. Section divider (BRIEF.md): a hairline gold rule broken by a centred
   flame. The icon box carries the page colour, which is what breaks the
   rule: 28px icon with 10px of page colour either side. width: auto is a
   guard only: core's 100px cap on the default separator lives in the
   block's theme.css, which loads only for themes that opt into
   wp-block-styles, and Twenty Twenty-Five does not.
   Class-less fallback, as for the frame in section 3: "Flame divider" is
   the default separator style inside projects (inc/block-styles.php) and a
   default style saves no is-style-* class, so a Separator inserted directly
   into a project gets the flame here by context, inside .ed-project and
   inside the portfolio editor canvas. The pattern, the template and the
   footer part carry is-style-flame themselves. */
.wp-block-separator.is-style-flame,
.ed-project .wp-block-separator:not([class*="is-style-"]),
.editor-styles-wrapper.post-type-portfolio .wp-block-separator:not([class*="is-style-"]) {
  position: relative;
  width: auto;
  height: 0;
  margin: var(--wp--preset--spacing--60) auto;
  border: 0;
  border-top: 0.5px solid var(--ed-gold);
  background: none;
  opacity: 1;
  overflow: visible;
}
.wp-block-separator.is-style-flame::after,
.ed-project .wp-block-separator:not([class*="is-style-"])::after,
.editor-styles-wrapper.post-type-portfolio .wp-block-separator:not([class*="is-style-"])::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 48px;
  height: 28px;
  transform: translate(-50%, -50%);
  background: var(--ed-bg) url(../svg/flame.svg) center / 28px 28px no-repeat;
}

/* 5. Header (parts/header.html): a framed flex Group, nothing sticky
   (Squarespace 7.1 sparse nav). The group's own layout is space-between:
   the mark sits left and an inner right-justified flex Group (no class of
   its own) holds the navigation and the toggle, so the two wrap as one
   cluster on narrow screens instead of splitting across the row. */
.wp-block-group.ed-header {
  margin-top: var(--wp--preset--spacing--50);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  align-items: center;
}

/* Site mark: "Kai" in IM Fell English SC, coloured "mark". Decision note:
   a template-level link rather than the Site Title block, because that
   block would print "Enkairo Designs", which must stay the browser title. */
.ed-site-mark {
  margin: 0;
  font-family: var(--wp--preset--font-family--im-fell-english-sc);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: 1;
  letter-spacing: 0.02em;
}
.ed-site-mark a {
  color: var(--ed-mark);
  text-decoration: none;
}
.ed-site-mark a:hover {
  color: var(--ed-ink);
}

/* Navigation: family, size, letter-spacing and colours come from
   theme.json. This adds the gold underline on hover and on the current
   page (current-menu-item is added by inc/setup.php, because core only
   marks links that point at a post id and the header links are custom
   URLs), and paints the mobile overlay in the active palette. Core sets
   the overlay to white on black with a five-class selector; the :not()
   chain below mirrors it so this rule outranks it. */
.ed-header .wp-block-navigation a:where(:not(.wp-element-button)):hover,
.ed-header .wp-block-navigation .current-menu-item > a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ed-gold);
  text-underline-offset: 0.35em;
}
.ed-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  background-color: var(--ed-bg);
}
.ed-header .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  color: var(--ed-ink);
}

/* Theme toggle (BRIEF.md): a real button after the nav. theme-toggle.js
   swaps the label between "Charcoal" and "Parchment" (the palette a click
   switches to); min-width stops the header shifting when it does. The
   charcoal state is styled from the html class, not from aria-pressed:
   a toggle whose name changes with its state would be announced as
   "Parchment, pressed" while charcoal is on, so the button is a plain
   action button with no pressed state. */
.ed-theme-toggle {
  min-width: 7em;
  margin: 0;
  padding: 0.3em 0.9em;
  border: 1px solid var(--ed-gold);
  border-radius: 0;
  background: transparent;
  color: var(--ed-ink);
  font-family: var(--wp--preset--font-family--im-fell-english-sc);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.ed-theme-toggle:hover {
  border-color: var(--ed-gold-2);
  color: var(--ed-mark);
}
html.charcoal .ed-theme-toggle {
  background-color: var(--ed-tile);
}

/* 6. Work grid (templates/front-page.html): Query Loop over portfolio in a
   Post Template grid, columnCount 3. Core emits repeat(3, minmax(0, 1fr))
   with no breakpoint, so the collapse to two and one columns is in
   section 10. Tiles are framed featured images on the tile colour (seen
   while an image loads), titles centred underneath. The template requests
   the ed-tile size (1000x750, cropped 4:3); aspect-ratio and object-fit
   keep the box at 4:3 for the placeholder and for any other size Kai
   picks. */
.ed-work {
  margin-top: var(--wp--preset--spacing--60);
}
.ed-work-grid .wp-block-post-featured-image {
  margin: 0;
  background-color: var(--ed-tile);
}
.ed-work-grid .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ed-work-title {
  margin: var(--wp--preset--spacing--30) 0 0;
  font-size: var(--wp--preset--font-size--large);
  text-align: center;
}
.ed-work-title a {
  color: var(--ed-ink);
  text-decoration: none;
}
.ed-work-title a:hover {
  color: var(--ed-mark);
}
.ed-work .wp-block-query-pagination {
  justify-content: center;
  margin-top: var(--wp--preset--spacing--60);
  font-family: var(--wp--preset--font-family--im-fell-english-sc);
}

/* 7. Project page (templates/single-portfolio.html; the locked template in
   inc/cpt-portfolio.php): framed hero Cover, two-column meta group, then
   the framed patterns, then previous/next project links, which follow the
   grid order (inc/cpt-portfolio.php). */
.ed-project {
  margin-top: var(--wp--preset--spacing--50);
}
.ed-project-meta {
  color: var(--ed-ink2);
}
.ed-project-meta p {
  margin: 0 0 0.35em;
}
.ed-project-meta strong {
  color: var(--ed-ink);
}
.wp-block-group.ed-project-nav {
  margin-top: var(--wp--preset--spacing--70);
  padding-top: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--ed-gold);
  font-family: var(--wp--preset--font-family--im-fell-english-sc);
}
.ed-project-nav a {
  text-decoration: none;
}
.ed-project-nav .post-navigation-link__label {
  display: block;
  color: var(--ed-ink3);
  font-family: var(--wp--preset--font-family--alegreya);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.04em;
}
.ed-project-nav .post-navigation-link-next {
  text-align: right;
}

/* 8. Pull quote: IM Fell English italic, centred and sized by theme.json;
   gold hairlines above and below are the only addition. Targets the block
   class so a pull quote inserted without the pattern gets them too; the
   pattern's ed-pullquote class is a free hook with no rule of its own. */
.wp-block-pullquote {
  border-top: 0.5px solid var(--ed-gold);
  border-bottom: 0.5px solid var(--ed-gold);
}

/* 9. Footer (parts/footer.html): centred and minimal. The group's HTML
   anchor is "contact"; scroll-margin keeps the heading clear of the top
   edge when the nav's Contact link lands here. */
.wp-block-group.ed-footer {
  margin-top: var(--wp--preset--spacing--70);
  padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--70);
  color: var(--ed-ink2);
  text-align: center;
  scroll-margin-top: var(--wp--preset--spacing--50);
}
.ed-footer h2 {
  margin: 0 0 0.25em;
  color: var(--ed-ink);
}
.ed-footer p {
  margin: 0 0 0.5em;
}
.ed-footer a {
  color: var(--ed-ink);
}
.ed-footer p a {
  margin: 0 0.6em;
}

/* 10. Focus, motion, small screens. The ring is "mark": gold-2 is 1.8:1
   against parchment, below the 3:1 non-text minimum; mark is 5.7:1 on
   parchment and 10.9:1 on charcoal. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ed-mark);
  outline-offset: 3px;
}

/* The palette switch fades and the Contact anchor scrolls smoothly; both
   are dropped for readers who asked for less motion. Every element that
   sets a palette colour of its own is listed, not just the page: headings
   and links take their colour from theme.json presets and the tiles,
   footer and nav from --ed-* directly, so without this they would snap to
   the new palette while the page behind them was still fading. */
body,
.wp-site-blocks,
.ed-header,
.ed-theme-toggle,
h1, h2, h3, h4, h5, h6,
a,
.wp-block-navigation,
.ed-work-grid .wp-block-post-featured-image,
.ed-project-meta,
.ed-footer,
.wp-block-separator.is-style-flame::after,
.ed-project .wp-block-separator:not([class*="is-style-"])::after {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  body,
  .wp-site-blocks,
  .ed-header,
  .ed-theme-toggle,
  h1, h2, h3, h4, h5, h6,
  a,
  .wp-block-navigation,
  .ed-work-grid .wp-block-post-featured-image,
  .ed-project-meta,
  .ed-footer,
  .wp-block-separator.is-style-flame::after,
  .ed-project .wp-block-separator:not([class*="is-style-"])::after {
    transition: none;
  }
}

/* Compact layout: two tiles per row on tablets, one on phones. 600px is
   also where core swaps the navigation for its overlay menu. */
@media (max-width: 900px) {
  .ed-work-grid.is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .wp-block-group.is-style-framed,
  .wp-block-cover.is-style-framed,
  .ed-project .wp-block-cover:not([class*="is-style-"]),
  .editor-styles-wrapper.post-type-portfolio .wp-block-cover:not([class*="is-style-"]) {
    padding: var(--wp--preset--spacing--40);
  }
  .wp-block-group.ed-header {
    margin-top: var(--wp--preset--spacing--40);
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  }
  /* A fixed size, not the fluid "large" preset, which bottoms out near
     15px on phones and would leave the mark smaller than the nav labels. */
  .ed-site-mark {
    font-size: 1.375rem;
  }
  .ed-work-grid.is-layout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Framed strips stack one tile per row: core keeps two per row below
     600px, which on a 375px phone leaves about 100px of picture inside a
     32px band. :not(#individual-image) mirrors core's own selector so
     this outranks it. */
  .wp-block-gallery.is-style-framed.has-nested-images figure.wp-block-image:not(#individual-image),
  .ed-project .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    width: 100%;
  }
  .ed-project-nav.is-layout-flex {
    flex-direction: column;
    align-items: stretch;
  }
  .ed-project-nav .post-navigation-link-next {
    text-align: left;
  }
  .wp-block-separator.is-style-flame,
  .ed-project .wp-block-separator:not([class*="is-style-"]),
  .editor-styles-wrapper.post-type-portfolio .wp-block-separator:not([class*="is-style-"]) {
    margin-top: var(--wp--preset--spacing--50);
    margin-bottom: var(--wp--preset--spacing--50);
  }
}