/*
Theme Name: Stag Blocks Child
Theme URI:  https://example.com/stag-blocks-child
Description: Child theme for the Stag Blocks theme. Use this to safely customize styles and templates.
Author:      Your Name
Author URI:  https://example.com
Template:    stag-blocks
Version:     1.0.0
Text Domain: stag-blocks-child
*/

/* ----------------------------------------
   Child theme custom CSS goes below here
   ---------------------------------------- */


/* ==========================================================================
   VARIABLES
   Purpose: centralised colour variables for consistent theming.
   ========================================================================== */
:root {
  --brand-green: #64dd17; /* primary accent / hover colour */
  --brand-black: #000000; /* base text colour */
}

/* ==========================================================================
   1) Kill the index-grid & boxes on both the “Thought” page AND single posts
   Purpose: force a simple, single-column, cardless article flow on blog & post views.
   ========================================================================== */
  /* Make the main content wrapper single-column (override grid/flex from theme) */
  body.blog .site-main,
  body.single-post .site-main {
    display: block !important;
  }

  /* Remove boxed/card styling from articles so they flow as plain blocks */
  body.blog .site-main > article,
  body.single-post .site-main > article {
    display: block !important;
    width: 100% !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 4rem !important; /* breathing room between posts */
  }

  /* Also neutralise any block-latest-posts list items that could add boxes */
  body.blog .wp-block-latest-posts__list li,
  body.single-post .wp-block-latest-posts__list li {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: rem !important; /* NOTE: looks like a typo — missing unit/value before 'rem' */
  }


/* ==========================================================================
   2) Hide author avatar/ name/ date under titles on index only and hide
      author link at post bottom.
   Purpose: reduce visual clutter on index and single-post where author info is duplicated.
   ========================================================================== */
body.blog .entry-meta a.author-avatar,
body.blog .entry-meta .author-name,
body.blog .entry-meta .posted-on, body.single-post .entry-meta .author-avatar,
body.single-post .entry-meta .author-name, body.single-post .entry-author .author-link {
  display: none !important;
}

/* Make single-post titles match archive typography (condensed family + weight) */
body.single-post .entry-header .entry-title {
  font-family: 'IBM Plex Sans Condensed', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  font-size: 3rem; /* explicit size for visual parity with archive */
}


/* ==========================================================================
   3) Post-meta link colouring (index only):
      - default (static): black
      - hover/focus: brand-green
   Purpose: consistent micro-interaction styles for meta links.
   ========================================================================== */
  body.blog .cat-links a,
  body.blog a.author-name,
  body.blog .posted-on a {
    color: var(--brand-black) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
  }
	
  body.blog .cat-links a:hover,
  body.blog a.author-name:hover,
  body.blog .posted-on a:hover {
    color: var(--brand-green) !important;
  }


