/*
Theme Name:   iHub Liberia (Blocksy Child)
Theme URI:    https://ihubliberia.com
Description:  Child theme of Blocksy for Innovations Hub Liberia. Ships the iHub
              design system, the section block patterns used to build every page,
              and the archive/single templates for the iHub Core post types.
              All content stays editable in the WordPress block editor.
Author:       Innovations Hub Liberia
Author URI:   https://ihubliberia.com
Template:     blocksy
Version:      1.0.0
Requires PHP: 8.1
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ihub
Tags:         education, business, blog
*/

/*
 * Component CSS lives in assets/css/ihub-design-system.css and
 * assets/css/ihub-components.css, enqueued from functions.php.
 * Only theme-level overrides that must beat Blocksy's own output belong here.
 */

/* Blocksy renders the page title area for pages by default; iHub pages ship
   their own hero pattern, so the duplicate title block is hidden on any page
   whose content opens with an iHub hero. The body class is added in
   inc/blocksy-integration.php. */
body.ihub-has-hero .page-title,
body.ihub-has-hero .hero-section {
  display: none;
}

/* iHub sections carry their own vertical rhythm - remove the double gap that
   Blocksy's content wrapper would otherwise add around them. */
body.ihub-has-hero .entry-content > .ihub-hero:first-child {
  margin-top: 0;
}

/* Blocksy applies a max-width to .entry-content children; iHub sections opt out
   via the 100vw technique in the design system, this just removes the residual
   horizontal padding so backgrounds meet the viewport edges. */
.entry-content > .ihub-section,
.entry-content > .ihub-hero {
  padding-left: 0;
  padding-right: 0;
}

/* ---------------------------------------------------------------------------
   Container alignment - header and footer vs page content
   ---------------------------------------------------------------------------
   --ihub-container is now 1290px, matching Blocksy's default container, so the
   two agree on width. What is left is the gutter: Blocksy's container and
   .ihub-container pad their inner edges by different amounts, which is what
   still reads as the header and footer "overhanging" the content.

   The rule below gives both the identical box - same max-width, same inline
   padding, same box model - so their inner edges land on the same pixel. It
   deliberately sets explicit values rather than deriving them from Blocksy's
   own variables, whose names differ between Blocksy versions.

   To widen or narrow the whole site, change --ihub-container once; to change
   the gutter, change --ihub-gutter once. Both header, footer and content move
   together.
   --------------------------------------------------------------------------- */

:root {
  --ihub-gutter: 20px;
}

.ihub-container,
.ct-header .ct-container,
.ct-header .ct-container-fluid,
.ct-footer .ct-container,
.ct-footer .ct-container-fluid,
.ct-footer [class*="ct-container"] {
  max-width: var(--ihub-container);
  margin-inline: auto;
  padding-inline: var(--ihub-gutter);
  box-sizing: border-box;
}

/* Blocksy rows set to "Full Width" stretch their own wrapper edge to edge; the
   inner container above still aligns the content within it, which is the part
   that has to line up with the page. */