/*
Theme Name:   North Essex Rose Croix
Theme URI:    https://www.northessexrosecroix.org.uk
Author:       Martin
Author URI:   
Description:  A clean, minimalist theme for the North Essex Rose Croix District with left sidebar navigation.
Version:      1.0.0
Requires at least: 6.0
Tested up to:     6.7
Requires PHP:     8.0
Text Domain:      nerc
*/

/* ==========================================================================
   Global & Body
   ========================================================================== */
   

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    /* Light gray page background – matches screenshot vibe */
    font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 300;             /* Light/classic Apple-like feel */
    line-height: 1.7;
    margin: 0;
    padding: 20px 20px;
    min-height: 100vh;            /* Ensures body can stretch full viewport */
}

/* ==========================================================================
   Layout Container
   ========================================================================== */
.site-container {
    display: flex;
    flex-wrap: wrap;              /* Allows wrapping on small screens */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 20px;
    gap: 30px;                    /* Space between sidebar and content */
    min-height: calc(100vh - 80px); /* Rough full viewport minus header/padding – adjust if you have header/footer */
}

/* Sidebar – white card, min-height, stretches to match content */
.sidebar-left {
    width: 280px;
    flex: 0 0 280px;              /* Fixed width, doesn't grow/shrink much */
    background: #e2e2e2;          /* White content area */
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    min-height: 70vh;             /* Minimum 70% of viewport height – screenshot feel when content short */
    overflow: hidden;             /* Keeps inner padding clean */
}
.sidebar-left a{
	color:#828181
}

/* Inner wrapper for padding */
.sidebar-inner {
    padding: 5px 25px;
}

.sidebar-logo {
	text-align:center
}
.sidebar-logo img {
	width:auto;
	height:100px
}

.site-title{
	font-size:1.1rem;
	
}
.site-title a{
	text-decoration:none
}

.menu{
	list-style:none;
	text-align:right;
	padding:0px;
}

.menu a{
	text-decoration:none
}

/* wp menu */


/* Main content – also white card */
.content-area {
    flex: 1;                      /* Takes remaining space */
    min-width: 0;                 /* Prevents overflow issues */
    background: #ffffff;          /* White content area */
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    padding: 30px;
    min-height: 70vh;             /* Matches sidebar min-height for balance */
}entry-title

/* Make sure posts have spacing inside content area */
.post-item {
    margin-bottom: 50px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
	margin:auto;

}

.entry-title{
	font-weight:700;
	font-size:2rem;
	color:#828181;
	margin-top:0;
	padding-bottom:0;
	border-bottom:1px solid #B6B4B4;
	line-height:1.5
}
.entry-title a{
	text-decoration:none;
	color:#828181
}
.entry-title a:hover{
	text-decoration:none
}

.entry-content table, .entry-content tr{
	
    border-collapse: collapse !important;
	border:1px solid #C2C2C2!important
}
.entry-content td{
	padding:4px;
	border:1px solid #C2C2C2!important
}

table, td, th {
    font-weight: normal !important;   /* ← this would kill boldness */
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    border-top: 1px solid #e0e0e0;
    padding: 20px 0;
	color:#828181;
	
}

.footer-inner {
    max-width: 1200px;            /* Same as .site-container */
    margin: 0 auto;
    padding: 0 20px;
    text-align: right;            /* Aligns text to the right edge of the content area */
    font-size:0.75rem
}

.footer-inner p {
    margin: 0;
}


/* form fields */
/* Force Ultimate Member forms visible - override any hiding rules */
.um:not(.um-admin) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 1px !important;
}

/* Also target inner wrappers if needed */
.um.um-register,
.um.um-login,
.um.um-profile,
.um-form {
    display: block !important;
    opacity: 1 !important;
}

/* Responsive: Stack sidebar on top for mobile/tablet */
@media (max-width: 768px) {
    .site-container {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    
    .sidebar-left {
        width: 100%;
        flex: 0 0 auto;           /* Full width, no fixed size */
        min-height: auto;         /* Let it shrink to content on mobile */
        border-radius: 4px;
    }
    
    .sidebar-inner {
        padding: 25px 20px;
    }
    
    .content-area {
        min-height: auto;
    }
}

/* Optional: Make sidebar "sticky" if you want it to stay visible while scrolling long content */
@media (min-width: 769px) {
    .sidebar-left {
        position: sticky;              /* Offset from top – adjust to taste */
        align-self: start;        /* Keeps it from stretching full height unnecessarily */
    }
}