/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: yrk-theme
 * Domain Path: /languages
 */


/** @media breakpoints (grouped at the end of files)
 * 
 * (max-width: Npx) applies to screen widths <= Npx
 *
 * This website is designed primarily for desktop layout
 *   Base styles: Desktop (large screens)
 *
 * Tablet landscape (and less) 
 *   @media (max-width: 1100px): Adjust layout for medium screens and reduce columns
 *
 * Tablet portrait and mobile landscape (and less)
 *   @media (max-width: 768px): Switch to single-column layout and simplify components
 *
 * Smartphones portrait(and less) 
 *   @media (max-width: 640px): Optimize spacing, font sizes, and navigation for mobile
 *
 * Small devices (older or compact phones)
 *   Not supported
 *
 */



/* =========================================================
   SHARED TOKENS
   Common variables used by Gallery, Detail and Home
   ========================================================= */

:root {
  
  --yrk-clr-text: var(--theme-palette-color-3);
  --yrk-clr-text-strong: var(--theme-palette-color-4);
  --yrk-clr-text-good: #437a22;
  --yrk-clr-text-warn: #da7a00;
  --yrk-clr-text-bad:  #7a0000;

  --yrk-clr-border: color-mix(in srgb, var(--theme-palette-color-3) 18%, transparent);
  --yrk-clr-border-strong: color-mix(in srgb, var(--theme-palette-color-3) 28%, transparent);
  --yrk-border-radius: 12px;

  --yrk-clr-strike-border: color-mix(in srgb, var(--theme-palette-color-1) 24%, var(--theme-palette-color-3) 16%);
  --yrk-clr-strike-border-strong: color-mix(in srgb, var(--theme-palette-color-1) 34%, var(--theme-palette-color-3) 16%);

  --yrk-clr-background: var(--theme-palette-color-5);
  --yrk-clr-surface-1: color-mix(in srgb, var(--yrk-clr-background) 65%,white 35%);
  --yrk-clr-surface-2: color-mix(in srgb, var(--yrk-clr-surface-1) 65%,white 35%);
  --yrk-clr-surface-3: color-mix(in srgb, var(--yrk-clr-surface-2) 65%,white 35%);
  --yrk-clr-hover: color-mix(in srgb, var(--theme-palette-color-1) 10%, transparent);


  --yrk-shadow-highlight: rgb(255 255 255 / 68%);
  --yrk-shadow-dark: rgb(0 0 0 / 8%);
  --yrk-shadow-soft: inset 0 1px 0 var(--yrk-shadow-highlight), 0 1px 2px var(--yrk-shadow-dark);


  --yrk-transition-fast: .15s ease;
  --yrk-transition-norm: .2s ease;
  --yrk-transition-slow: .35s ease;
}


.yrk-section-border {
  border: 1px solid var(--yrk-clr-border);
  border-radius: var(--yrk-border-radius);
  background: transparent;
  overflow: hidden;
}