/*
Theme Name: WP Zurimed
Theme URI: https://collumino.com
Author: Collumino GmbH
Author URI: https://collumino.com
Description: Custom block theme for Zurimed with dynamic Gutenberg blocks
Version: 1.2.8
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 Status
 * 
 * CURRENT STATE (2026-04-21):
 * - WordPress default "outline" button style overridden to match pill design in content areas
 * - Footer has dedicated button styles that work on dark backgrounds
 * - Legacy pill styles still registered on button groups (core/buttons) for backward compatibility
 * - Button styles are now properly scoped to prevent conflicts:
 *   * Content area outline buttons: :not(footer) selector
 *   * Footer outline buttons: footer-specific styles with higher specificity
 *   * Proper CSS cascade through dependency management (footer.css depends on style.css)
 * 
 * IMPROVEMENTS COMPLETED:
 * - Removed !important overrides (no longer needed with proper scoping)
 * - Footer button styles no longer conflict with content area styles
 * - Consistent styling across all page types (including rep-portal custom template)
 * - Proper CSS loading order through wp_enqueue_style dependencies
 * 
 * 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
 */

/* Global button styles - default min-width for better UX */
.wp-element-button {
  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
   Scoped to NOT apply in footer (footer has its own styles)
   =================================== */
:not(footer) .wp-block-button.is-style-outline .wp-block-button__link,
:not(footer) .wp-block-button[class*="is-style-outline"] .wp-block-button__link,
:not(footer) .wp-block-button.is-style-outline .wp-element-button,
:not(footer) .wp-block-button[class*="is-style-outline"] .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;
}

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

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

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

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

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

/* ===================================
   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;
  }
}

/**
 * Responsive Typography
 * Reduce large font sizes on mobile for better readability
 */
@media (max-width: 768px) {
  .has-xxx-large-font-size {
    font-size: 2rem !important;
  }

  .has-xx-large-font-size {
    font-size: 1.5rem !important;
  }

  .has-x-large-font-size {
    font-size: 1.25rem !important;
  }
}

@media (max-width: 480px) {
  .has-xxx-large-font-size {
    font-size: 1.75rem !important;
  }

  .has-xx-large-font-size {
    font-size: 1.375rem !important;
  }
}

/**
 * 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;
}

body.single-post main {
  padding: 0 2rem;
}

/* ==========================================================================
   Plugin Customizations
   ========================================================================== */

/**
 * Fluent Forms - Override primary color
 * Uses theme's primary color for form elements
 */
:root {
  --fluentform-primary: var(--wp--preset--color--primary, #1f4b75) !important;
}

/* Target Fluent Forms container specifically for higher specificity */
.fluentform,
.ff-el-form-control {
  --fluentform-primary: var(--wp--preset--color--primary, #1f4b75) !important;
}