/*--------------------------------------------------------------
# Variables / Base Styles (Keep from previous step)
--------------------------------------------------------------*/
:root {
    --color-background: #ecdec7; /* Parchment beige */
    --color-primary: #6a3a2a;    /* Dark reddish-brown */
    --color-text-dark: #36200a;  /* Dark brown/sepia text */
    --color-text-light: #f5eeda; /* Light text for dark backgrounds (match background) */
    --color-text-body: #41250a;  /* Slightly lighter brown for body */
    --color-crimson: #79331b;    /* Crimson red for accents */
    --font-title: 'Alice', serif;
    --font-heading: 'Alice', serif; /* Using EB Garamond for section titles */
    --font-body: 'Alice', serif; /* Using EB Garamond for body text */
    --font-nav: 'Alice', serif; /* Using EB Garamond for nav as per image */
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--color-text-body);
  background-color: var(--color-background);
  background-image: url('assets/images/utopia-bg.png'); /* Add your background image */
  margin: 0;
  padding: 0;
  font-size: 17px; /* Slightly larger base font size */
}

.container {
  max-width: 1100px; /* Main content width */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box; /* Include padding in width calculation */
}

a {
    color: var(--color-primary);
    text-decoration: none;
}
a:hover, a:focus {
    text-decoration: underline;
    color: var(--color-text-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.3;
    font-weight: 700; /* Bolder headings */
}

h2.section-title {
    font-size: 1.5em; /* Adjust size as needed */
    text-transform: uppercase;
    letter-spacing: 0px;
    margin-top: 2em;
    margin-bottom: 1em;
    color: var(--color-crimson);
}

p {
    margin-bottom: 1.5em;
}

/* General Utility */
.text-center {
    text-align: center;
}

.screen-reader-text { /* Keep accessibility style */
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/*--------------------------------------------------------------
# Header Area
--------------------------------------------------------------*/
.site-header {
    padding-top: 0; /* Remove default padding */
}

/* Top Navigation Bar */
/* --- Main Navigation Bar --- */
.main-navigation {
    /* --- Keep existing styles --- */
    position: relative; /* Needed for absolute positioning of signup */
    font-family: var(--font-nav);
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;

    /* --- Add Width & Centering --- */
    max-width: 1100px; /* Set a max-width (adjust as needed) */
    width: 100%;      /* Allow it to shrink below max-width */
    margin-left: auto;  /* Center the block */
    margin-right: auto; /* Center the block */
    margin-top: 20px; /* Optional: Add some space above the nav */
    margin-bottom: 20px; /* Optional: Add some space below the nav */

    /* --- Add Height & Vertical Alignment --- */
    height: 61px; /* Set a specific height (adjust as needed, e.g., 45px, 55px) */
    display: flex;         /* Use flexbox for internal alignment */
    justify-content: center; /* Center the menu items *within* the nav bar */
    align-items: center;   /* Vertically center items */

    /* --- Add Background --- */
    background-image: url('assets/images/utopia-navbar.png'); /* <= CHANGE FILENAME */
    background-size: cover; /* Or 'repeat' if using a tileable texture */
    background-position: center center;
    background-repeat: no-repeat; /* Or 'repeat' */

    /* Optional: Add slight rounding or shadow if desired */
    border-radius: 2px; /* Match button rounding? */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.2); */

    /* --- Remove old padding that might interfere --- */
    padding: 0; /* Remove overall padding if any was set */
}

/* --- Ensure Menu Items are Styled Correctly within Flex container --- */
.main-navigation ul#primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Already flex, but good to confirm */
    align-items: center; /* Ensure vertical alignment */
}

.main-navigation ul#primary-menu li {
    margin: 0 20px; /* Adjust spacing between menu items */
}

/* Links within the menu */
.main-navigation a {
    color: var(--color-text-light); /* Check contrast against new background */
    text-decoration: none;
    display: block; /* Make link clickable area fill the space */
    /* Padding might not be needed here if height/align-items controls spacing */
    /* padding: 5px 0;  <== Remove or adjust this */
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: #fff;
    text-decoration: none;
}


/* --- Adjust Sign Up Button Area --- */
.header-signup {
    position: absolute; /* Keep absolute relative to .main-navigation */
    right: 0px; /* Position at the very right edge of the nav bar */
    top: 0; /* Align to top */
    height: 100%; /* Make it fill the nav bar height */
    display: flex; /* Use flex to center the link vertically */
    align-items: center; /* Center link vertically */
    border-left: 1px solid rgba(245, 238, 218, 0.3); /* Keep divider */
    padding-left: 20px; /* Space after divider */
    padding-right: 20px; /* Space at the end */
    margin-left: 20px; /* Keep space from main menu items */

    /* Remove transform if causing issues with flex alignment */
    /* transform: translateY(-50%); */
}
.header-signup a {
     /* Color/hover styles inherited or set specifically */
     padding: 0; /* Remove padding from link itself */
     font-weight: 700;
     letter-spacing: 1px;
}

