/*
Theme Name: JulianLloydWebber
Theme URI: 
Author: Mark Hayes (3RNet)
Author URI: 
Description: Customisations for Julian - first draft
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: julianlloydwebber
Tags: 
*/

/* ========================================
   CONTENT WIDTH CONSTRAINTS
   ======================================== */

/* Constrain ONLY SINGLE POST content, not archive pages */
.single .wp-block-post-content,
.single-post .entry-content,
.single-post .post-content,
.single article.post .entry-content {
  max-width: 1024px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Also constrain direct children of SINGLE post content */
.single .wp-block-post-content > *,
.single-post .entry-content > *:not(.alignfull):not(.alignwide),
.single-post .post-content > * {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Fix for images and embeds in SINGLE POST content */
.single .entry-content img,
.single .entry-content iframe,
.single .entry-content video,
.single .entry-content audio,
.single .entry-content embed,
.single .wp-block-post-content img,
.single .wp-block-post-content iframe {
  max-width: 100%;
  height: auto;
}

/* Specific fix for Twenty Twenty-Five theme's SINGLE post template */
.single .wp-site-blocks .wp-block-post-content {
  max-width: 1024px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Also constrain the metadata panel to content width */
.jlw-post-metadata-panel {
  max-width: 1024px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Add padding to post content blocks when metadata panel is present (for text alignment) */
.wp-block-post-content:has(.jlw-post-metadata-panel) > *:not(.jlw-post-metadata-panel),
.wp-block-group:has(.jlw-post-metadata-panel) > .wp-block-post-title {
  padding-inline: 20px;
}

/* ========================================
   METADATA PANEL STYLES (Updated)
   ======================================== */

/* Panel Container - Constrained width below content */
.jlw-post-metadata-panel {
  position: relative; /* Changed from fixed */
  width: 100%;
  margin-top: 3.42em;
  padding: 20px;
  background: rgba(255, 255, 255, .42);
  border: 1px solid #dddddd;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Two-column grid layout */
.jlw-metadata-grid {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 20px;
}

/* Image column - centered */
.jlw-metadata-image-col {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #030303;
  border-radius: 3px;
}

.jlw-metadata-image-col img {
  width: min(420px, calc(100% - 3.2em));
  height: auto;
  object-fit: contain;
}

/* Panel Heading */
.jlw-post-metadata-panel h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  padding-bottom: 10px;
  border-bottom: 2px solid #eeeeee;
}

/* Section Styles - for items with headings */
.jlw-metadata-section {
  margin-bottom: 20px;
}

.jlw-metadata-section:last-of-type {
  margin-bottom: 15px;
}

/* Section Headings */
.jlw-metadata-section h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Content under headings */
.jlw-metadata-content {
  color: #666666;
  line-height: 1.6;
  font-size: 15px;
}

/* Simple items (label and date) */
.jlw-metadata-simple {
  margin-bottom: 1em;
  color: #666666;
  line-height: 1.2;
  font-size: 1em;
}

.jlw-metadata-simple:last-child {
  margin-bottom: 0;
}

/* Responsive Styles for Mobile Devices */
@media (max-width: 782px) {
  .jlw-post-metadata-panel {
    padding: 15px;
    margin-top: 20px;
  }

  /* Stack columns on mobile */
  .jlw-metadata-grid {
    grid-template-columns: 1fr;
  }

  .jlw-metadata-image-col {
    order: -1;
  }

  .jlw-post-metadata-panel h3 {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .jlw-metadata-section {
    margin-bottom: 18px;
  }

  .jlw-metadata-section h4 {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .jlw-metadata-content {
    font-size: 14px;
  }

  .jlw-metadata-simple {
    font-size: 13px;
  }
}

/* Smaller Mobile Screens */
@media (max-width: 480px) {
  .jlw-post-metadata-panel {
    padding: 12px;
    border-radius: 4px;
  }

  .jlw-post-metadata-panel h3 {
    font-size: 16px;
  }
}

/* ========================================
   NAVIGATION MENU
   ======================================== */

.wp-block-navigation-item {
  white-space: nowrap;
}