/* In assets/css/style.css */
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Open+Sans:wght@300;400;700&display=swap");

/* CSS Custom Properties (Variables) for New Theme */
:root {
  --color-primary: #6ec1cf; /* Light, fresh blue/cyan from your logo */
  --color-primary-dark: #4a9bad; /* Darker shade for text, hover states */
  --color-primary-darker: #3b8a99; /* Even darker for active states */
  --color-primary-light: #a7ddea; /* Lighter shade for accents */
  --color-primary-lighter: #e1f3f8; /* Very light for subtle backgrounds */

  --color-secondary: #989898; /* Neutral grey from your logo */
  --color-secondary-dark: #707070;
  --color-secondary-light: #bebebe;
  --color-secondary-lighter: #e0e0e0;

  --color-text: #333333; /* Main text color */
  --color-text-light: #ffffff;
  --color-text-medium: #555555;
  --color-text-subtle: #777777;

  --color-background: #ffffff; /* White background */
  --color-background-alt: #f4f8f9; /* Very light, cool grey/blue for sections */
  --color-border: #dde4e6; /* Subtle border color */
  --color-border-light: #eef2f3;

  --font-primary: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-headings: "Lora", serif;

  --border-radius-sm: 5px; /* For small rounded corners */
  --spacing-after-nav: 20px; /* Consistent space after secondary navigation */
  --spacing-unit: 30px;
}

/* Basic Reset & Body Styling */
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headings);
  color: var(
    --color-primary-dark
  ); /* Use a darker shade of primary for headings */
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

a {
  color: var(--color-primary-dark);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-darker);
  text-decoration: underline;
}

.wrapper {
  max-width: 960px; /* Slightly wider for a more modern feel */
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-unit);
  padding-left: var(--spacing-unit);
}

/* Header */
.site-header {
  background-color: var(--color-background); /* White header background */
  padding: var(--spacing-unit) 0; /* Increased padding for more space */
  border-bottom: 1px solid var(--color-border);
}

.site-header .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-logo-img {
  max-height: 107px; /* Increased logo size by 20% (from 80px), adjust as needed */
  width: auto;
  vertical-align: middle;
  display: block; /* Ensures proper rendering and spacing */
}

.site-title {
  /* font-size, font-weight, letter-spacing were for text title, not needed for image */
  /* line-height: 54px; */ /* Not needed for image */
  margin-bottom: 5px; /* Reduced space between logo and nav (was 15px) */
  float: none; /* Remove float */
  /* color: var(--color-text); Removed as it's now an image */
  /* text-shadow: none; */ /* No longer needed */
  display: block; /* Make the link a block element */
}

.site-nav {
  position: relative; /* Needed for positioning the .trigger dropdown */ /* Keep this */
  display: flex; /* Use flexbox for layout within the nav */
  align-items: center; /* Vertically align items */
}

/* New Action Bar Styles */
.action-bar {
  background-color: var(--color-primary);
  padding: 8px 0; /* Adjust padding as needed */
  border-bottom: 2px solid var(--color-primary-dark);
  margin-bottom: var(
    --spacing-after-nav
  ); /* This creates the space before page-content */
}

.action-bar .wrapper {
  display: flex;
  justify-content: flex-start; /* Aligns hamburger to the left */
  align-items: center;
  padding-left: var(--spacing-unit); /* Match page content alignment */
  padding-right: var(--spacing-unit); /* Match page content alignment */
}

.action-bar .site-nav .menu-icon svg {
  fill: var(--color-text-light); /* Make hamburger icon white on blue bar */
}

/* Hamburger Menu Styles - always active */
.nav-trigger {
  display: none; /* The actual checkbox is hidden */
}

label[for="nav-trigger"] {
  /* The clickable area for the icon */
  display: block;
  cursor: pointer;
  padding: 5px; /* Clickable area around icon */
}

.menu-icon {
  display: block; /* Make the SVG container visible */
}
.menu-icon svg {
  fill: var(--color-primary-dark); /* Default fill, overridden in .action-bar */
  width: 24px; /* Slightly larger icon */
  height: 24px;
}

