/*
Theme Name: Right Click Life Theme
Theme URI: https://example.com/right-click-life-theme
Author: Your Name
Author URI: https://example.com
Description: A theme based on the Right Click Life HTML layout, emphasizing sustainable luxury and conscious living.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, custom-header, custom-menu, featured-images, two-columns, right-sidebar, theme-options, translation-ready
Text Domain: rightclicklife
*/

/* --- Right Click Life - Modern & Eco-Luxe Blog CSS --- */

/* --- 1. Variables & Basic Reset --- */
:root {
  /* Color Palette */
  --clr-primary: #4A5D4A; /* Muted Forest Green */
  --clr-secondary: #8B7D6B; /* Warm Earthy Brown */
  --clr-accent: #B08D57; /* Soft Bronze/Gold */
  --clr-background: #F8F6F2; /* Light Cream/Off-White */
  --clr-text-main: #333333; /* Dark Charcoal */
  --clr-text-light: #6c757d; /* Medium Grey */
  --clr-border: #e0e0e0; /* Light Grey for borders */
  --clr-white: #ffffff;
  --clr-black: #000000;

  /* Typography */
  --font-primary: 'Inter', sans-serif; /* Clean sans-serif for body */
  --font-secondary: 'Playfair Display', serif; /* Elegant serif for headings */
  --font-size-base: 1rem; /* Base font size (approx 16px) */
  --line-height-base: 1.7; /* Generous line height for readability */

  /* Spacing & Layout */
  --spacing-unit: 1rem;
  --content-max-width: 800px; /* Max width for readable text lines */
  --border-radius: 8px; /* Subtle rounded corners */

  /* Transitions */
  --transition-speed: 0.3s;
}

/* Basic Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%; /* Use % for better accessibility scaling */
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--clr-text-main);
  background-color: var(--clr-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- 2. Global Elements --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary);
  color: var(--clr-primary);
  margin-bottom: calc(var(--spacing-unit) * 1);
  line-height: 1.3;
  font-weight: 700;
}

h1 { font-size: 2.8rem; margin-top: calc(var(--spacing-unit) * 2); }
h2 { font-size: 2.2rem; margin-top: calc(var(--spacing-unit) * 1.8); }
h3 { font-size: 1.8rem; margin-top: calc(var(--spacing-unit) * 1.5); }
h4 { font-size: 1.4rem; margin-top: calc(var(--spacing-unit) * 1.2); }
h5 { font-size: 1.2rem; margin-top: calc(var(--spacing-unit) * 1); }
h6 { font-size: 1rem; margin-top: calc(var(--spacing-unit) * 1); color: var(--clr-secondary); text-transform: uppercase; letter-spacing: 1px;}

p {
  margin-bottom: calc(var(--spacing-unit) * 1.2);
}

a {
  color: var(--clr-accent);
  text-decoration: none;
  position: relative;
  transition: color var(--transition-speed) ease;
}

a::after { /* Subtle underline effect */
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: var(--clr-accent);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform var(--transition-speed) ease-out;
}

a:hover,
a:focus {
  color: var(--clr-primary);
}

a:hover::after,
a:focus::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
  /* Removed border-radius from here; apply specifically (e.g., post-thumbnail img) */
}

ul, ol {
  margin-bottom: calc(var(--spacing-unit) * 1.2);
  padding-left: calc(var(--spacing-unit) * 1.5);
}

li {
  margin-bottom: calc(var(--spacing-unit) * 0.5);
}

blockquote {
  border-left: 4px solid var(--clr-accent);
  padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);
  margin: calc(var(--spacing-unit) * 1.5) 0;
  background-color: var(--clr-white);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  font-style: italic;
  color: var(--clr-text-light);
}

blockquote p:last-child {
  margin-bottom: 0;
}

hr {
  border: 0;
  height: 1px;
  background-color: var(--clr-border);
  margin: calc(var(--spacing-unit) * 2.5) 0;
}

code, pre {
  font-family: 'Courier New', Courier, monospace;
  background-color: #f0f0f0; /* Slightly different background for code */
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

pre {
  padding: var(--spacing-unit);
  overflow-x: auto;
  display: block;
  border: 1px solid var(--clr-border);
}

/* WordPress Core CSS */
.alignwide {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--content-max-width);
}

.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignright {
    float: right;
    margin: 0.5em 0 1em 1.5em;
}

.alignleft {
    float: left;
    margin: 0.5em 1.5em 1em 0;
}

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* Screen reader text */
.screen-reader-text {
	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;
}

/* --- 3. Layout & Blog Specific Structure --- */

