/*
Theme Name:   COMPED
Theme URI:    https://compedkh.org
Description:  Child theme for the COMPED website. Design tokens are defined in
              theme.json — colour palette, typography scale and spacing. Keep
              them there rather than in the Site Editor, so the design lives in
              code, appears in file backups, and can be reverted.
Author:       COMPED
Template:     twentytwentyfive
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  comped
*/

/* ------------------------------------------------------------------
   Almost nothing belongs in this file.

   Colours, fonts, sizes and spacing are all set in theme.json.
   Only add CSS here for things theme.json genuinely cannot express.

   If you find yourself writing a lot of CSS here, it usually means a
   token is missing from theme.json — add it there instead, so it stays
   available in the editor UI too.
   ------------------------------------------------------------------ */

/* Body text should never run the full width of a wide monitor.
   Roughly 65–75 characters per line is comfortable to read. */
   
/* body { border: 10px solid red !important; } */

.entry-content p {
  max-width: 68ch;
}

/* Underline links in body text. Colour alone is not an accessible way
   to signal a link — this is a WCAG requirement, not a preference. */
.entry-content a:not(.wp-element-button) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Visible keyboard focus. The browser default is often invisible
   against a coloured background. */
:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--wp--preset--color--deep-green);
  outline-offset: 2px;
}

header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--wp--preset--color--paper);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

[id] {
  scroll-margin-top: 160px;
}

html {
  scroll-behavior: smooth;
}

/* sticky fails if any ancestor clips overflow */
html, body, .wp-site-blocks {
  overflow: visible !important;
}

/* keep clear of the admin bar while logged in */
/* .admin-bar header.wp-block-template-part { top: 16px; }
@media (max-width: 782px) {
  .admin-bar header.wp-block-template-part { top: 16px; }
} */

/* Keep it clear of the admin bar when logged in */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

.wp-block-group h2 {
  position: relative;
  padding-bottom: var(--wp--preset--spacing--30);
  margin-bottom: var(--wp--preset--spacing--50);
}

.wp-block-group h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--wp--preset--color--brand-green);
}

.comped-card {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--line);
  border-top: 4px solid var(--wp--preset--color--brand-green);
  border-radius: 8px;
  padding: var(--wp--preset--spacing--40);
  box-shadow: 0 1px 3px rgba(31, 42, 36, 0.06);
  height: 100%;
}

.comped-media .wp-block-image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  display: block;
}

@media (max-width: 781px) {
  .comped-media .wp-block-image img {
    height: 200px;
  }
}