/*
Theme Name: Castle Light
Theme URI: https://castle.co.uk
Author: Castle International
Description: Castle Light — standalone theme built from the Castle Light design handover.
             No Timber/Twig dependency; plain PHP templates.
Version: 0.11.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: castle-light
*/

/* Styles live in assets/css — shell.css globally, page-*.css per template.
   Additions to the design go here: this file is enqueued after shell.css, so a
   rule here wins without editing the handover's stylesheet. */

/* The footer's legal links are underlined.

   shell.css sets text-decoration:none on them, so the four policy links read as
   plain text. The rule is offset and thinned so it clears the baseline at 10px
   uppercase with .13em tracking instead of cutting through it, and takes its
   colour from the footer's own text colour at low alpha so the underline sits
   under the link rather than competing with it. */
#app .cf-legal a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.3em;
  text-decoration-color:rgba(151,163,173,.45);
}
#app .cf-legal a:hover{text-decoration-color:currentColor}

/* A testimonial video, once it is playing in place.

   .vid-shot is the 16:9 poster frame and is already position:relative, so the
   player just fills it. The gradient floor and the card's hover lift are both
   for a still frame — over a playing video the first dims the picture and the
   second nudges it as the pointer moves, so neither applies once it is live. */
#app .vid-shot iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
#app .vid[data-playing] .vid-shot::after{display:none}
#app .vid[data-playing]:hover{transform:none}

/* The article hero fills its frame.

   The article stylesheet sizes the hero by height and centres it, which suits the
   handover's own 16:9 crops. The media library's originals are 4:3 and taller, so
   they sat centred with pale bars either side. Filling the frame at the design's
   ratio removes them; the height cap is the one the stylesheet already sets. */
/* The filter rail's chips.

   On the article listing these are links rather than buttons, so they arrive
   underlined and in link colour. The rail is a row of pills — the underline cuts
   through the count inside each one — so it is removed and the colour taken from
   the chip styling the design already defines. Scrolling needs nothing added: the
   design's own .chips rule already sets overflow-x and .chip already sets
   flex:none, so the rail scrolls sideways once the categories outrun the width. */
#app .rail .chip{text-decoration:none}

/* Client logos captured from the live pages.

   Several are the white-on-transparent variants, which sat on a dark band there
   and are invisible on this theme's white ground — the Branding & Design page
   opened with five of them and looked empty. Given the backing they were drawn
   for, so they read as logos rather than as blank space. */
#app .prose img[src*="white" i],
#app .prose img[src*="White" ]{
  background:var(--night,#06243C);
  padding:14px 18px;
  border-radius:4px;
  box-sizing:border-box;
}

/* Bodies captured from the live pages.

   These four pages have no Castle Light design, so their body is served exactly
   as the live site renders it — the old theme's markup with the old theme's
   stylesheet, inside the new header and footer. It gets its own wrapper so none
   of this theme's prose rules reach in and shift it. */
#app .legacy-body{max-width:none}
#app .legacy-body img{max-width:100%;height:auto}

/* Pagination on the article listing.

   The design has none — it shows one page and leaves the rest to The Library.
   Castle has 209 articles, so the listing pages through them, and those pages
   have to be followable. Styled from the design's own chip and button tokens so
   it reads as part of the page rather than as WordPress's default block. */
#app .pagination{margin-top:clamp(32px,4vw,52px)}
#app .pagination .nav-links{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;
}
#app .pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;
  font-family:var(--f-util,"Jost",system-ui,sans-serif);
  font-size:.78rem;letter-spacing:.06em;
  color:var(--ink);text-decoration:none;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
#app .pagination a.page-numbers:hover{border-color:var(--accent);color:var(--accent)}
#app .pagination .page-numbers.current{
  background:var(--night,#06243C);border-color:var(--night,#06243C);color:#fff;
}
#app .pagination .page-numbers.dots{border-color:transparent}

#app .hero{display:block}
#app .hero img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  max-width:none;
  max-height:clamp(260px,52svh,560px);
  object-fit:cover;
}