/*
Theme Name: PR Lounas
Theme URI:
Author: Räikee Oy
Author URI: https://raikee.fi
Description: A modern agency starter theme built with block editor patterns and theme.json.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agency-base
Tags: block-patterns, block-styles, full-site-editing, wide-blocks
*/

/* ==========================================================================
   Layer Declarations
   ========================================================================== */

/*
   Cascade layers ensure predictable specificity. Layers are applied in order:

   1. reset — Browser resets + box-sizing normalization (in this file)
   2. base — Global element defaults (in this file)
   3. tokens — Design system tokens via CSS custom properties (in this file)
   4. header — Header/navigation component styles (see theme/inc/header.css)
   5. components — Reusable component styles (see theme/inc/blocks.css)
   6. utilities — Helper & utility classes (in this file)
   7. overrides — High-specificity fixes (see theme/inc/overrides.css or theme.json)

   Note: Only reset, base, tokens, and utilities are in this file.
   Component-specific CSS is in separate modular files under theme/inc/.
*/

@layer reset, base, tokens, header, patterns, components, utilities, overrides;

/* ==========================================================================
   Reset
   ========================================================================== */

@layer reset {

  /* 1. Use a more-intuitive box-sizing model + 2. Remove default margin */
  * {
    box-sizing: border-box;

    &::before,
    &::after {
      box-sizing: border-box;
    }

    &:not(dialog) {
      margin: 0;
    }
  }

  /* 3. Enable keyword animations + 4. Accessible line-height + 5. Text rendering */
  html {
    @media (prefers-reduced-motion: no-preference) {
      interpolate-size: allow-keywords;
    }
  }

  body {
    line-height: var(--wp--custom--line-height--normal, 1.5);
    -webkit-font-smoothing: antialiased;
  }

  /* 6. Improve media defaults */
  :is(img, picture, video, canvas, svg) {
    display: block;
    max-inline-size: 100%;
  }

  /* 7. Inherit fonts for form controls */
  :is(input, button, textarea, select) {
    font: inherit;
  }

  /* 8. Avoid text overflows + 9. Improve line wrapping */
  :is(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }

  :is(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
  }

  /* 10. Create a root stacking context */
  :is(#root, #__next) {
    isolation: isolate;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

@layer base {
  :where(a) {
    color: inherit;
  }

  :where(.wp-block-image img) {
    border-radius: var(--wp--preset--border--radius--medium, 0.5rem);
  }

  :where(ul, ol) {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Skip link — visible on focus only */
  .skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    z-index: var(--wp--custom--z-index--toast, 400);
    padding-block: 0.5em;
    padding-inline: 1em;
    background: var(--wp--preset--color--contrast, #0f172a);
    color: var(--wp--preset--color--base, #fff);
    text-decoration: none;
    font-weight: 700;

    &:focus {
      inset-inline-start: 0;
      inset-block-start: 0;
    }
  }
}

/* ==========================================================================
   Tokens — Derived colors & semantic aliases via CSS Relative Colors (RCS)
   All values here are derived from theme.json palette entries using oklch()
   relative color syntax. Swapping hex values in theme.json auto-propagates.
   ========================================================================== */

/*
   QUICK REFERENCE — CSS Custom Properties (All Sources)
   ================================================

   COLOR PALETTE (from theme.json)
   —— Preset colors (use in blocks):
   --wp--preset--color--{primary, accent, secondary, base, contrast, subtle, muted}

   —— Derived states (hover, active, subtle, alpha scales):
   --color-{primary,accent,secondary}-hover           (lighten +15%)
   --color-{primary,accent,secondary}-active          (darken -15%)
   --color-{primary,accent}-subtle                    (light tint, 50% alpha)
   --color-{primary,accent,base,contrast}-alpha-{10,20,50,80}  (transparency scales)

   —— Status colors (contextual messages):
   --color-{success,warning,error,info}              (main color)
   --color-{success,warning,error,info}-subtle       (light variant)

   SEMANTIC SURFACES
   --color-surface                 (card backgrounds)
   --color-surface-raised          (slightly elevated)
   --color-surface-overlay         (semi-transparent overlay)
   --color-surface-sunken          (indented area)
   --color-surface-scrim           (semi-transparent dark layer)

   BORDERS & FOCUS
   --color-border                  (subtle dividers)
   --color-border-strong           (prominent dividers)
   --color-border-interactive      (interactive elements)
   --focus-ring                    (2px solid primary color)
   --focus-ring-offset             (2px)

   Z-INDEX (from theme.json — keep minimal)
   --wp--custom--z-index--sticky   (200 — header)
   --wp--custom--z-index--dropdown (300 — menus)
   --wp--custom--z-index--overlay  (250 — overlays)
   --wp--custom--z-index--modal    (300 — modals)
   --wp--custom--z-index--toast    (400 — notifications)

   TRANSITIONS (from theme.json — use timing + easing separately for flexibility)
   --wp--custom--transition--fast  (150ms ease — shorthand, use for simple transitions)
   --wp--custom--transition--normal (300ms ease — shorthand, use for simple transitions)
   --wp--custom--transition--slow  (500ms ease — shorthand, use for simple transitions)

   TIMING (compose with easing for complex multi-property transitions)
   --wp--custom--timing--fast      (150ms)
   --wp--custom--timing--normal    (300ms)
   --wp--custom--timing--slow      (500ms)

   EASING (use with timing for granular control)
   --wp--custom--easing--standard  (ease — standard, smooth)
   --wp--custom--easing--in        (ease-in — slow start)
   --wp--custom--easing--out       (ease-out — slow end)
   --wp--custom--easing--inOut     (cubic-bezier custom — smooth both ends)

   TYPOGRAPHY (from theme.json)
   --wp--preset--font-family--{heading, body}
   --wp--preset--font-size--{small, medium, large, x-large, 2x-large, 3x-large, 4x-large}
   --wp--custom--line-height--{tight, normal, relaxed}
   --wp--custom--letter-spacing--{tight, normal, wide}

   SPACING (from theme.json, increments 10–100)
   --wp--preset--spacing--{10, 20, 30, 40, 50, 60, 70, 80, 90, 100}

   SHADOWS (from theme.json)
   --wp--preset--shadow--{sm, md, lg, xl, inner}

   BORDER RADIUS (from theme.json)
   --wp--preset--border--radius--{small, medium, large, full}

   LAYOUT (from theme.json)
   --wp--style--global--content-size  (800px — main content width)
   --wp--style--global--wide-size     (1200px — wide section width)

   Note: WordPress preset variables are auto-generated from theme.json.
   Custom theme variables (--wp--custom--*) are defined in theme.json settings.custom.
*/

@layer tokens {
  :root {
    /* Fallback Font Sizes (in case theme.json fails) */
    --wp--preset--font-size--small: 0.875rem;
    --wp--preset--font-size--medium: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
    --wp--preset--font-size--large: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem);
    --wp--preset--font-size--x-large: clamp(1.5rem, 1.25rem + 1vw, 1.75rem);
    --wp--preset--font-size--xx-large: clamp(1.75rem, 1.5rem + 1.5vw, 2.25rem);
    --wp--preset--font-size--3x-large: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --wp--preset--font-size--4x-large: clamp(2.5rem, 1rem + 5vw, 4.5rem);

    /* ----- Primary: hover / active / subtle ----- */
    --color-primary-hover: oklch(from var(--wp--preset--color--primary) calc(l + 0.15) c h);
    --color-primary-active: oklch(from var(--wp--preset--color--primary) calc(l - 0.15) c h);
    --color-primary-subtle: oklch(from var(--wp--preset--color--primary) calc(l + 0.45) c h / 0.5);

    /* ----- Accent: hover / active / subtle ----- */
    --color-accent-hover: oklch(from var(--wp--preset--color--accent) calc(l + 0.15) c h);
    --color-accent-active: oklch(from var(--wp--preset--color--accent) calc(l - 0.15) c h);
    --color-accent-subtle: oklch(from var(--wp--preset--color--accent) calc(l + 0.45) c h / 0.5);

    /* ----- Secondary: hover ----- */
    --color-secondary-hover: oklch(from var(--wp--preset--color--secondary) calc(l + 0.15) c h);

    /* ----- Primary: transparency scale ----- */
    --color-primary-alpha-10: oklch(from var(--wp--preset--color--primary) l c h / 0.1);
    --color-primary-alpha-20: oklch(from var(--wp--preset--color--primary) l c h / 0.2);
    --color-primary-alpha-50: oklch(from var(--wp--preset--color--primary) l c h / 0.5);

    /* ----- Accent: transparency scale ----- */
    --color-accent-alpha-10: oklch(from var(--wp--preset--color--accent) l c h / 0.1);
    --color-accent-alpha-20: oklch(from var(--wp--preset--color--accent) l c h / 0.2);
    --color-accent-alpha-50: oklch(from var(--wp--preset--color--accent) l c h / 0.5);

    /* ----- Contrast: transparency scale (overlays, borders, scrims) ----- */
    --color-contrast-alpha-5: oklch(from var(--wp--preset--color--contrast) l c h / 0.05);
    --color-contrast-alpha-10: oklch(from var(--wp--preset--color--contrast) l c h / 0.1);
    --color-contrast-alpha-20: oklch(from var(--wp--preset--color--contrast) l c h / 0.2);
    --color-contrast-alpha-50: oklch(from var(--wp--preset--color--contrast) l c h / 0.5);
    --color-contrast-alpha-80: oklch(from var(--wp--preset--color--contrast) l c h / 0.8);

    /* ----- Base: transparency scale (light overlays on dark bgs) ----- */
    --color-base-alpha-10: oklch(from var(--wp--preset--color--base) l c h / 0.1);
    --color-base-alpha-20: oklch(from var(--wp--preset--color--base) l c h / 0.2);
    --color-base-alpha-50: oklch(from var(--wp--preset--color--base) l c h / 0.5);

    /* ----- Semantic: surfaces ----- */
    --color-surface: var(--wp--preset--color--base);
    --color-surface-raised: var(--wp--preset--color--subtle);
    --color-surface-overlay: oklch(from var(--wp--preset--color--contrast) calc(l - 0.02) c h / 0.97);
    --color-surface-sunken: oklch(from var(--wp--preset--color--contrast) calc(l - 0.04) c h / 0.94);
    --color-surface-scrim: var(--color-contrast-alpha-50);

    /* ----- Semantic: borders ----- */
    --color-border: var(--color-contrast-alpha-10);
    --color-border-strong: var(--color-contrast-alpha-20);
    --color-border-interactive: var(--wp--preset--color--primary);
    --color-border-focus: var(--wp--preset--color--primary);

    /* ----- Semantic: focus ring ----- */
    --color-focus-ring: var(--wp--preset--color--primary);
    --focus-ring: 2px solid var(--color-focus-ring);
    --focus-ring-offset: 2px;

    /* ----- Status: hex fallbacks (overridden to OKLCH below) ----- */
    --color-success: #16a34a;
    --color-warning: #ca8a04;
    --color-error: #dc2626;
    --color-info: #2563eb;
  }

  /* OKLCH enhancement for status colors + derive subtle variants via relative colors */
  @supports (color: oklch(0% 0 0)) {
    :root {
      --color-success: oklch(55% 0.18 150);
      --color-success-subtle: oklch(from var(--color-success) calc(l + 0.42) c h);
      --color-warning: oklch(70% 0.16 85);
      --color-warning-subtle: oklch(from var(--color-warning) calc(l + 0.27) c h);
      --color-error: oklch(55% 0.22 28);
      --color-error-subtle: oklch(from var(--color-error) calc(l + 0.42) c h);
      --color-info: oklch(55% 0.2 260);
      --color-info-subtle: oklch(from var(--color-info) calc(l + 0.42) c h);
    }
  }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

@layer utilities {

  /* Visually hidden but accessible to screen readers */
  .screen-reader-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Text color utilities mapped to token scale */
  .has-muted-text {
    color: var(--wp--preset--color--muted, #64748b);
  }

  .has-success-text {
    color: var(--color-success, #16a34a);
  }

  .has-warning-text {
    color: var(--color-warning, #ca8a04);
  }

  .has-error-text {
    color: var(--color-error, #dc2626);
  }

  /* Raised surface with shadow */
  .has-raised-surface {
    background: var(--color-surface, #fff);
    box-shadow: var(--wp--preset--shadow--md);
    border-radius: var(--wp--preset--border--radius--medium, 0.5rem);
  }
}

/* ==========================================================================
   Keyframes — Outside @layer so they're globally accessible
   ========================================================================== */

@keyframes clipPathCircleOpen {
  0% {
    clip-path: circle(0% at top right);
  }

  100% {
    clip-path: circle(250% at top right);
  }
}

@keyframes clipPathCircleClose {
  0% {
    clip-path: circle(250% at top right);
  }

  100% {
    clip-path: circle(0% at top right);
  }
}

/* ==========================================================================
   Patterns
   ========================================================================== */

@layer patterns {

  /* Hero Section */
  .is-style-hero-section {
    padding-block: var(--wp--preset--spacing--80);
    background-color: var(--wp--preset--color--subtle);
  }

  .hero-grid {
    align-items: center;
    gap: var(--wp--preset--spacing--50);
  }

  .hero-image-placeholder {
    aspect-ratio: 4 / 3;
    background-color: var(--wp--preset--color--accent);
    border-radius: var(--wp--preset--border--radius--large, 1rem);
    width: 100%;
  }

  /* Features Grid */
  .is-style-features-grid-section {
    position: relative;
    padding-block: var(--wp--preset--spacing--60);
    overflow: visible;
  }

  .features-grid-columns {
    gap: var(--wp--preset--spacing--50);
  }

  .is-style-feature-column {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30);
  }

  .feature-image-placeholder {
    aspect-ratio: 16 / 9;
    background-color: var(--wp--preset--color--primary);
    border-radius: var(--wp--preset--border--radius--medium, 0.5rem);
    margin-block-end: var(--wp--preset--spacing--30);
  }

  .menu-embed-placeholder {
    padding: var(--wp--preset--spacing--40);
    background-color: var(--wp--preset--color--base);
    border: 1px dashed var(--wp--preset--color--muted);
    border-radius: var(--wp--preset--border--radius--medium, 0.5rem);
    text-align: center;
  }

  /* Generic Section */
  .is-style-section {
    position: relative;
    padding-block: var(--wp--preset--spacing--60);
    overflow: visible;
  }

  .is-style-section.has-background {
    padding-inline: var(--wp--preset--spacing--50);
  }

  /* Contact List */
  .is-style-contact-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
  }

  /* Form Placeholder */
  .is-style-form-placeholder {
    padding: var(--wp--preset--spacing--50);
    border-radius: var(--wp--preset--border--radius--medium, 0.5rem);
  }

  /* Hero Covers */
  .wp-block-cover.is-style-hero-cover {
    min-height: 100vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--wp--preset--spacing--80) !important;
  }

  .wp-block-cover.is-style-hero-page {
    min-height: 70vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--wp--preset--spacing--80) !important;
  }

  .wp-block-cover.is-style-hero-cover .wp-block-cover__inner-container,
  .wp-block-cover.is-style-hero-page .wp-block-cover__inner-container {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1200px);
    padding-inline: var(--wp--preset--spacing--50);
  }

  /* ---- Decorative Leaves ---- */

  /* Dark leaf: bottom-right of hero covers */
  .wp-block-cover.is-style-hero-cover::after,
  .wp-block-cover.is-style-hero-page::after {
    content: "";
    position: absolute;
    bottom: -80px;
    right: 3%;
    width: 130px;
    height: 210px;
    background: url("assets/images/lehti-1.png") no-repeat center / contain;
    pointer-events: none;
    z-index: 10;
    opacity: 0.55;
  }

  /* Light leaf: top-left of footer */
  footer.wp-block-group {
    position: relative;
    overflow: visible;
  }

  footer.wp-block-group::before {
    content: "";
    position: absolute;
    top: -70px;
    left: 3%;
    width: 110px;
    height: 180px;
    background: url("assets/images/lehti-2.png") no-repeat center / contain;
    pointer-events: none;
    z-index: 10;
    opacity: 0.45;
    transform: scaleX(-1);
  }

  /* Scale down leaves on small screens */
  @media (max-width: 768px) {

    .wp-block-cover.is-style-hero-cover::after,
    .wp-block-cover.is-style-hero-page::after {
      width: 55px;
      height: 90px;
      bottom: -35px;
      opacity: 0.35;
    }

    footer.wp-block-group::before {
      width: 50px;
      height: 80px;
      top: -30px;
      opacity: 0.3;
    }
  }
}

/* ==========================================================================
   Overrides
   ========================================================================== */

@layer overrides {

  /* Fixed Header */
  header.wp-block-template-part {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    z-index: var(--wp--custom--z-index--sticky, 200);
    background-color: var(--wp--preset--color--base);
    border-bottom: 1px solid var(--wp--preset--color--subtle);
  }

  /* Admin bar fix */
  body.admin-bar header.wp-block-template-part {
    top: 32px;
  }

  @media screen and (max-width: 782px) {
    body.admin-bar header.wp-block-template-part {
      top: 46px;
    }
  }

  body {
    padding-top: var(--wp--preset--spacing--70);
  }

  main>*:first-child {
    margin-top: 0 !important;
  }

  main {
    margin-bottom: var(--wp--preset--spacing--80) !important;
  }

  /* Contact Form 7 Improvements */
  .wpcf7-form-control:not(.wpcf7-submit) {
	padding: 6px 10px 6px 10px !important;
    /* padding: var(--wp--preset--spacing--40) !important; */
    font-size: 16px !important;
	/* font-size: var(--wp--preset--font-size--medium) !important; */
    border: 2px solid var(--wp--preset--color--muted) !important;
    border-radius: var(--wp--preset--border--radius--medium, 0.5rem) !important;
    width: 100%;
    /* min-height: 3rem; */
	background-color: var(--wp--preset--color--base) !important;
  }

  .wpcf7-form-control:not(.wpcf7-submit):focus {
    border-color: var(--wp--preset--color--primary) !important;
    outline: 0px solid var(--wp--preset--color--primary) !important;
    outline-offset: 0px;
  }

  .wpcf7-submit {
    padding-block: var(--wp--preset--spacing--30) !important;
    padding-inline: var(--wp--preset--spacing--50) !important;
    font-size: var(--wp--preset--font-size--medium) !important;
    font-weight: 700 !important;
    border-radius: var(--wp--preset--border--radius--medium, 0.5rem) !important;
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--base) !important;
    border: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
	margin-top: 10px;
  }

  .wpcf7-submit:hover,
  .wpcf7-submit:focus {
    background-color: var(--wp--preset--color--contrast) !important;
  }
	
  .wpcf7-textarea {
	height: 100px !important;
  }
	
  .wpcf7-checkbox, .wpcf7-radio {
	display: block !important;
	background-color: var(--wp--preset--color--base) !important;
  }
	
  
}

/* ==========================================================================
   Typography Enforcements
   ========================================================================== */

@layer base {

  h1,
  .h1 {
    font-size: var(--wp--preset--font-size--4x-large) !important;
    line-height: 1.1;
  }

  h2,
  .h2 {
    font-size: var(--wp--preset--font-size--3x-large) !important;
    line-height: 1.2;
  }

  h3,
  .h3 {
    font-size: var(--wp--preset--font-size--xx-large) !important;
    line-height: 1.3;
  }

  h4,
  .h4 {
    font-size: var(--wp--preset--font-size--x-large) !important;
  }

  h5,
  .h5 {
    font-size: var(--wp--preset--font-size--large) !important;
  }

  h6,
  .h6 {
    font-size: var(--wp--preset--font-size--medium) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* ==========================================================================
   Salasanasuojattu sivu
   ========================================================================== */

@layer base {
	.post-password-form {
		margin: 50px 0 50px 0 !important;
	}
}