/*
Theme Name: WP Zurimed
Theme URI: https://zurimed.ch
Author: Zurimed Team
Author URI: https://zurimed.ch
Description: Custom block theme for Zurimed with dynamic Gutenberg blocks
Version: 1.1.1
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wp-zurimed
*/

/**
 * Layout System
 * Uses WordPress's built-in alignment system with proper content constraints
 */

/* FOUC Prevention: Override inline styles once stylesheet loads */
html {
  background-color: #ffffff;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

body {
  opacity: 1;
  transition: opacity 0.2s ease-in;
  min-height: 100%;
  background-color: #ffffff;
}

/* Allow full-width blocks to break out of content width */
.alignfull {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Editor-specific: Ensure alignment preview matches frontend */
.editor-styles-wrapper .alignfull {
  width: calc(
    100% + var(--wp--custom--layout--wide-size, 1200px) -
      var(--wp--custom--layout--content-size, 1080px)
  );
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* In editor: Full width means full editor canvas width */
.editor-styles-wrapper .wp-block[data-align="full"] {
  max-width: 100%;
  width: 100%;
}

/* Override WordPress core editor layout for full-width blocks */
.block-editor-block-list__layout.is-root-container > .alignfull {
  max-width: 100% !important;
  width: 100%;
}

/**
 * Custom Block Styles
 */

/* 
 * TODO: Button Styling Refactor Needed
 * 
 * CURRENT STATE (2026-04-13):
 * - WordPress default "outline" button style now overridden to match pill design
 * - Legacy pill styles still registered on button groups (core/buttons)
 * 
 * NEXT STEPS:
 * 1. Migrate pill styling from button groups to individual buttons
 * 2. Register "pill" as a button (core/button) style variation instead of buttons (core/buttons)
 * 3. Remove pill-space-evenly combined style
 * 4. Keep "space-evenly" as a button group layout option only
 * 5. Eventually deprecate custom pill styles in favor of outline
 * 
 * The button styles need to be cleaned up to ensure:
 * - Consistent styling across all variations (Pill, Space Evenly, combined)
 * - All hover states work correctly without ambiguity
 * - No CSS specificity/priority issues (currently using !important as workaround)
 * - Proper color handling for white/primary backgrounds in all cases
 * - Remove duplicate code between .is-style-pill and .is-style-pill-space-evenly
 * 
 * Current issues:
 * - Conflicting styles requiring !important overrides
 * - Duplicate CSS for pill variations
 * - Hover states may not work correctly in all color combinations
 */

.wp-element-button,
.wp-element-button:hover {
  text-decoration: none !important;
  min-width: 120px;
}

/* ===================================
   OVERRIDE: WordPress Default Outline Button
   Style outline buttons to match pill styling
   
   Note: is-style-outline class is applied to the wrapper div
   =================================== */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button[class*="is-style-outline"] .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button,
.wp-block-button[class*="is-style-outline"] .wp-element-button {
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem;
  border-radius: 2rem !important;
  background-color: white !important;
  border: 2px solid var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--primary) !important;
  font-weight: 600;
  transition: all 0.2s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button[class*="is-style-outline"] .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-element-button:hover,
.wp-block-button[class*="is-style-outline"] .wp-element-button:hover {
  background-color: var(--wp--preset--color--primary) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Outline button color variations */
.wp-block-button.is-style-outline
  .wp-block-button__link.has-white-background-color,
.wp-block-button[class*="is-style-outline"]
  .wp-block-button__link.has-white-background-color {
  color: var(--wp--preset--color--primary) !important;
  background-color: white !important;
}

.wp-block-button.is-style-outline
  .wp-block-button__link.has-white-background-color:hover,
.wp-block-button[class*="is-style-outline"]
  .wp-block-button__link.has-white-background-color:hover,
.wp-block-button.is-style-outline
  .wp-element-button.has-white-background-color:hover,
.wp-block-button[class*="is-style-outline"]
  .wp-element-button.has-white-background-color:hover {
  background-color: var(--wp--preset--color--primary) !important;
  color: white !important;
}

.wp-block-button.is-style-outline
  .wp-block-button__link.has-primary-background-color,
.wp-block-button[class*="is-style-outline"]
  .wp-block-button__link.has-primary-background-color,
.wp-block-button.is-style-outline
  .wp-element-button.has-primary-background-color,
.wp-block-button[class*="is-style-outline"]
  .wp-element-button.has-primary-background-color {
  background-color: var(--wp--preset--color--primary) !important;
  color: white !important;
  border-color: var(--wp--preset--color--primary) !important;
}

.wp-block-button.is-style-outline
  .wp-block-button__link.has-primary-background-color:hover,
.wp-block-button[class*="is-style-outline"]
  .wp-block-button__link.has-primary-background-color:hover,
.wp-block-button.is-style-outline
  .wp-element-button.has-primary-background-color:hover,
.wp-block-button[class*="is-style-outline"]
  .wp-element-button.has-primary-background-color:hover {
  background-color: transparent !important;
  color: var(--wp--preset--color--primary) !important;
}

/* ===================================
   LEGACY: Pill Button Styles (on Buttons group)
   TODO: These will be removed once we migrate to using outline style on individual buttons
   =================================== */

/* Pill Button Style - Small, rounded, transparent background */
.wp-block-buttons.is-style-pill .wp-block-button__link,
.wp-block-buttons.is-style-pill .wp-element-button {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 2rem;
  background-color: white;
  border: 2px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
  font-weight: 600;
  transition: all 0.2s ease;
}

.wp-block-buttons.is-style-pill .wp-block-button__link:hover,
.wp-block-buttons.is-style-pill .wp-element-button:hover {
  background-color: var(--wp--preset--color--primary);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Ensure readability: white background = primary text, primary background = white text */
.wp-block-buttons.is-style-pill
  .wp-block-button__link.has-white-background-color,
.wp-block-buttons.is-style-pill .wp-element-button.has-white-background-color {
  color: var(--wp--preset--color--primary);
}

/*TODO: remove important once we found the conflictign style */
.wp-block-buttons.is-style-pill
  .wp-block-button__link.has-white-background-color:hover,
.wp-block-buttons.is-style-pill
  .wp-element-button.has-white-background-color:hover {
  background-color: var(--wp--preset--color--primary) !important;
  color: white;
}

.wp-block-buttons.is-style-pill
  .wp-block-button__link.has-primary-background-color,
.wp-block-buttons.is-style-pill
  .wp-element-button.has-primary-background-color {
  color: white;
}

.wp-block-buttons.is-style-pill
  .wp-block-button__link.has-primary-background-color:hover,
.wp-block-buttons.is-style-pill
  .wp-element-button.has-primary-background-color:hover {
  background-color: transparent;
  color: var(--wp--preset--color--primary);
}

/* Maintain proper spacing between pill buttons */
.wp-block-buttons.is-style-pill {
  gap: 0.5rem;
}

/* Pill + Space Evenly combined style */
.wp-block-buttons.is-style-pill-space-evenly .wp-block-button__link,
.wp-block-buttons.is-style-pill-space-evenly .wp-element-button {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 2rem;
  background-color: white;
  border: 2px solid var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
  font-weight: 600;
  transition: all 0.2s ease;
}

.wp-block-buttons.is-style-pill-space-evenly .wp-block-button__link:hover,
.wp-block-buttons.is-style-pill-space-evenly .wp-element-button:hover {
  background-color: var(--wp--preset--color--primary);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.wp-block-buttons.is-style-pill-space-evenly
  .wp-block-button__link.has-white-background-color,
.wp-block-buttons.is-style-pill-space-evenly
  .wp-element-button.has-white-background-color {
  color: var(--wp--preset--color--primary);
}

.wp-block-buttons.is-style-pill-space-evenly
  .wp-block-button__link.has-white-background-color:hover,
.wp-block-buttons.is-style-pill-space-evenly
  .wp-element-button.has-white-background-color:hover {
  background-color: var(--wp--preset--color--primary);
  color: white;
}

.wp-block-buttons.is-style-pill-space-evenly
  .wp-block-button__link.has-primary-background-color,
.wp-block-buttons.is-style-pill-space-evenly
  .wp-element-button.has-primary-background-color {
  color: white;
}

.wp-block-buttons.is-style-pill-space-evenly
  .wp-block-button__link.has-primary-background-color:hover,
.wp-block-buttons.is-style-pill-space-evenly
  .wp-element-button.has-primary-background-color:hover {
  background-color: transparent;
  color: var(--wp--preset--color--primary);
}

.wp-block-buttons.is-style-pill-space-evenly {
  gap: 0.5rem;
  justify-content: space-evenly;
}

/* Space Evenly layout only */
.wp-block-buttons.is-style-space-evenly {
  justify-content: space-evenly;
}

/**
 * Single Post Layout
 * Featured image floats in top right corner with text flowing around it
 */

.single-post-wrapper {
  position: relative;
}

.single-post-wrapper .wp-block-post-title {
  margin: 2rem auto 0 !important;
  color: var(--wp--preset--color--primary, #1f4b75);
  clear: both;
}

.single-post-wrapper .single-post-date,
.single-post-wrapper .wp-block-post-date {
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  color: var(--wp--preset--color--medium, #666666);
  margin-bottom: 2rem;
  display: block;
}

.single-post-content-wrapper {
  overflow: visible !important;
  clear: none !important;
}

.single-post-wrapper .single-post-featured-image,
.single-post-wrapper .wp-block-post-featured-image {
  float: right;
  max-width: 50%;
  width: auto;
  margin: 0 0 1.5rem 2rem;
  shape-outside: margin-box;
  shape-margin: 1rem;
  clear: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  border-radius: 1rem;
}

.single-post-wrapper .single-post-featured-image img,
.single-post-wrapper .wp-block-post-featured-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.single-post-wrapper .single-post-content,
.single-post-wrapper .wp-block-post-content {
  clear: none !important;
  overflow: visible !important;
  display: block !important;
}

.single-post-wrapper .single-post-content > *:first-child,
.single-post-wrapper .wp-block-post-content > *:first-child {
  margin-top: 0;
}

/* Ensure paragraph text flows around the image */
.single-post-wrapper .single-post-content p,
.single-post-wrapper .wp-block-post-content p {
  clear: none;
}

.news-grid .news-grid-container {
  scrollbar-color: var(--wp--preset--color--primary) white; /* Firefox */
}

/* WebKit browsers (Chrome, Safari, Edge) */
.news-grid .news-grid-container::-webkit-scrollbar-thumb {
  background: var(--wp--preset--color--primary);
}

.news-grid .news-grid-container::-webkit-scrollbar-track {
  background: white;
}

.has-primary-background-color > .news-grid .news-grid-container {
  scrollbar-color: white var(--wp--preset--color--primary); /* Firefox */
}

/* WebKit browsers (Chrome, Safari, Edge) */
.has-primary-background-color
  > .news-grid
  .news-grid-container::-webkit-scrollbar-thumb {
  background: white;
}

.has-primary-background-color
  > .news-grid
  .news-grid-container::-webkit-scrollbar-track {
  background: var(--wp--preset--color--primary);
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
  .single-post-wrapper .single-post-featured-image,
  .single-post-wrapper .wp-block-post-featured-image {
    float: none;
    max-width: 100%;
    width: 100%;
    margin: 0 0 1.5rem 0;
    shape-outside: none;
  }

  .single-post-wrapper .single-post-featured-image img,
  .single-post-wrapper .wp-block-post-featured-image img {
    max-height: 400px;
    margin: 0 auto;
  }
}

/* Tablet: Reduce max width slightly */
@media (min-width: 769px) and (max-width: 1024px) {
  .single-post-wrapper .single-post-featured-image,
  .single-post-wrapper .wp-block-post-featured-image {
    max-width: 45%;
  }

  .single-post-wrapper .single-post-featured-image img,
  .single-post-wrapper .wp-block-post-featured-image img {
    max-height: 450px;
  }
}

/**
 * Related Posts Section (on single post pages)
 */

.single-post-wrapper .related-posts-separator {
  margin: 4rem 0 2rem;
  border: none;
  border-top: 2px solid var(--wp--preset--color--border, #e0e0e0);
  height: 0;
  clear: both;
}

.single-post-wrapper .related-posts-heading {
  font-size: var(--wp--preset--font-size--x-large, 1.5rem);
  color: var(--wp--preset--color--primary, #1f4b75);
  margin-bottom: 2rem;
  font-weight: 600;
  text-align: left;
}

/* Ensure news block displays properly in single post context */
.single-post-wrapper .news-grid {
  margin-bottom: 3rem;
}