/* --- Adjust Sign Up Button Area --- */
.header-utopia {
    position: absolute; /* Keep absolute relative to .main-navigation */
    left: 0px; /* Position at the very right edge of the nav bar */
    top: 0; /* Align to top */
    height: 100%; /* Make it fill the nav bar height */
    display: flex; /* Use flex to center the link vertically */
    align-items: center; /* Center link vertically */
    border-right: 1px solid rgba(245, 238, 218, 0.3); /* Keep divider */
    padding-left: 0px; /* Space after divider */
    padding-right: 20px; /* Space at the end */
    margin-left: 25px; /* Keep space from main menu items */

    /* Remove transform if causing issues with flex alignment */
    /* transform: translateY(-50%); */
}
.header-utopia a {
     /* Color/hover styles inherited or set specifically */
     padding: 0; /* Remove padding from link itself */
     font-weight: 700;
     letter-spacing: 1px;
}


/* --- Responsive Adjustments --- */
/* Adjust max-width on slightly smaller screens if needed */
@media (max-width: 1100px) {
  .main-navigation {
    max-width: 95%; /* Use percentage or slightly less than 100% */
  }
  .main-navigation ul#primary-menu li {
        margin: 0 15px; /* Reduce menu item spacing */
   }
   .header-signup {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 15px;
   }
}

/* Further adjustments for mobile needed (hiding menu, showing toggle) */
 @media (max-width: 768px) {
    .main-navigation {
        /* Example: Make it full width on mobile, prepare for toggle */
        max-width: 100%;
        width: 100%;
        height: auto; /* Let height adjust based on toggle */
        min-height: 50px; /* Keep a minimum height */
        justify-content: space-between; /* Space out toggle and maybe logo/title */
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 0;
    }
    /* Add styles here to: */
    /* 1. Hide #primary-menu */
    /* 2. Show .menu-toggle */
    /* 3. Style the expanded mobile menu (often position: absolute) */
    /* 4. Potentially hide .header-signup or move it into the toggled menu */
 }

.menu-toggle { /* Hide mobile menu toggle on desktop */
    display: none;
}

/* Sign Up Button Area */

/* Site Title */
.site-branding {
    padding: 30px 15px 20px 15px; /* Spacing around title */
    text-align: center;
}

.site-title {
    font-family: var(--font-title);
    font-size: 3em; /* Large title */
    color: var(--color-text-dark);
    margin: 0;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: -50px;
}
.site-title a { /* If using dynamic site title */
    color: var(--color-text-dark);
    text-decoration: none;
}


/* Hero Image */
.hero-image-container {
    line-height: 0; /* Remove extra space below image */
    margin-bottom: 30px; /* Space below hero */
}

.hero-image-container img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto; /* Center if needed, though likely full width */
}

/*--------------------------------------------------------------
# Content Area
--------------------------------------------------------------*/
.site-content {
   padding-top: 0; /* Remove default padding */
   /* Container class on main handles centering */
}

/* Front Page Specific Sections */
.welcome-section {
    margin-bottom: 30px;
}

.welcome-section h2.section-title {
    margin-top: 1em; /* Less top margin for first section */
}

.welcome-section p {
    max-width: 800px; /* Limit width of intro text */
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1em; /* Slightly larger text */
    margin-bottom: 1em;
}


/* Buttons */
.button,
.play-now-button {
    display: inline-block;
    /*background-color: var(--color-primary);*/
    color: var(--color-text-light);
    padding: 15px 35px;
    font-family: var(--font-nav); /* Match nav font */
    text-transform: uppercase;
    font-size: 1.1em;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    border-radius: 3px; /* Slight rounding */
    margin-top: 15px;
    font-weight: 700;
    background-image: url('assets/images/utopia-button.png');
    background-size: cover;         /* How the image scales: 'cover', 'contain', '100% 100%', or 'auto' */
    background-repeat: no-repeat;   /* Do you want it to tile? 'no-repeat', 'repeat', 'repeat-x', 'repeat-y' */
    background-position: center center; /* Where the image is positioned */
    color: var(--color-text-light); /* Ensure text color still has good contrast! Adjust if needed */
    /* Optional: Add a subtle border if the background image blends too much */
    /* border: 1px solid rgba(0, 0, 0, 0.2); */
    transition: filter 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transition for hover */
}

