/*
Theme Name: Union Post
Theme URI: https://unionpost.co.uk/
Template: astra
Author: Union Post
Author URI: https://unionpost.co.uk/
Description: Editorial child theme for Union Post, built on the ENT UI kit — a token-driven business/finance news design. Overrides Astra's templates completely; Astra supplies only the plumbing.
Version: 1.0.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: unionpost
*/

/* ==========================================================================
   The design system is assets/css/ui-kit.css, enqueued from functions.php.
   This file holds the theme header, the Union Post brand tokens, and the
   WordPress-specific glue the standalone kit has no reason to ship.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BRAND TOKENS
   Override kit defaults here, never inside ui-kit.css, so the kit stays
   updatable. Everything downstream follows these five values.
   -------------------------------------------------------------------------- */
:root {
  --ek-brand:       #0b4f9e;   /* Union Post blue — links, accents, CTA */
  --ek-brand-dark:  #073a76;
  --ek-brand-soft:  #e8f0fa;
  --ek-accent:      #d97706;   /* secondary — badges, sponsored */
  --ek-accent-soft: #fdf3e6;
  --ek-radius:      2px;       /* 0 = sharp newspaper, 8px = soft/modern */
}

/* --------------------------------------------------------------------------
   2. NEUTRALISE ASTRA
   Astra prints its own container, spacing and typography. The kit owns all
   three, so the parent's wrappers are reduced to pass-throughs rather than
   fought with !important further down.
   -------------------------------------------------------------------------- */
.ast-container,
.ast-container-fluid,
#primary,
#content .ast-container {
  max-width: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

#page,
#content,
.site-content {
  background: var(--ek-surface);
}

.ast-separate-container #primary,
.ast-separate-container .ast-article-single,
.ast-separate-container .site-main > article {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

/* Astra ships a page title and breadcrumb we render ourselves */
.ast-single-post .entry-header,
.ast-archive-description {
  display: none;
}

/* Astra paints every bare <button> with its own background and white text,
   which swallowed the kit's icon buttons whole. Reset them back. */
.ek-iconbtn,
.ek-totop,
.ek-burger {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  font-family: var(--ek-font-ui);
  line-height: 1;
  text-decoration: none;
}

.ek-iconbtn {
  background: transparent;
  border: 1px solid var(--ek-line);
  color: var(--ek-ink);
}

.ek-iconbtn:hover,
.ek-iconbtn:focus-visible {
  background: var(--ek-surface-2);
  border-color: var(--ek-brand);
  color: var(--ek-brand);
}

.ek-iconbtn svg {
  stroke: currentColor;
  fill: none;
}

/* --------------------------------------------------------------------------
   3. WORDPRESS CORE CLASSES
   -------------------------------------------------------------------------- */
.alignnone { margin: var(--ek-6) 0; }
.aligncenter, div.aligncenter { display: block; margin: var(--ek-6) auto; }
.alignleft  { float: left;  margin: var(--ek-2) var(--ek-6) var(--ek-4) 0; }
.alignright { float: right; margin: var(--ek-2) 0 var(--ek-4) var(--ek-6); }
.alignwide, .alignfull { margin-left: 0; margin-right: 0; max-width: 100%; }

@media (max-width: 640px) {
  .alignleft, .alignright { float: none; display: block; margin: var(--ek-6) 0; }
}

.wp-caption { max-width: 100%; }
.wp-caption img { display: block; width: 100%; height: auto; }
.wp-caption-text,
.wp-element-caption,
.ek-prose figcaption {
  margin: var(--ek-2) 0 0;
  color: var(--ek-ink-3);
  font-family: var(--ek-font-ui);
  font-size: var(--ek-fs-meta);
  line-height: 1.5;
  text-align: center;
}

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background: var(--ek-surface);
  clip-path: none;
  color: var(--ek-brand);
  display: block;
  font-size: var(--ek-fs-sm);
  font-weight: 700;
  height: auto;
  left: var(--ek-4);
  line-height: normal;
  padding: var(--ek-3) var(--ek-5);
  text-decoration: none;
  top: var(--ek-4);
  width: auto;
  z-index: var(--ek-z-top);
}

/* --------------------------------------------------------------------------
   4. GUTENBERG CONTENT INSIDE .ek-prose
   Article bodies are authored in the block editor, so the prose wrapper has
   to cope with whatever the editor emits.
   -------------------------------------------------------------------------- */
