/*
Theme Name: Quantum
Theme URI: https://tecology.co
Author: Tecology
Author URI: https://tecology.co/who-we-are/
Description: The Quantum theme is an enterprise-grade Full Site Editing (FSE) WordPress theme, designed for organisations that demand exceptional standards in accessibility, security, and data compliance. With a professional aesthetic and advanced customisation capabilities, Quantum helps you deliver a modern, inclusive, and regulation-ready website.
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.1
Version: 5.8.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tecology-fse-2024
Tags: One Column, Custom Colours, custom-menu, Custom Logo, Editor Style, Featured Images, Site Editor, Block Editor Patterns, rtl-language-support, Sticky Post, threaded-comments, translation-ready, Wide Blocks, Block Editor Styles, Style Variations, Accessibility Ready, Blog, Portfolio, News

/**
 * CSS File Organization
 * 
 * This stylesheet is organized into the following sections:
 * 
 * 1. Global Styling
 *    - Core HTML element styles
 *    - Accessibility enhancements
 *    - Block editor base styles
 * 
 * 2. Media Queries
 *    - Responsive adjustments for core theme elements
 *    - Mobile-specific overrides
 * 
 * 3. Form Standardization
 *    - Form element styling
 *    - Input field standardization
 *    - WordPress comment form adjustments
 * 
 * 4. Theme-Specific Styles
 *    - Styles that can't be handled via theme.json
 *    - Block editor customizations
 * 
 * 5. Dark Mode
 *    - Dark mode color palette
 *    - Dark mode specific overrides
 */

/********** 1. Global Styling **********/

/**
 * Core HTML and Accessibility Styles
 * These styles ensure proper rendering and accessibility across all devices
 */

/* Enable smooth scrolling with proper header offset */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height-desktop);
}

/* Accessibility: Focus styling with specific block editor exclusions */
:where(.wp-site-blocks *:focus-visible):not(
    .wp-block-navigation__container
  ):not(.wp-block-navigation__responsive-container):not(
    .wp-block-navigation__submenu-container
  ):not(.wp-block-navigation__responsive-close):not(.select2-container):not(
    .select2-selection
  ):not(.select2-selection__rendered) {
  outline: 2px solid var(--wp--preset--color--accent) !important;
  outline-offset: 2px !important;
}

/**
 * Block Editor Element Adjustments
 * Fixes and enhancements for core block editor elements
 */

/* Search block reveal button spacing fix */
.wp-block-search.wp-block-search__button-only
  .wp-block-search__button[aria-expanded='true'] {
  margin-left: 10px;
}

/* Author box font size standardization */
.wp-block-post-author__byline {
  font-size: 0.7em !important;
}

/* Lightbox container z-index hierarchy fix */
.wp-lightbox-container button {
  z-index: 1 !important;
}

/* Button transition effects */
.wp-block-button__link,
.wp-element-button {
  transition: all 0.3s ease-in-out;
}

/* Blockquote margin reset */
blockquote {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: var(--wp--preset--spacing--10);
  margin-bottom: var(--wp--preset--spacing--10);
}

/* JetSmartFilters facet z-index fix */
.wp-container-5 {
  z-index: 30;
}

/********** Remove Jet Container Padding **********/

.jet-container {
  padding: 0px !important;
}

/********** 2. Media Queries **********/

/**
 * Mobile-Specific Adjustments
 * Styles that only apply to mobile devices
 */
@media (max-width: 767px) {
  /* Reset scroll padding for mobile */
  html {
    scroll-padding-top: 0px !important;
  }
}

/********** 3. Form Standardization **********/

/**
 * Form Element Base Styles
 * Standardizes form elements across the theme
 */
button,
textarea,
select {
  font: inherit;
}

/* Remove default WebKit appearance */
input[type='button'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='submit'],
input[type='text'],
textarea {
  appearance: none;
  -webkit-appearance: none;
}

/* Search block width constraint */
.wp-block-search {
  max-width: 100%;
}