.play-now-button:hover {
    /* You might want to keep the same background image on hover,
       or slightly change its appearance */
    background-image: url('assets/images/utopia-button.png'); /* Keep same image */
    /* Example: Slightly darken the image on hover */
    filter: brightness(1.1);
    color: #fff; /* Ensure text color is still good on hover */
    text-decoration: none;
}

/* Divider Line */
hr.section-divider {
    border: 0;
    display: block;
    height: 6px;
    background-color: var(--color-text-dark);
    background-image: url('assets/images/utopia-border.png');
    opacity: 0.4;
    margin: 50px auto; /* Space above and below */
    max-width: 100%; /* Make it slightly narrower than container */
}

/* Latest News Section */
.latest-news h2.section-title {
     /* Center handled by text-center class */
}

.news-item {
    display: flex; /* Use flexbox for layout */
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(77, 51, 39, 0.15); /* Faint line under each item */
}
.news-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none; /* No line under the last item */
}

.news-date {
    flex: 0 0 100px; /* Fixed width for date column */
    padding-right: 20px;
    font-size: 0.9em;
    color: var(--color-text-body);
    font-weight: 700;
}

.news-content {
    flex: 1; /* Take remaining space */
}

.news-title {
    margin-top: 0;
    margin-bottom: 0.3em;
    font-size: 1.4em;
    font-weight: 700;
}
.news-title a {
    color: var(--color-text-dark);
}
.news-title a:hover {
    color: var(--color-primary);
}

.news-content .post-excerpt p, /* Target excerpt paragraph */
.news-content p { /* General paragraph within news content */
    margin-bottom: 0; /* Remove default bottom margin */
    font-size: 1em;
    line-height: 1.6;
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
    margin-top: 50px;
    padding: 30px 0;
    border-top: 1px solid rgba(77, 51, 39, 0.15); /* Faint top border */
    font-size: 0.9em;
    color: var(--color-text-body);
}
.site-info {
    text-align: center;
}
.site-info p {
    margin-bottom: 0;
}


/*--------------------------------------------------------------
# Basic Post/Page Styling (For index.php, single.php etc.)
# Add these if you haven't already, or adjust existing ones
--------------------------------------------------------------*/
.site-main > article { /* Style articles on default blog/archive pages */
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(77, 51, 39, 0.15);
    padding-bottom: 30px;
}
.site-main > article:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.entry-header {
    margin-bottom: 1em;
}

.entry-title { /* For single posts/pages */
    font-size: 2.2em;
}
.entry-title a { /* For archive listings */
     color: var(--color-text-dark);
}
.entry-title a:hover {
    color: var(--color-primary);
}

.entry-content p,
.entry-summary p { /* Content on posts/pages */
    font-size: 1.05em;
    line-height: 1.7;
}

/* Add other styles for comments, sidebars, etc. as needed */

/*--------------------------------------------------------------
# Content Sidebar Layout
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Sidebar Layout (Add this section or integrate)
--------------------------------------------------------------*/

/* Target the container holding both sidebar and content on the front page */
/* We use the specific IDs/classes from your HTML */
main#primary.site-main.container {
    display: flex; /* Enable flexbox */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 30px;      /* Creates space BETWEEN the sidebar and the main content */
    align-items: flex-start; /* Align items to the top */
}

/* Style the sidebar */
main#primary.site-main.container > aside#secondary-left {
    flex: 0 0 250px; /* Sidebar: Don't grow, don't shrink, base width 250px */
    width: 250px;    /* Explicit width for clarity/fallback */
    /* Add any desired padding, background, or borders for the sidebar itself */
    /* Example: */
    /* padding: 20px; */
    /* background-color: rgba(106, 58, 42, 0.05); */ /* Subtle background like widget area */
    /* border: 1px solid rgba(106, 58, 42, 0.1); */  /* Subtle border like widget area */
    /* border-radius: 3px; */
    /*background-color: #642719;*/
    background: url('assets/images/utopia-banner-2.png') no-repeat;;
    position: relative;
    height: 600px
}

main#primary.site-main.container > aside#secondary-left::after {

}

.community-symbol {
    display: block;
    margin: 0 auto; /* Center the image */
    max-width: 100%; /* Responsive */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 20px; /* Space below the image */
    margin-top: 20px
}

.community-navigation {
    margin-top: 275px;
}

.community-navigation h2 {
    color: #fcdc5d;
}

.community-navigation .section-divider {
    margin: 25px auto !important;
}

.community-navigation ul {
    padding-left: 60px;
    font-size: .85em;
    font-weight: bold;
    list-style-type: square;
}

.community-navigation ul li {
    margin-bottom: 2px;
    padding-bottom: 2px;
    border-bottom: 1px dashed rgba(106, 58, 42, 0.1); /* Dashed separator for list items */
}