/* Desktop Links Styles - hidden by default, shown by media query */
.desktop-links {
  display: none; /* Hidden by default */
  /* Use flex or block depending on desired layout of buttons */
  align-items: center; /* Vertically align links if using flex */
}

.desktop-links .page-link {
  color: var(--color-text-light); /* White text on blue bar */
  text-decoration: none;
  padding: 8px 15px; /* Padding for clickable area */
  margin: 0 5px; /* Space between buttons */
  transition: background-color 0.3s ease;
}

.desktop-links .page-link:hover {
  background-color: var(--color-primary-dark); /* Darker blue on hover */
  text-decoration: none; /* Ensure underline is removed on hover */
}

.trigger {
  display: none; /* Hidden by default */
  position: absolute;
  top: 100%; /* Position below the icon */
  left: 0; /* Align dropdown to the left of the hamburger */
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  padding: 5px 0; /* Padding inside the dropdown box */
}

.nav-trigger:checked ~ .trigger {
  display: block; /* Show when checkbox is checked */
}

.trigger .page-link {
  display: block;
  padding: 8px 15px;
  color: var(--color-text-medium);
  text-decoration: none;
  white-space: nowrap;
}

.trigger .page-link:hover {
  background-color: var(--color-primary-lighter);
  color: var(--color-primary-darker);
  text-decoration: none;
}
/* Main Content */
.page-content {
  /* Apply consistent spacing after the main header, and maintain side/bottom padding */
  padding-top: var(--spacing-after-nav);
  padding-right: var(--spacing-unit);
  padding-bottom: var(--spacing-unit); /* Added bottom padding back */
  padding-left: var(--spacing-unit);
}

/* Ensure main page titles that use these classes don't have excessive top margin */
.page-heading,
.post-title {
  /* Covers homepage, posts, tag pages, and generic pages if they use .page-heading for titles */
  margin-top: 0;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-unit) 0;
  font-size: 15px;
  color: var(--color-text-medium);
  text-align: center;
  background-color: var(--color-background-alt);
}

.footer-heading {
  font-size: 18px;
  margin-bottom: 15px;
  color: var(--color-primary-dark);
}

.contact-list,
.social-media-list {
  list-style: none;
  padding-left: 0;
  color: var(--color-text-subtle); /* Ensure text in lists is also styled */
}

.social-media-list li {
  display: inline-block; /* Or flex for more control */
  margin-right: 10px;
}
.social-media-list .svg-icon {
  vertical-align: middle; /* Aligns icon with text */
  margin-right: 4px; /* Space between icon and username */
}
.social-media-list a {
  color: var(--color-text-subtle); /* Ensure social links inherit this */
}
.social-media-list a:hover {
  color: var(--color-primary-dark);
}
.footer-col-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-col {
  flex: 1;
  margin-bottom: 15px;
  padding: 0 10px;
}

.footer-col a {
  color: var(--color-primary-dark);
}

/* Basic Responsive (you'll want to expand on this) */
@media screen and (max-width: 600px) {
  /* Mobile Styles: Hamburger is shown by default, desktop links hidden by default */
  .site-nav {
    /* On mobile, .desktop-links is already display:none by default */
    /* Ensure hamburger icon is aligned to the left */
    width: 100%;
    justify-content: center;
  }

  .footer-col-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .footer-col {
    text-align: center;
  }
  /* Other mobile-specific styles for footer, etc., are correctly placed elsewhere */
}

@media screen and (min-width: 601px) {
  /* Desktop/Tablet Styles: Show Desktop Links, Hide Hamburger */
  .site-nav {
    width: 100%;
    justify-content: center; /* Center the .desktop-links container */
  }

  .site-nav .desktop-links {
    display: flex;
  }

  label[for="nav-trigger"],
  .menu-icon,
  .trigger {
    display: none; /* Hide hamburger icon and its dropdown mechanism */
  }
  /* Footer styles for desktop are handled by default rules, no need to repeat here */
}

