/*
Theme Name: Craftique
Theme URI: https://craftique.local/
Author: Craftique Team
Author URI: https://craftique.local/
Description: A cozy, modern, and high-performance WordPress theme designed specifically for crochet, knitting, DIY, and craft creators. Inspired by clean boutique craft publications like BunnyPatterns, featuring visual category grids, pattern specification cards (hook, yarn, difficulty), printable patterns, and responsive mobile-first layouts.
Version: 1.0.0
Tested up to: 6.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: craftique
Tags: blog, craft, crochet, diy, grid-layout, custom-menu, featured-images, custom-logo, one-column, right-sidebar
*/

/* ==========================================================================
   CSS CUSTOM PROPERTIES (THEME PALETTE & TYPOGRAPHY)
   ========================================================================== */
:root {
  /* Brand Palette (Warm, cozy, boutique aesthetic) */
  --cq-coral: #f27e73;
  --cq-coral-dark: #d96458;
  --cq-coral-light: #fbeae7;
  --cq-coral-soft: #fdf2f0;
  --cq-peach: #f7d9d4;
  --cq-peach-border: #f2dfdc;
  --cq-sage: #d4e5d0;
  --cq-sage-dark: #7aa374;
  --cq-dark: #2d2a28;
  --cq-dark-soft: #45403d;
  --cq-text-main: #2d2a28;
  --cq-text-muted: #6e6762;
  --cq-text-light: #9c948e;
  --cq-bg-cream: #fffaf8;
  --cq-bg-white: #ffffff;
  --cq-border-light: #f0e6e4;
  --cq-border-subtle: #eae2df;

  /* Typography */
  --cq-font-sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --cq-font-heading: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cq-font-accent: 'Caveat', cursive;

  /* Border Radiuses */
  --cq-radius-sm: 8px;
  --cq-radius-md: 14px;
  --cq-radius-lg: 20px;
  --cq-radius-xl: 26px;
  --cq-radius-pill: 60px;

  /* Shadows */
  --cq-shadow-subtle: 0 4px 16px rgba(45, 42, 40, 0.05);
  --cq-shadow-card: 0 8px 24px rgba(45, 42, 40, 0.07);
  --cq-shadow-hover: 0 14px 36px rgba(45, 42, 40, 0.12);
  --cq-shadow-pop: 0 10px 30px rgba(45, 42, 40, 0.15);

  /* Container */
  --cq-container-max: 1200px;
  --cq-container-narrow: 860px;
  --cq-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: var(--cq-font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cq-text-main);
  background-color: var(--cq-bg-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--cq-bg-cream);
  color: var(--cq-text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a {
  color: var(--cq-text-main);
  text-decoration: none;
  transition: var(--cq-transition);
}

a:hover {
  color: var(--cq-coral);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cq-font-heading);
  color: var(--cq-dark);
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0;
}

p {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

ul, ol {
  margin-top: 0;
  padding-left: 1.5rem;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
}

/* Container */
.cq-container {
  width: 100%;
  max-width: var(--cq-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.cq-container-narrow {
  width: 100%;
  max-width: var(--cq-container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Accessibility */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}