.ek-prose img { max-width: 100%; height: auto; }
.ek-prose .wp-block-image,
.ek-prose .wp-block-embed,
.ek-prose .wp-block-gallery { margin: var(--ek-8) 0; }
.ek-prose .wp-block-table { display: block; overflow-x: auto; }
.ek-prose .wp-block-table table { width: 100%; border-collapse: collapse; }
.ek-prose .wp-block-table th,
.ek-prose .wp-block-table td {
  border: 1px solid var(--ek-line);
  padding: var(--ek-3);
  text-align: left;
}
.ek-prose .wp-block-table th { background: var(--ek-surface-2); font-family: var(--ek-font-ui); }
.ek-prose .wp-block-quote {
  border-left: 3px solid var(--ek-brand);
  margin: var(--ek-8) 0;
  padding-left: var(--ek-5);
}

/* The in-content image blocks written by the image rotation are raw HTML */
.ek-prose .wp-block-html > div { margin: var(--ek-8) auto; }

/* --------------------------------------------------------------------------
   5. THE FEW PIECES THE KIT DOES NOT SHIP
   Everything else reuses kit classes as-is. Each of these is mobile-first,
   matching the kit's 1100 / 900 / 640 breakpoints.
   -------------------------------------------------------------------------- */

/* Ticker — the kit styles .ek-ticker and its label/track, not the row or items */
.ek-ticker__inner {
  display: flex;
  align-items: center;
  gap: var(--ek-4);
}
.ek-ticker__item {
  color: inherit;
  flex: 0 0 auto;
  font-family: var(--ek-font-ui);
  font-size: var(--ek-fs-sm);
  max-width: 42ch;
  overflow: hidden;
  padding-right: var(--ek-4);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-ticker__item:hover { text-decoration: underline; }
.ek-ticker__item + .ek-ticker__item { border-left: 1px solid var(--ek-line); padding-left: var(--ek-4); }

@media (max-width: 640px) {
  .ek-ticker__inner { align-items: flex-start; flex-direction: column; gap: var(--ek-2); }
  .ek-ticker__item { max-width: 100%; }
  .ek-ticker__item + .ek-ticker__item { border-left: 0; padding-left: 0; }
}

/* Post count on a topic chip */
.ek-chip__count {
  color: var(--ek-ink-3);
  font-size: var(--ek-fs-meta);
  margin-left: var(--ek-1);
}

/* A column in the three-up category block */
.ek-col { min-width: 0; }

/* Larger byline used on single posts and author archives */
.ek-byline--lg { align-items: center; display: flex; gap: var(--ek-3); margin-top: var(--ek-5); }
.ek-byline--lg .ek-avatar img { border-radius: 50%; display: block; }

/* Tag row under an article */
.ek-tags { display: flex; flex-wrap: wrap; gap: var(--ek-2); margin: var(--ek-8) 0; }

/* Footer brand column — logo, tagline, then the standing blurb */
.up-footer__brand .ek-logo { margin-bottom: var(--ek-4); }

.up-footer__tagline {
  color: var(--ek-ink);
  font-family: var(--ek-font-ui);
  font-size: var(--ek-fs-sm);
  font-weight: 700;
  margin: 0 0 var(--ek-2);
}

.up-footer__blurb {
  color: var(--ek-ink-3);
  font-family: var(--ek-font-body);
  font-size: var(--ek-fs-sm);
  line-height: var(--ek-lh-body);
  margin: 0;
  max-width: 42ch;
}

/* Footer legal row */
.ek-footer__legal { align-items: center; display: flex; flex-wrap: wrap; gap: var(--ek-4); justify-content: space-between; }
.ek-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--ek-4); }
.ek-footer__legal-links a { font-size: var(--ek-fs-meta); }

@media (max-width: 640px) {
  .ek-footer__legal { flex-direction: column; align-items: flex-start; }
}

/* Burger — the icon alone read as decoration, so it carries a word.
   Wider tap target too: 44px is the minimum comfortable touch size. */
.ek-burger {
  align-items: center;
  background: var(--ek-ink);
  border: 0;
  color: #fff;
  gap: 7px;
  height: 40px;
  min-width: 44px;
  padding: 0 var(--ek-3);
  width: auto;
}

.ek-burger:hover,
.ek-burger:focus-visible {
  background: var(--ek-brand);
  border: 0;
  color: #fff;
}

.ek-burger svg { stroke: currentColor; }

.ek-burger__label {
  font-size: var(--ek-fs-eyebrow);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Below 420px the word is dropped; the icon has enough room to read alone */
@media (max-width: 420px) {
  .ek-burger__label { display: none; }
  .ek-burger { padding: 0; width: 44px; }
}

/* Back to top.
   Two things the kit does not do for this button, because its own demo puts
   no SVG inside it:
   1. Colours are pinned. The kit paints it with --ek-ink, which .ek-theme-dark
      flips to white — white on white.
   2. The SVG is given an explicit size. With only a viewBox and no width or
      height, the browser assumes 300x150; max-width caps the width at 44px but
      the height stays 150px, so the arrow is clipped out of the round button. */
.ek-totop {
  background: var(--ek-brand);
  border: 0;
  color: #fff;
  padding: 0;
}

.ek-totop:hover,
.ek-totop:focus-visible {
  background: var(--ek-brand-dark);
  color: #fff;
}

.ek-totop svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
}