/**
 * Input Field Styling
 * Consistent styling for all input fields
 */
input:not([type='submit']),
select,
textarea,
.wp-block-post-comments-form input:not([type='submit']):not([type='checkbox']),
.wp-block-post-comments-form textarea {
  color: var(--wp--preset--color--contrast);
  border-radius: 0.25rem;
  background-color: var(--wp--preset--color--base);
  border: solid 1px var(--wp--preset--color--borderline);
  padding: 0.375rem 0.75rem;
  font-size: var(--wp--preset--font-size--small);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Search button icon padding */
.wp-block-search__button.has-icon {
  padding-left: 0.9em;
  padding-right: 0.9em;
}

/* Focus state styling */
input:not([type='submit']):not([type='checkbox']):not(
    [type='radio']
  ):focus-visible,
textarea:focus-visible {
  color: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--accent);
  outline: 0;
  box-shadow: 0.35rem 0.35rem 0.35rem 0.25rem rgba(currentColor, 0.371);
}

/* Specific styling for telephone and URL inputs */
input[type='tel'],
input[type='url'] {
  width: 100%;
  color: var(--wp--preset--color--contrast);
  background-color: var(--wp--preset--color--base);
  border: solid 1px var(--wp--preset--color--borderline);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type='tel']:focus,
input[type='url']:focus {
  color: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--accent);
  outline: 0;
  box-shadow: 0 0 0 0.25rem
    rgba(var(--wp--preset--color--accent-rgb, 0, 123, 255), 0.25);
}

input[type='tel']:hover,
input[type='url']:hover {
  border-color: var(--wp--preset--color--accent-2, #0056b3);
}

/* Checkbox and radio button width reset */
input[type='checkbox'],
input[type='image'],
input[type='radio'] {
  width: auto;
}

/* Label standardization */
label {
  width: 100%;
  display: block;
}

/* Placeholder text styling */
::placeholder {
  color: var(--wp--preset--color--contrast-2);
  font-size: var(--wp--preset--font-size--medium);
  opacity: 0.75;
}

/********** 4. Dark Mode **********/

/**
 * Dark Mode Color Variables
 * Defines the color palette for dark mode
 */
.theme-dark body,
body.theme-dark {
  /* Base colors */
  --wp--preset--color--base: var(--wp-preset-dark--base, #000000);
  --wp--preset--color--base-2: var(--wp-preset-dark--base-2, #1d2226);
  --wp--preset--color--base-3: var(--wp-preset-dark--base-3, #34393c);

  /* Contrast colors */
  --wp--preset--color--contrast: var(--wp-preset-dark--contrast, #ffffff);
  --wp--preset--color--contrast-2: var(--wp-preset-dark--contrast-2, #d7d7d7);
  --wp--preset--color--contrast-3: var(--wp-preset-dark--contrast-3, #ababab);

  /* Accent colors */
  --wp--preset--color--accent: var(--wp-preset-dark--accent, #0066ff);
  --wp--preset--color--accent-2: var(--wp-preset-dark--accent-2, #6862e5);
  --wp--preset--color--accent-3: var(--wp-preset-dark--accent-3, #ff3b5f);

  /* Border color */
  --wp--preset--color--borderline: var(--wp-preset-dark--borderline, #39424a);
}

/* Hide dark mode toggle when feature is disabled */
body:not(.dark-mode-enabled) .wp-block-tecology-dark-mode-toggle {
  display: none !important;
}

/* Jet popup - define container max height */
.jet-popup--front-mode .jet-popup__container {
  max-height: 80% !important;
  margin: var(--wp--preset--spacing--10) !important;
}

/* CSS View transtions API  - this needs to sit on its own!*/

@view-transition {
  navigation: auto;
}

/********** Wordpress 6.8 Fix **********/

.wp-block-button__link {
  height: initial;
  width: initial;
}

/********** Styling for JE Dynamic Link **********/

.jet-listing-dynamic-link__link {
  transition: all 0.3s ease-in-out;
}