/*
Theme Name: ClayNews Pro
Theme URI: https://example.com/claynews-pro
Author: ClayNews Studio
Author URI: https://example.com
Description: Premium editorial WordPress theme with a warm claymorphism interface for news and magazine publishers.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: claynews-pro
Tags: news, magazine, blog, accessibility-ready, custom-logo, featured-images, threaded-comments, translation-ready, rtl-language-support, block-styles
*/

:root {
  --clay-bg: #fff7f0;
  --clay-surface: #fff2e6;
  --clay-card: #ffffff;
  --clay-primary: #ff8a65;
  --clay-blue: #9cceff;
  --clay-mint: #a8e6cf;
  --clay-coral: #ffb4a2;
  --clay-border: #efe5db;
  --clay-text: #1f2937;
  --clay-muted: #79808b;
  --clay-radius-sm: 12px;
  --clay-radius-md: 20px;
  --clay-radius-lg: 28px;
  --clay-radius-xl: 36px;
  --clay-shadow:
    8px 8px 18px rgba(210, 185, 164, 0.28),
    -8px -8px 18px rgba(255, 255, 255, 0.92);
  --clay-shadow-soft:
    4px 4px 12px rgba(210, 185, 164, 0.22),
    -4px -4px 12px rgba(255, 255, 255, 0.9);
  --clay-shadow-inset:
    inset 3px 3px 7px rgba(211, 183, 160, 0.2),
    inset -3px -3px 7px rgba(255, 255, 255, 0.95);
  --clay-focus: 0 0 0 4px rgba(255, 138, 101, 0.28);
  --clay-grid: 8px;
  --clay-font-heading: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --clay-font-body: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--clay-bg);
  color: var(--clay-text);
  font-family: var(--clay-font-body);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: 12px 18px;
  z-index: 100000;
  background: var(--clay-card);
  color: var(--clay-text);
  border-radius: var(--clay-radius-sm);
  box-shadow: var(--clay-shadow);
}

.alignwide {
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  width: 100%;
}