@media (max-width: 640px) {
  .ek-totop { right: 14px; bottom: 14px; }
}

/* --------------------------------------------------------------------------
   HOUSE ADS
   Three formats off one markup: a wide leaderboard between homepage sections,
   a horizontal unit inside articles, and a stacked one in the rail.
   -------------------------------------------------------------------------- */
.up-ad { margin: var(--ek-10) 0; }

.up-ad__label {
  color: var(--ek-ink-4);
  font-family: var(--ek-font-ui);
  font-size: var(--ek-fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  margin: 0 0 var(--ek-2);
  text-transform: uppercase;
}

.up-ad__panel {
  align-items: center;
  display: grid;
  gap: var(--ek-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
}

.up-ad__eyebrow { margin: 0 0 var(--ek-2); opacity: .85; }

.up-ad__headline {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-h3);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: var(--ek-lh-tight);
  margin: 0 0 var(--ek-3);
}

.up-ad__text {
  font-size: var(--ek-fs-sm);
  line-height: var(--ek-lh-body);
  margin: 0;
  max-width: 62ch;
  opacity: .9;
}

.up-ad__chips { display: flex; flex-wrap: wrap; gap: var(--ek-2); margin: var(--ek-4) 0 0; }

.up-ad__chip {
  border: 1px solid currentColor;
  border-radius: var(--ek-radius-pill);
  font-family: var(--ek-font-ui);
  font-size: var(--ek-fs-eyebrow);
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .7;
  padding: 3px 10px;
}

.up-ad__cta { text-align: right; }

.up-ad__by {
  font-family: var(--ek-font-ui);
  font-size: var(--ek-fs-meta);
  font-weight: 700;
  margin: var(--ek-3) 0 0;
  opacity: .8;
}

.up-ad__by-note { display: block; font-weight: 400; margin-top: 2px; opacity: .75; }

/* Outline variant sits on white, so it needs its own ink */
.ek-panel--outline .up-ad__eyebrow,
.ek-panel--outline .up-ad__headline { color: var(--ek-ink); }
.ek-panel--outline .up-ad__text { color: var(--ek-ink-2); }
.ek-panel--outline .up-ad__chip { color: var(--ek-ink-3); }
.ek-panel--outline .ek-btn--light {
  background: var(--ek-brand);
  border-color: var(--ek-brand);
  color: #fff;
}

/* In-article: tighter, no chips */
.up-ad--inline .up-ad__headline { font-size: var(--ek-fs-h4); }

/* Rail: everything stacks */
.up-ad--rail .up-ad__panel { grid-template-columns: minmax(0, 1fr); }
.up-ad--rail .up-ad__headline { font-size: var(--ek-fs-h5); }
.up-ad--rail .up-ad__cta { text-align: left; }
.up-ad--rail .up-ad__by { text-align: center; }

@media (max-width: 900px) {
  .up-ad__panel { grid-template-columns: minmax(0, 1fr); }
  .up-ad__cta { text-align: left; }
  .up-ad__headline { font-size: var(--ek-fs-h4); }
}

/* Article hero */
.up-hero { margin: 0 0 var(--ek-8); }

/* Author box */
.up-authorbox { display: flex; gap: var(--ek-5); margin: var(--ek-10) 0; }
.up-authorbox .ek-avatar img { border-radius: 50%; display: block; }

@media (max-width: 640px) {
  .up-authorbox { flex-direction: column; }
}

/* Previous / next */
.up-adjacent__link { display: block; text-decoration: none; }
.up-adjacent__link--next { text-align: right; }

@media (max-width: 640px) {
  .up-adjacent__link--next { text-align: left; }
}

/* --------------------------------------------------------------------------
   6. LAYOUT GLUE
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .up-rail { position: sticky; top: 96px; align-self: start; }
}

/* Comments are disabled site-wide (see up_kill_comments). Anything the parent
   theme or a plugin still prints stays hidden. */
#comments,
.comments-area,
.comment-respond,
.ast-comment-formwrap,
.comments-count-wrapper { display: none !important; }

/* Keep the sticky header clear of the admin bar */
body.admin-bar .ek-header.is-stuck { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ek-header.is-stuck { top: 46px; } }