/* Category links on single-post pages: same behaviour as index (black -> green on hover) */
body.single-post .entry-header .cat-links a {
  color: var(--brand-black) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

body.single-post .entry-header .cat-links a:hover,
body.single-post .entry-header .cat-links a:focus {
  color: var(--brand-green) !important;
}


/* Meta date link styling on single posts: black default, green on hover */
body.single-post .entry-meta .posted-on a {
  color: var(--brand-black) !important;
  text-decoration: none !important;
}
body.single-post .entry-meta .posted-on a:hover,
body.single-post .entry-meta .posted-on a:focus {
  color: var(--brand-green) !important;
}

/* Post-navigation (previous / next) links styling and hover states */
body.single-post nav.post-navigation .nav-links a,
body.blog    nav.post-navigation .nav-links a {
  color: var(--brand-black) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

body.single-post nav.post-navigation .nav-links a:hover,
body.blog    nav.post-navigation .nav-links a:hover,
body.single-post nav.post-navigation .nav-links a:focus,
body.blog    nav.post-navigation .nav-links a:focus {
  color: var(--brand-green) !important;
}

/* Theme variants using .nav-previous / .nav-next — keep behaviour consistent */
body.single-post .nav-previous a,
body.single-post .nav-next a,
body.blog    .nav-previous a,
body.blog    .nav-next a {
  color: var(--brand-black) !important;
  transition: color 0.2s ease !important;
}

body.single-post .nav-previous a:hover,
body.single-post .nav-next a:hover,
body.blog    .nav-previous a:hover,
body.blog    .nav-next a:hover,
body.single-post .nav-previous a:focus,
body.single-post .nav-next a:focus,
body.blog    .nav-previous a:focus,
body.blog    .nav-next a:focus {
  color: var(--brand-green) !important;
}


/* ==========================================================================
   4) Read-more link & inline-link styling (index AND single posts)
      - visual rule: black text with green underline; on hover text turns green and underline removed.
   Purpose: distinct but subtle CTA treatment for inline/read-more links.
   ========================================================================== */
.read-more-link {
  display: block !important;
  width: fit-content !important; /* shrink to content width */
  margin: 1.5rem 0 !important;
  /* static green underline treatment */
  color: var(--brand-green) !important;
  border-bottom: 2px solid var(--brand-green) !important;
  /* remove any theme background hack */
  background: none !important;
}

.read-more-link:hover,
.read-more-link:focus {
  /* hover: keep green text but remove underline visually */
  color: var(--brand-green) !important;
  border-bottom: 2px solid transparent !important;
}

.entry-content a {
  /* inline links: black text with a green underline created using background-image */
  color: var(--brand-black) !important;
  text-decoration: none !important;
  background-image: linear-gradient(var(--brand-green),var(--brand-green));
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color 0.2s ease, background-size 0.2s ease;
}

.entry-content a:hover,
.entry-content a:focus {
  color: var(--brand-green) !important;
  background-size: 0% 2px !important; /* hide underline on hover */
}

/* ==========================================================================
   5) Ensure top-padding on the very first post so its cat-link isn’t cut off
   Purpose: avoid overlap with header/nav or visual clipping for the first article.
   ========================================================================== */
body.blog .site-main > article:first-of-type {
    padding-top: 3rem !important;
  }

/* ==========================================================================
   6) Green separator inside each post’s content (index only)
      - all but last get a green divider; last gets extra bottom padding.
   Purpose: visual rhythm between posts.
   ========================================================================== */
body.blog .site-main > article:not(:last-child) .entry-content {
    border-bottom: 2px solid var(--brand-green) !important;
    padding-bottom: 4rem !important;
    margin-bottom: 0rem !important;
  }
  body.blog .site-main > article:last-of-type .entry-content {
    border-bottom: none !important;
    padding-bottom: 7rem !important; /* extra breathing room at the end of the list */
    margin-bottom: 0 !important;
  }

@media screen and (max-width: 60em) {
  /* On smaller screens, reduce bottom padding for the last post to tighten the flow */
  body.blog .site-main > article:last-child {
    /* tweak these values down as you like */
    margin-bottom: 0rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* ==========================================================================
   7) Adjust spacing and font weight for category links & titles (applies everywhere)
   Purpose: larger gap under category links and bolder category link weight for emphasis.
   ========================================================================== */
/* Space around the green category links */
.entry-header .cat-links {
  margin-bottom: 5rem !important;
  margin-top: 0rem !important;
}
/* Ensure title sits directly under the category link */
.entry-header .entry-title {
  margin-top: 0rem !important;
}

/* Slightly bolder category links across the site */
.cat-links a {
  font-weight: 550 !important;
}


/* ————————————————————
   2a) Change the “Leave a Reply” title’s font
   Purpose: visually distinguish the comment form heading.
—————————————————————— */
.comment-reply-title {
  font-family: "Your Brand Font", sans-serif;  /* replace with the title font for comments */
  font-style: italic;                          /* style choice — can be bold/normal as desired */
  font-size: 1.5rem;                           /* readable heading size */
  margin-bottom: 1rem;
}

/* ————————————————————
   2b) Make the “Post Comment” button look like .btn-primary
   Purpose: provide a clear CTA style for comment submission.
—————————————————————— */
.comment-form input[type="submit"],
.comment-form button[type="submit"] {
  /* mirror your primary button look */
  background-color: var(--brand-green);
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

/* Hover state for the comment submit button — note: var not defined in this file */
.comment-form input[type="submit"]:hover,
.comment-form button[type="submit"]:hover {
  background-color: var(--brand-green-light); /* ensure this variable exists or replace with hex */
}

@media (max-width: 60em) {
  /* Make post-nav stack vertically on narrow screens to avoid cramped two-column layout */
  body.single nav.post-navigation .nav-links {
    display: block !important;
  }

  /* Previous item: right-align so the arrow/title stack looks like a paired block */
  body.single nav.post-navigation .nav-previous,
  body.single nav.post-navigation .nav-previous a {
    display: block !important;
    text-align: right !important;
  }

  /* Next item: left-align for visual symmetry */
  body.single nav.post-navigation .nav-next,
  body.single nav.post-navigation .nav-next a {
    display: block !important;
    text-align: left !important;
  }
}

/* Left-align case study / page titles without changing their font choices */
body.page .entry-header,
body.page .entry-header .container {
  text-align: left !important;
}

body.page .entry-header .entry-title {
  text-align: left !important;
  margin-left: 0 !important;
}

/* HERO METRICS — wrapper-agnostic, consistent across pages
   Purpose: visually distinct band for numeric metrics with green rules.
*/
.metrics-band{
  border-top:3px solid #65ce48;
  border-bottom:3px solid #65ce48;
  padding-top:90px;         /* tuned for optical balance */
  padding-bottom:90px;      /* bottom a bit larger so it *reads* even */
  margin:40px 0;
}

/* Remove inner spacing added by WP block wrapper to align content flush */
.metrics-band .wp-block-group__inner-container{ padding:0; margin:0; }

/* Make columns inside metrics-band use flex so numbers align neatly */
.metrics-band .wp-block-columns{
  display:flex !important;
  gap:var(--wp--style--block-gap, 4rem) !important; /* gap fallback */
  align-items:center !important;            /* avoid baseline sink of headings */
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Even distribution for each metric column, remove theme padding */
.metrics-band .wp-block-column{
  flex:1 1 0 !important;
  padding:0 !important;
}

/* Remove Gutenberg flow margins inside the band (safe selector) */
.metrics-band :where(.is-layout-flow) > *{ margin-block-start:0; margin-block-end:0; }

/* Heading + label spacing inside each hero metric */
.hero-metric > *{ margin:0 !important; }
.hero-metric .wp-block-heading{
  line-height:.9;
  display:block;
  white-space:nowrap; /* keeps compact metric values on one line (e.g. "37% → 52%") */
}
.hero-metric .metric-label{
  margin-top:.5rem !important;
  font-size:.95rem;
  opacity:.75;
  color:#808080;
}

/* Tolerate legacy nested paragraphs by ensuring the nested label behaves inline */
.hero-metric p > p.metric-label{
  display:inline;
  margin:.5rem 0 0 !important;
}

/* Mobile adjustments for metrics band */
@media (max-width:781px){
  .metrics-band .wp-block-columns{ gap:1.25rem !important; }
  .hero-metric{ text-align:center; }
}

/* NAV / HEADER / SEARCH TWEAKS */
.main-navigation{
  margin: 0 !important;
}
.green-bar-wrapper{
  overflow: hidden;
}
/* Increase click area for main nav items */
.main-navigation ul li a{
  padding: 20px 10px;
}

/* Site title spacing tweaks */
.site-title{
  padding-left: 0;
  padding-bottom: 0 !important;
}

/* Search toggle size for consistent touch target */
.search-toggle{
  width: 40px;
  height:40px;
}

/* Desktop search form positioning (absolute to header) — only on wider screens */
@media only screen and (min-width: 769px) {
    .desktop-search-form-container {
        position: absolute;
        left: unset;
        top: unset;
        right: 0;
        padding-right: 0 !important;
        bottom: -40px;
        padding-bottom: 0 !important;
    }
}

/* Ensure desktop search container is visible on small screens when needed */
@media only screen and (max-width: 871px) {
    .desktop-search-container {
        display: block !important;
    }
}

/* Mobile menu top padding to clear header area when menu opens */
@media only screen and (max-width: 871px) {
    .mobile-menu-items {
      padding-top: 7rem;
    }
}

/* Tweak pseudo-element offset for main nav underline on wide screens */
@media screen and (min-width: 769px) {
    .main-navigation ul li a::after, .main-navigation a::after {
      bottom: -18px !important;
    }
}

/* Mobile brand alignment */
@media only screen and (max-width: 871px) {
    .site-header .brand-name {
        margin-left: 0;
    }
}

/* Mobile menu presentation and site overflow fix for small screens */
@media only screen and (max-width: 871px) {
    .mobile-menu-items {
        padding-top: 7rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
	
	.site{
		overflow: hidden !important; /* prevents horizontal scroll when menu open */
	}
	
	.mobile-menu-items li a {
		font-size: 2rem !important; /* larger tappable menu links */
	}
}

/* Narrow desktop tweak to spread main nav items slightly */
@media (min-width:768px) and (max-width: 790px){
	.main-navigation ul li {
        margin: 0 0 0 1.3em !important;
    }
}

/* Center header elements on small screens */
@media only screen and (max-width: 768px) {
	.site-header .header-container { justify-content: center; }
}

/* Large-screen header constraints — create a narrower header container */
@media (min-width:1120px){
	.header-container{
		padding: 0 !important;
		width: 760px !important;
	}
	
	.main-navigation{
		padding-right: 0 !important;
	}
	
	.desktop-search-icon-container{
		padding: 0 !important;
	}
	
	.site-title{
		transform: translateX(-100%); /* visually offset title when using compact header layout */
	}
}