.sidebar-column h2 {
  margin-top: 0;
  font-size: 1.4em;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.tag-filters .tag-cloud {
  margin-bottom: var(--spacing-unit);
}

.all-posts-sidebar .all-posts-list {
  list-style: none;
  padding-left: 0;
  font-size: 0.9em;
}

.all-posts-sidebar .all-posts-list li {
  margin-bottom: 8px;
  line-height: 1.4;
}

.all-posts-sidebar .all-posts-list a {
  color: var(--color-primary-dark);
}

/* Homepage Content Styles */
.site-summary {
  text-align: justify;
}

.home-intro-image {
  float: right;
  margin-left: 20px;
  margin-bottom: 10px;
  border-radius: var(--border-radius-sm);
  width: 250px;
  height: auto;
}

/* Sidebar Latest Posts Widget */
.sidebar-post-item {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--color-border-light);
  list-style-type: none;
}

.sidebar-post-header {
  overflow: auto; /* Clearfix for floated image */
  margin-bottom: 8px;
}

.sidebar-post-image-wrapper {
  float: left;
  margin-right: 10px;
}

.sidebar-post-image {
  width: 60px;
  height: auto;
  border-radius: 3px; /* Slightly smaller radius for small image */
  display: block;
}

.sidebar-post-content-wrapper {
  overflow: hidden; /* Contains content next to floated image */
}

.sidebar-post-title {
  margin-top: 0;
  margin-bottom: 3px;
  font-size: 1.1em;
}

.sidebar-post-meta {
  font-size: 0.8em;
  color: var(--color-text-medium);
}

.sidebar-post-description {
  margin-top: 0;
  font-size: 0.85em;
  line-height: 1.4;
  color: var(--color-text-medium);
}

/* Tag Cloud and Tag Page Styling */
.tag-cloud {
  margin-top: 20px;
  margin-bottom: var(--spacing-unit);
}

.tag-link {
  display: inline-block;
  background-color: var(--color-primary-lighter);
  color: var(--color-primary-darker);
  padding: 5px 10px;
  margin: 5px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
  border: 1px solid var(--color-primary-light);
}

.tag-link:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary-darker);
  border-color: var(--color-primary-dark);
}

.tag-link.active-tag {
  background-color: var(--color-primary-dark);
  color: var(--color-text-light);
  border-color: var(--color-primary-darker);
}

.tag-count {
  font-size: 0.8em;
  color: var(--color-text-medium);
}

/* Responsive adjustments for two-column layout */
@media screen and (max-width: 768px) {
  .home-columns-container {
    flex-direction: column;
  }
  .main-content-column,
  .sidebar-column {
    flex: 1 1 100%; /* Full width on smaller screens */
  }
}

/* Contact Page Social List */
.contact-social-list {
  list-style: none;
  padding-left: 0;
}
.contact-social-list li {
  margin-bottom: 8px;
}

/* Footer Policy Links */
.footer-policy-links {
  margin-top: 25px; /* Space above the policy links */
  padding-top: 15px; /* Space within the policy links area if you add a border later */
  border-top: 1px solid var(--color-border-light);
  font-size: 0.9em;
  text-align: center; /* Center the policy link(s) */
}

.footer-policy-links a {
  color: var(--color-text-medium);
  text-decoration: underline;
}

/* Cookie Notice Styles */
.cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%; /* Fix: Ensure width is 100% of viewport */
  background-color: var(
    --color-secondary-dark
  ); /* Using secondary dark for contrast */
  color: var(--color-text-light);
  padding: 15px 25px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  box-sizing: border-box; /* This is the key fix */
  z-index: 10000; /* Ensure it's on top */
  display: flex; /* Visible by default, JS will hide if consent given */
  align-items: center;
  justify-content: space-between;
  font-size: 0.9em;
  line-height: 1.4;
}

.cookie-notice p {
  margin: 0;
  margin-right: 20px;
  flex-grow: 1;
}

.cookie-notice a {
  color: var(--color-primary-lighter); /* Light link on dark background */
  text-decoration: underline;
}

.cookie-notice a:hover {
  color: var(
    --color-background
  ); /* Reverted to use main background color for hover */
}

.cookie-accept-button {
  background-color: var(--color-primary);
  color: white;
  border: none;
  padding: 8px 18px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.9em;
  cursor: pointer;
  border-radius: 5px;
  white-space: nowrap; /* Prevents button text from wrapping */
  transition: background-color 0.2s ease-in-out;
}