/* Header */
.blog-header {
  padding: calc(var(--spacing-unit) * 2) 0;
  text-align: center;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.blog-header .site-title {
  margin-bottom: 0; /* Adjust margin */
}

.blog-header .site-title a {
  font-family: var(--font-secondary);
  font-size: 2.5rem;
  color: var(--clr-primary);
  text-decoration: none;
  font-weight: 700;
}
.blog-header .site-title a::after { /* No underline for main title */
    display: none;
}

.blog-header .site-description {
  font-size: 1rem;
  color: var(--clr-secondary);
  margin-top: calc(var(--spacing-unit) * 0.5);
  font-style: italic;
  margin-bottom: 0; /* Adjust margin */
}

/* Navigation */
.main-navigation {
    margin-top: var(--spacing-unit);
}
.main-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0; /* Reset margin */
  display: flex;
  justify-content: center;
  gap: calc(var(--spacing-unit) * 1.5);
}

.main-navigation li {
    margin-bottom: 0; /* Reset li margin */
}

.main-navigation a {
  color: var(--clr-text-main);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.main-navigation a::after { /* Different underline style for nav */
    background-color: var(--clr-primary);
    height: 2px;
    bottom: -4px;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: var(--clr-primary);
}
.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Main Content Area */
.main-content-area {
    /* Flex item properties handled in .site-container */
}

/* Blog Post Structure */
.blog-post, /* Existing class */
.post, /* Standard WP post class */
.page /* Standard WP page class */
{
  margin-bottom: calc(var(--spacing-unit) * 3);
  padding-bottom: calc(var(--spacing-unit) * 2);
  border-bottom: 1px solid var(--clr-border);
}
.blog-post:last-of-type,
.post:last-of-type,
.page:last-of-type {
    border-bottom: none;
}

.post-header {
  margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.entry-title /* WP standard */,
.post-title /* Your class */
{
  margin-bottom: calc(var(--spacing-unit) * 0.5);
  font-size: 2.2rem; /* Make sure it matches h2 */
  font-family: var(--font-secondary);
  color: var(--clr-primary);
  line-height: 1.3;
  font-weight: 700;
}
.entry-title a,
.post-title a {
    color: var(--clr-primary);
}
.entry-title a::after,
.post-title a::after {
    display: none; /* No underline on post titles */
}
.entry-title a:hover,
.post-title a:hover {
    color: var(--clr-accent);
}


.entry-meta /* WP standard */,
.post-meta /* Your class */
{
  font-size: 0.9rem;
  color: var(--clr-text-light);
  margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.entry-meta span,
.post-meta span {
    margin-right: var(--spacing-unit);
    display: inline-block; /* Ensure spans behave well */
}
.entry-meta a,
.post-meta a {
    color: var(--clr-text-light);
}
.entry-meta a:hover,
.post-meta a:hover {
    color: var(--clr-accent);
}
.entry-meta a::after,
.post-meta a::after {
    background-color: var(--clr-accent);
    opacity: 0.5;
}


.post-thumbnail /* Your class */,
.wp-post-image /* WP standard */
{
  margin-bottom: calc(var(--spacing-unit) * 1.5);
  border: 1px solid var(--clr-border); /* Optional subtle border */
  border-radius: var(--border-radius);
}

.entry-content /* WP standard */,
.post-content /* Your class */
{
  /* Styles for content within a post */
}

.read-more-link {
  display: inline-block;
  margin-top: var(--spacing-unit);
  font-weight: 700;
  color: var(--clr-primary);
}
.read-more-link:hover {
    color: var(--clr-accent);
}
.read-more-link::after {
    bottom: -4px;
    height: 2px;
}

/* Sidebar */
.site-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: calc(var(--spacing-unit) * 2);
    max-width: 1200px; /* Wider container if using sidebar */
    margin: 0 auto;
    padding: 0 calc(var(--spacing-unit) * 1.5);
}
.main-content-area {
    flex: 2; /* Main content takes more space */
    min-width: 300px; /* Prevent excessive shrinking */
    max-width: var(--content-max-width); /* Apply max width here if sidebar exists */
    margin: 0; /* Reset margin auto if inside flex */
}
/* Adjust if no sidebar */
.no-sidebar .main-content-area {
    flex: 1 1 100%; /* Take full width */
    max-width: var(--content-max-width);
    margin: 0 auto; /* Center when no sidebar */
}

.sidebar {
    flex: 1; /* Sidebar takes less space */
    min-width: 250px; /* Prevent excessive shrinking */
    padding-top: calc(var(--spacing-unit) * 1.8); /* Align top roughly with H2 */
}

.widget {
  margin-bottom: calc(var(--spacing-unit) * 2);
  background-color: var(--clr-white);
  padding: var(--spacing-unit);
  border-radius: var(--border-radius);
  border: 1px solid var(--clr-border);
}

.widget-title {
  font-family: var(--font-secondary);
  font-size: 1.3rem;
  color: var(--clr-secondary);
  margin-bottom: var(--spacing-unit);
  padding-bottom: calc(var(--spacing-unit) * 0.5);
  border-bottom: 1px solid var(--clr-border);
  margin-top: 0; /* Reset heading margin */
}

.widget ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0; /* Reset list margin */
}
.widget li {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    border-bottom: 1px dashed var(--clr-border);
    padding-bottom: calc(var(--spacing-unit) * 0.5);
}
.widget li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.widget a {
    /* Link styling within widgets - Inherits global 'a' styles */
    /* Add specific overrides if needed */
}

/* Search Widget Specific */
.widget_search .search-form {
    /* Style the form if needed */
}
.widget_search label {
    display: block;
    margin-bottom: 0.5em;
}
.widget_search .search-field {
    width: 100%;
    padding: 0.5em;
    border: 1px solid var(--clr-border);
    border-radius: var(--border-radius);
    font-family: var(--font-primary);
    font-size: 0.9rem;
}
.widget_search .search-submit {
    margin-top: 0.5em;
    padding: 0.5em 1em;
    background-color: var(--clr-primary);
    color: var(--clr-background);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 700;
}
.widget_search .search-submit:hover {
    background-color: var(--clr-accent);
}

/* Categories Widget - Count */
.widget_categories .count {
    color: var(--clr-text-light);
    font-size: 0.85em;
    margin-left: 0.5em;
}

/* Pagination */
.pagination,
.posts-navigation,
.post-navigation {
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: calc(var(--spacing-unit) * 2);
    text-align: center;
    clear: both; /* Ensure it clears floats */
}
.pagination a,
.posts-navigation a,
.post-navigation a,
.pagination span,
.posts-navigation span,
.post-navigation span {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
    border: 1px solid var(--clr-border);
    margin: 0 0.25em;
    border-radius: var(--border-radius);
    color: var(--clr-primary);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.pagination a:hover,
.posts-navigation a:hover,
.post-navigation a:hover {
    background-color: var(--clr-primary);
    color: var(--clr-background);
    border-color: var(--clr-primary);
}

.pagination .current,
.posts-navigation .current,
.post-navigation .current {
    background-color: var(--clr-primary);
    color: var(--clr-background);
    border-color: var(--clr-primary);
    font-weight: bold;
}

.pagination .dots,
.posts-navigation .dots,
.post-navigation .dots {
    border: none;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

/* Simple Older/Newer Links Fallback */
.nav-previous a,
.nav-next a {
    font-weight: 700;
}
.nav-previous { float: left; }
.nav-next { float: right; }

/* Footer */
.main-footer {
  margin-top: calc(var(--spacing-unit) * 3);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.5);
  text-align: center;
  font-size: 0.9rem;
  color: var(--clr-text-light);
  border-top: 1px solid var(--clr-border);
  background-color: var(--clr-white); /* Slightly different footer background */
  clear: both;
}

.main-footer p {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.main-footer p:last-child {
    margin-bottom: 0;
}

.main-footer a {
    color: var(--clr-secondary);
}
.main-footer a:hover {
    color: var(--clr-accent);
}


/* --- 4. Utility Classes (Optional) --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
/* .hidden is often handled by WP's .screen-reader-text */


/* --- 5. Responsiveness --- */
@media (max-width: 768px) {
  :root {
    --font-size-base: 0.95rem; /* Slightly smaller base font on mobile */
  }

  h1, .site-title { font-size: 2.2rem; }
  h2, .entry-title, .post-title { font-size: 1.8rem; }
  h3 { font-size: 1.5rem; }

  .site-container { /* Adjust padding for container too */
    padding: 0 var(--spacing-unit);
  }

  /* Stack navigation */
  .main-navigation ul {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.8);
  }

  /* Stack main content and sidebar */
   .site-container {
        flex-direction: column;
   }
   .main-content-area, .sidebar {
       flex: 1 1 100%; /* Allow both to take full width when stacked */
       max-width: 100%; /* Override max-width when stacked */
   }
   .sidebar {
       padding-top: 0; /* Reset padding when stacked */
       margin-top: calc(var(--spacing-unit) * 2);
   }
}

@media (max-width: 480px) {
    :root {
        --font-size-base: 0.9rem;
    }
    h1, .site-title { font-size: 1.9rem; }
    h2, .entry-title, .post-title { font-size: 1.6rem; }
    h3 { font-size: 1.3rem; }

    .blog-header .site-title a {
        font-size: 2rem;
    }
    .main-navigation ul {
        gap: calc(var(--spacing-unit) * 0.5);
    }
    .pagination a, .pagination span, .posts-navigation a, .posts-navigation span {
        padding: calc(var(--spacing-unit) * 0.4) calc(var(--spacing-unit) * 0.8);
        margin: 0 0.15em;
    }
}