/***************************************
 * BNCA Theme Styles
 * Version: 1.0
 * Last Updated: 2024
 ***************************************/ 

/*-----------------------------------
 * 1. ROOT VARIABLES & SETUP
 *----------------------------------*/
:root {
    /* Layout Fundamentals */
    --site-width: 90%;
    --max-width: 1200px;
    --spacing-base: 2rem;
    
    /* Brand Color Palette */
    --body-bg: #f5f6fa;
    --bnca-royal-blue: #030e78f9;
    --bnca-blue-violet: #6f3aca;
    --bnca-delft-blue: #82bccc;
    --bnca-electric-blue: #15cbdb;
    --bnca-sky-blue: #a6b9f2;
    --bnca-baby-blue: #ddedfd;
    --bnca-solar-gold: #d97d03;
}

/*-----------------------------------
 * 2. GLOBAL RESET & BASE STYLES
 *----------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--body-bg);
}

/*-----------------------------------
 * 3. LAYOUT & CONTAINERS
 *----------------------------------*/
.site-container,
.wp-block-template-part,
.wp-block-group.is-layout-constrained > *,
.is-layout-constrained {
    width: var(--site-width) !important;
    max-width: var(--max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
	outline: 2px dotted red;
    position: relative;
}
.site-container::after {
    content: 'width: 90% | max: 1200px';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255,0,0,0.1);
    padding: 2px 5px;
    font-size: 12px;
    color: red;
}
/* Header */
.site-header {
    width: 100%;
    background-color: var(--body-bg);
    margin-bottom: var(--spacing-base);
    padding: var(--spacing-base) 0;
	outline: 2px dotted blue;
    position: relative;
}
.site-header::after {
    content: 'header';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0,0,255,0.1);
    padding: 2px 5px;
    font-size: 12px;
    color: blue;
}					 
/* Content Debug */
.page-content,
.entry-content,
.wp-block-post-content {
    outline: 2px dotted green;
    position: relative;
}		   
/* WordPress Core Structure */
.wp-site-blocks,
.wp-site-blocks > *,
.wp-block-post-content,
article > .content-area,
.type-page > .content-area,
.post-content,
.login-page,
.wp-core-ui {
    width: var(--site-width);
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

/*-----------------------------------
 * 4. HEADER STYLES
 *----------------------------------*/
.site-header {
    width: 100%;
    background-color: var(--body-bg);
    margin-bottom: var(--spacing-base);
    padding: var(--spacing-base) 0;
    position: relative;
}

/*-----------------------------------
 * 5. MAIN CONTENT STYLES
 *----------------------------------*/
/* Content Area */
.wp-site-blocks {
    width: 100%;
    min-height: 50vh;
}

.page-content,
.entry-content,
.wp-block-post-content {
    width: var(--site-width);
    max-width: var(--max-width);
    margin: var(--spacing-base) auto;
    padding: var(--spacing-base) 0;
	outline: 2px dotted green;					   
    position: relative;
}



/* Page Titles */
/* Force center alignment on all content blocks */
.page-content > *,
.entry-content > *,
.wp-block-post-content > *,
.wp-site-blocks > * > *,
article > .content-area > *,
.type-page > .content-area > *,
.post-content > * {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Block Alignment */
.wp-block-group,
.wp-block-template-part {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-content::after,
.entry-content::after {
    content: 'content area';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0,255,0,0.1);
    padding: 2px 5px;
    font-size: 12px;
    color: green;
}


/* Block Debug */
.wp-block-group {
    outline: 1px dotted orange;
    position: relative;
}

.wp-block-group::after {
    content: 'block group';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255,165,0,0.1);
    padding: 2px 5px;
    font-size: 12px;
    color: orange;
}


.wp-block-post-title,
.entry-title,
.page-title {
    text-align: center !important;
    width: 100% !important;
								
    margin: var(--spacing-base) auto !important;
    padding: 1rem 0;
    position: relative;
    
    /* Clean base styling */
    background-color: var(--body-bg);
    color: var(--bnca-royal-blue);
    border-bottom: 0;
    
    /* Smooth color transition */
    transition: color 0.3s ease-in-out;
}

/* Subtle hover effect */
.wp-block-post-title:hover,
.entry-title:hover,
.page-title:hover {
    color: color-mix(in srgb, var(--bnca-royal-blue) 85%, var(--bnca-solar-gold));
    /* Or for hex lovers: #1d2684 */
}

/* Keep our debugging friend */
.debug .wp-block-post-title,
.debug .entry-title,
.debug .page-title {
    outline: 2px dotted purple;
}

/* Title Hover Effects */


/* Keep our titles matching */
.wp-block-post-title,
.entry-title,
.page-title {
    text-align: center !important;
    width: 90% !important;
    max-width: 1200px;
    margin: var(--spacing-base) auto !important;
    padding: 1rem 0;
    position: relative;
    
    background-color: var(--body-bg);
    color: var(--bnca-royal-blue);
    transition: color 0.3s ease-in-out;
}


/* Our debug friend will show us the new constraints */
.debug .wp-block-post-content,
.debug .entry-content {
    outline: 2px dotted green;
}


.wp-block-post-content,
.entry-content {
    width: 90% !important;
    max-width: 1200px; /* prevents it getting too wide on large screens */
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative; /* keeps our debug outline behaving */
}
/*-----------------------------------
 * 6. BLOCK ALIGNMENT & STRUCTURE
 *----------------------------------*/
/* Force center alignment */
.page-content > *,
.entry-content > *,
.wp-block-post-content > *,
.wp-site-blocks > * > *,
article > .content-area > *,
.type-page > .content-area > *,
.post-content > * {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-group,
.wp-block-template-part {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*-----------------------------------
 * 7. FOOTER STYLES
 *----------------------------------*/
.site-footer  .wp-block-navigation {
    .wp-block-navigation 
    background-color: var(--bnca-royal-blue);
    margin-top: var(--spacing-base);
	margin: 0 auto !important;
    padding: var(--spacing-base) 0;
	display: flex !important;
    justify-content: center !important;
    color: white;
	    outline: 2px dotted purple;
    position: relative;
}
.site-footer::after {
    content: 'footer';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(128,0,128,0.1);
    padding: 2px 5px;
    font-size: 12px;
    color: purple;
}

/*-----------------------------------
 * 8. WORDPRESS LOGIN PAGE
 *----------------------------------*/
body.login {
    background: var(--body-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

#login {
    width: var(--site-width);
    max-width: 320px;
    padding: 2rem;
}

/*-----------------------------------
 * 9. DEVELOPMENT & DEBUG TOOLS
 *----------------------------------*/
/* Debug Outlines */
.debug-outlines {
    .site-container { outline: 2px dotted red; }
    .site-header { outline: 2px dotted blue; }
    .page-content { outline: 2px dotted green; }
    .entry-content { outline: 2px solid green; }
    .entry-content > * { outline: 1px dashed purple; }
    .wp-block-group { outline: 1px dotted orange; }
}

/* Debug Labels */
.site-container::after {
    content: 'width: 90% | max: 1200px';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255,0,0,0.1);
    padding: 2px 5px;
    font-size: 12px;
    color: red;
}

.site-header::after,
.site-footer::after,
.page-content::after,
.entry-content::after,
.wp-block-group::after {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 5px;
    font-size: 12px;
}

/* Debug Hover States */
.site-container:hover,
.site-header:hover,
.page-content:hover,
.entry-content:hover,
.wp-block-group:hover,
.site-footer:hover {
    outline-style: solid;
    outline-width: 3px;
    z-index: 1000;
}

/*-----------------------------------
 * 10. WORDPRESS CORE OVERRIDES
 *----------------------------------*/
/* Super specific targeting for stubborn blocks */
.site-container .page-content .entry-content,
.wp-block-group.page-content .wp-block-post-content,
.entry-content.wp-block-post-content > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}