/*
Theme Name: Floweriopot
Theme URI: https://floweriopot.com/
Author: Wood X Handicraft
Author URI: https://floweriopot.com/
Description: A complete, production-ready custom WordPress theme for Floweriopot, a Metal & Wooden Flower Pot Manufacturer based in Amroha, Uttar Pradesh, India. Mobile-first design with smooth animations, scroll effects, and modern UI. Features: custom product post type, product categories, hero slider, products carousel, AJAX contact form, schema markup, breadcrumbs, and comprehensive page animations. Fully responsive, accessible (WCAG 2.1 AA), and SEO optimized. Now with automatic page template assignment!
Version: 2.0.1
Requires at least: 6.0
Tested up to: 6.5
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: floweriopot
Tags: business, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready, accessibility-ready, animation, responsive
*/

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */
:root {
    /* Colors - Matching Logo Theme */
    --color-primary: #3B1A40;        /* Deep Purple from logo text */
    --color-secondary: #6B4A7D;      /* Lighter purple for hover */
    --color-accent: #C8A35F;         /* Gold from logo ornaments */
    --color-white: #ffffff;
    --color-bg-light: #F5F1E8;       /* Cream/beige from logo background */
    --color-text-dark: #2c1a2e;      /* Very dark purple */
    --color-text-grey: #6b6b6b;
    --color-footer-bg: #2c1a2e;      /* Dark purple for footer */
    --color-topbar-bg: #3B1A40;      /* Purple topbar */

    /* Helper colors derived from palette */
    --color-primary-dark: #2c1430;
    --color-light-cream: #faf8f4;
    --color-border: #e8e4dc;

    /* Typography */
    --font-primary: 'Poppins', sans-serif;
    --font-heading: 'Playfair Display', serif;

    /* UI tokens */
    --border-radius: 8px;
    --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --box-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
    --transition: all 0.3s ease;
    --container-width: 1200px;
}

/* ==========================================================================
   2. MODERN CSS RESET
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-dark);
    background: linear-gradient(to bottom, #FAF8F4 0%, #FFFFFF 100%);
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

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

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

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

button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

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

a:hover,
a:focus {
    color: var(--color-secondary);
}

table {
    border-collapse: collapse;
    width: 100%;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   3. TYPOGRAPHY BASE
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text-dark);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: 1rem;
    color: var(--color-text-grey);
}

p:last-child {
    margin-bottom: 0;
}

strong,
b {
    font-weight: 600;
    color: var(--color-text-dark);
}

small {
    font-size: 0.875rem;
}

blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 20px;
    margin: 20px 0;
    font-style: italic;
    color: var(--color-text-grey);
}

code,
pre {
    font-family: 'Courier New', Courier, monospace;
    background-color: var(--color-bg-light);
    border-radius: 4px;
}

code {
    padding: 2px 6px;
    font-size: 0.875em;
}

pre {
    padding: 16px;
    overflow-x: auto;
}

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

.screen-reader-text:focus {
    background-color: var(--color-white);
    border-radius: 4px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: var(--color-primary);
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.wp-caption {
    max-width: 100%;
    margin-bottom: 1rem;
}

.wp-caption-text {
    font-size: 0.875rem;
    color: var(--color-text-grey);
    text-align: center;
    padding: 8px 0;
}

.sticky,
.gallery-caption,
.bypostauthor {
    display: block;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
}

.skip-link:focus {
    left: 6px;
    top: 6px;
}

/* NOTE:
   This style.css contains the required WordPress theme header,
   the design-token :root variables, the CSS reset and typography base only.
   All component styles (buttons, grids, header, footer, slider, cards, forms,
   responsive breakpoints, etc.) live in assets/css/main.css as specified
   in the enqueue order. */