/*
 * Theme Name: LRPSP
 * Theme URI: https://lrpsp.com
 * Description: LRPSP child theme based on Purenote. Developed for LRPSP.COM to provide a maintainable, extensible architecture for a reflective essay-oriented site
 *  while preserving compatibility with the Purenote parent theme.  And to provide a maintainable, extensible architecture supporting a custom header, streamlined content presentation,
 *  Smart Slider 3 integration, and future enhancements.
 * Author: Paul E. Orman
 * Author URI: https://lrpsp.com
 * Template: purenote
 * Version: 1.0.0
 * Text Domain: lrpsp
 * 
 * =========================================================
 * LRPSP Child Theme
 * Parent Theme: Purenote
 * =========================================================
 * 
 * Purpose:
 * This stylesheet contains LRPSP-specific presentation rules.
 * 
 * Development Philosophy:
 *   - Preserve the Purenote parent theme architecture.
 *   - Prefer CSS before PHP/template overrides.
 *   - Keep changes modular and documented.
 *   - Add complexity only when there is a clear architectural reason.
 * 	 - !! Engineering Rule !!
 * 		  Before modifying CSS:
 * 			1. Understand the HTML hierarchy.
 * 			2. Determine container ownership.
 * 			3. Prefer the smallest effective change.
 * 			4. Document why, not merely what.
 * 
 * Initial Sections:
 *   01 - Header
 *   02 - Branding
 *   03 - Navigation
 *   04 - Header Buttons / Icons
 *   05 - Featured Slider
 *   06 - Blog Archive Grid
 *   07 - Widgets / Sidebar
 *   08 - Utilities / Misc
 *   09 - Experimentation
 * =========================================================*/

/* ======================================================
   01 - Header
   ====================================================== */

/* Header container */
.purenote-container.purenote-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Date and social bar */
/* Add date/social-specific rules here later */


/* ======================================================
   02 - Branding
   ====================================================== */

/* Logo + title row */
.site-branding {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-top: -10px !important;
}

/* Logo */
.site-branding img {
    max-height: 36px;
    width: auto;
    margin-top: -10px !important;
}

/* Site title */
.site-title,
.site-title a {
    padding-left: 10px !important;
    padding-top: 15px !important;
    white-space: nowrap !important;
}

/* Tagline */
.site-description {
    flex-basis: 100% !important;
    margin-left: 56px !important;
    margin-top: -4px !important;
}


/* ======================================================
   03 - Navigation
   ====================================================== */

/* Main navigation positioning */
.site-navigation,
.main-navigation {
    width: auto;
    padding-left: 70px !important;
    order: 0;
}

/* Header utility row */
.purenote-search-subscribe {
    margin-top: -24px !important;
    gap: 12px !important;
}

/* Search + custom button icons */
.purenote-icon-elements {
    margin-top: -60px !important;
}

/* Theme/settings icon */
.np-icon-elements,
.site-mode-icon {
    margin-top: -60px !important;
}


/* ======================================================
   04 - Header Buttons / Icons
   ====================================================== */

/* Replace bullhorn with book-open */
.custom-button-wrap .fa-bullhorn::before {
    content: "\f518" !important;
}

/* Flatten custom button oval */
.custom-button-wrap.purenote-icon-elements a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: transparent !important;
}

/* Restore icon visibility */
.custom-button-wrap .custom-icon,
.custom-button-wrap .custom-icon i,
.custom-button-wrap .custom-icon i::before {
    color: #000000 !important;
    font-size: 22px !important;
}


/* ======================================================
   05 - Featured Slider
   ====================================================== */

.purenote-banner-wrapper {
    padding: 10px 0 12px !important;
}

.purenote-banner-wrapper .purenote-container {
    display: block !important;
}

.purenote-banner-wrapper .single-slide-wrap,
.purenote-banner-wrapper .single-slide-wrap .post-thumbnail-wrap {
    height: auto !important;
    min-height: 0 !important;
}

.purenote-banner-wrapper .single-slide-wrap.no-image {
    display: block !important;
    padding: 12px 16px !important;
}

.purenote-banner-wrapper .slide-content-wrap {
    position: static !important;
    width: auto !important;
    left: auto !important;
    bottom: auto !important;
    padding: 14px 18px !important;
    opacity: 0.95 !important;
}

.purenote-banner-wrapper .slide-title a {
    font-size: 22px !important;
    line-height: 1.2 !important;
}

.purenote-banner-wrapper .post-excerpt {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

.purenote-banner-wrapper .lSAction {
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    transform: none !important;
}

.purenote-banner-wrapper > .purenote-container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ======================================================
   06 - Blog Archive Grid
   ====================================================== */

.archive-content-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.archive-content-wrapper article {
    margin: 0 !important;
}

.archive-content-wrapper .single-post-wrap {
    padding: 16px !important;
}

.archive-content-wrapper .purenote-post-content-wrap {
    padding: 0 !important;
}

.archive-content-wrapper .entry-title {
    margin: 0 0 8px 0 !important;
}

.archive-content-wrapper .entry-title a {
    font-size: 22px !important;
    line-height: 1.2 !important;
}

.archive-content-wrapper .entry-meta {
    margin: 0 0 8px 0 !important;
    gap: 8px !important;
}

.archive-content-wrapper .entry-content p {
    margin: 0 0 10px 0 !important;
    line-height: 1.35 !important;
}

.archive-content-wrapper .button-wrapper {
    margin-top: 8px !important;
}


/* ======================================================
   07 - Widgets / Sidebar
   ====================================================== */


/* ======================================================
   08 - Utilities / Misc
   ====================================================== */

/* ======================================================
   09 - Experimentation
   ====================================================== */

/*
 * Quick Test for CSS style.css still working ...
 * 
body {
    border: 20px solid red !important;
}

body {
    background: lime !important;
}
*/