.cookie-accept-button:hover {
  background-color: var(--color-primary-dark);
}

/* Responsive adjustments for cookie notice */
@media (max-width: 768px) {
  .cookie-notice {
    flex-direction: column;
    text-align: center;
    padding: 15px;
  }
  .cookie-notice p {
    margin-bottom: 10px;
    margin-right: 0;
  }
}

/* Post Navigation (Next/Previous/All Posts) */
.post-nav-separator {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 40px 0;
}

.post-nav {
  margin-bottom: 20px; /* Space after the navigation */
  display: flex;
  justify-content: center; /* Center the group of links */
  align-items: center; /* Vertically align items */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 10px; /* Space between items (links and separators) */
}

.post-nav a {
  display: inline-block; /* Makes the entire list item area (padded) clickable */
  padding: 8px 5px; /* Some padding for easier clicking */
  /* Link color is inherited from global 'a' styles, can be overridden here if needed */
}

.post-nav-text-separator {
  color: var(--color-text-subtle);
  align-self: center; /* Vertically align with link text if line-heights differ */
}

/* Styles for elements that might have inline styles in _layouts/tag_page.html */
.tag-page-header-divider {
  margin-bottom: var(--spacing-unit);
  padding-bottom: calc(var(--spacing-unit) / 2);
  border-bottom: 1px solid var(--color-border);
}

.tag-page-other-tags-label {
  margin-bottom: 10px;
  font-weight: bold;
}

.post-list-item {
  margin-bottom: var(--spacing-unit);
  padding-bottom: calc(var(--spacing-unit) * 2 / 3);
  border-bottom: 1px solid var(--color-border);
  list-style-type: none;
}
.post-list-item-description {
  font-size: 0.9em;
  color: var(--color-text-medium);
  margin-top: 0;
}

/* New classes for tag_page.html post list items (and potentially reusable elsewhere) */
.post-list-item-header {
  overflow: auto; /* Clearfix for floated image */
  margin-bottom: 10px;
}

.post-list-item-image-wrapper {
  float: left;
  margin-right: 20px; /* Space between image and text */
}

.post-list-item-image {
  width: 150px; /* Specific to tag page list, adjust if used elsewhere */
  height: auto;
  border-radius: 4px;
  display: block;
}

.post-list-item-content-wrapper {
  overflow: hidden; /* Contains content next to floated image */
}

.post-list-item-title {
  /* Applied to the h3 in this context */
  margin-top: 0;
  margin-bottom: 5px;
}

.post-list-item-description p {
  /* Targets the p tag within the description div */
  margin-top: 0;
  margin-bottom: 0;
}

/* Styles for _layouts/post.html */
.post-featured-image {
  /* This is the div wrapper for the featured image */
  margin-bottom: var(--spacing-unit);
}

.post-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius-sm);
}

/* Sort Controls for All Posts page */
.sort-controls {
  margin-bottom: var(--spacing-unit);
  padding: 15px;
  background-color: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
}

.sort-controls p {
  /* For the status text */
  margin: 0;
  color: var(--color-text-medium);
}

.sort-controls a {
  /* For the toggle link */
  text-decoration: underline;
}

/* Responsive adjustments for post list items on smaller screens */
@media screen and (max-width: 600px) {
  .post-list-item-header {
    overflow: visible; /* Remove clearfix behavior as float is removed */
  }

  .post-list-item-image-wrapper {
    float: none; /* Stack image above text */
    margin-right: 0;
    margin-bottom: 15px; /* Space between image and content below */
    width: 100%; /* Allow wrapper to span full width */
  }

  .post-list-item-image {
    /* Adjust image size for mobile stacked view */
    width: 100%; /* Make image responsive within its container */
    max-width: 280px; /* Set a max-width for the image, adjust as desired */
    /* height: auto; is already set by the general rule */
    /* display: block; is already set by the general rule */
    margin-left: auto; /* Center the image if max-width is applied */
    margin-right: auto; /* Center the image if max-width is applied */
  }

  .post-list-item-content-wrapper {
    overflow: visible; /* Remove overflow used for float containment */
    width: 100%; /* Ensure it takes full width */
  }
}