.community-navigation ul li a {
    color: #822a12;
}

/* Style the main content area to the right */
main#primary.site-main.container > section#content {
    flex: 1; /* Content: Grow to fill remaining horizontal space */
    min-width: 0; /* Important for flex items to prevent overflow issues */
    /* Padding/margins inside this section should already be handled by existing rules */
}

#secondary-left h2 {
    margin-top: 0;
    text-align: center;
    color: var(--color-crimson);
    font-size: 1.3em;
    letter-spacing: 1px;
    font-variant-caps: all-small-caps;
}

/*--------------------------------------------------------------
# Responsive Adjustments for Sidebar Layout
--------------------------------------------------------------*/

/* Stack sidebar above content on smaller screens (e.g., tablet/mobile) */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    main#primary.site-main.container {
        flex-direction: column; /* Change flex direction to vertical */
        gap: 40px; /* Adjust vertical gap */
    }

    /* Make both sidebar and content take full width when stacked */
    main#primary.site-main.container > aside#secondary-left,
    main#primary.site-main.container > section#content {
        flex-basis: auto; /* Reset flex-basis */
        width: 100%;     /* Take full available width */
    }
}

/* Apply flexbox to the wrapper containing main content and sidebar */
/* This targets templates *other* than the front page */
.content-sidebar-wrap {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 30px; /* Space between main content and sidebar */
}

/* Main content area when sidebar is present */
.content-sidebar-wrap .site-main {
    flex: 1; /* Takes up most of the available space */
    min-width: 0; /* Prevents content overflow issues in flex items */
    /* Example: Calculate width if needed, e.g., */
    /* width: calc(100% - 300px - 30px); */ /* Full width - sidebar width - gap */
}

/* Sidebar area */
.widget-area.sidebar {
    flex: 0 0 280px; /* Sidebar fixed width (adjust as needed) */
    width: 280px;    /* Explicit width */
}


/*--------------------------------------------------------------
# Sidebar Widget Styling
--------------------------------------------------------------*/
.widget-area .widget {
    margin-bottom: 30px;
    padding: 20px; /* Add padding inside widgets */
    background-color: rgba(106, 58, 42, 0.05); /* Very subtle background */
    border: 1px solid rgba(106, 58, 42, 0.1); /* Subtle border */
    border-radius: 3px;
}

.widget-area .widget:last-child {
    margin-bottom: 0;
}

.widget-area .widget-title {
    font-family: var(--font-heading);
    font-size: 1.3em;
    color: var(--color-text-dark);
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(106, 58, 42, 0.2); /* Separator under title */
}

/* Styling for lists within widgets (e.g., Recent Posts, Categories) */
.widget-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.widget-area ul li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(106, 58, 42, 0.1); /* Dashed separator for list items */
}
.widget-area ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.widget-area a {
    color: var(--color-primary);
    text-decoration: none;
}
.widget-area a:hover {
    color: var(--color-text-dark);
    text-decoration: underline;
}

/* Styling for the Login Form (if using shortcode/Meta widget) */
.widget .login-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--color-text-dark);
}

.widget .login-form input[type="text"],
.widget .login-form input[type="password"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid rgba(106, 58, 42, 0.2);
    background-color: #fff;
    border-radius: 3px;
    box-sizing: border-box; /* Include padding in width */
}

.widget .login-form input[type="submit"] {
    /* Style submit button like other buttons */
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 10px 20px;
    font-family: var(--font-nav);
    text-transform: uppercase;
    font-size: 1em;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    border-radius: 3px;
    font-weight: 700;
    transition: background-color 0.2s ease-in-out;
}
.widget .login-form input[type="submit"]:hover {
    background-color: var(--color-text-dark);
    color: #fff;
}

.widget .login-remember {
    margin-bottom: 15px;
    font-size: 0.9em;
}
.widget .login-remember label {
    display: inline; /* Keep checkbox and label inline */
    font-weight: normal;
    margin-left: 5px;
}

/* Responsive: Stack sidebar below content on smaller screens */
@media (max-width: 768px) {
    .content-sidebar-wrap {
        flex-direction: column; /* Stack items vertically */
        gap: 40px; /* Adjust vertical gap */
    }

    /* Main content takes full width */
    .content-sidebar-wrap .site-main {
        width: 100%;
        flex: 1 1 auto; /* Allow it to grow/shrink naturally */
        margin-left: 0; /* Remove margin */
    }

    /* Sidebar takes full width */
    .widget-area.sidebar {
        width: 100%;
        flex: 1 1 auto; /* Allow it to grow/shrink naturally */
        margin-left: 0; /* Remove margin */
    }
}