/*
Theme Name: Notarizr
Theme URI: https://example.com/notarizr
Author: The Opal Group
Author URI: https://example.com
Description: Custom WooCommerce theme for Notarizr — order state-compliant notary stamps, seals, journals and supplies, with a live stamp customizer built in. Colors and styling are matched to the Notarizr logo (warm yellow-to-orange gradient with black type).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: notarizr
Tags: e-commerce, custom-colors, one-column, two-columns, right-sidebar, full-width-template
*/

/* =========================================================
   1. DESIGN TOKENS (colors sampled from the Notarizr logo)
   ========================================================= */
:root {
    --notarizr-yellow: #FFDB59;
    --notarizr-orange: #FF954D;
    --notarizr-gradient: linear-gradient(135deg, #FFDB59 0%, #FF954D 100%);
    --notarizr-gradient-soft: linear-gradient(135deg, rgba(255,219,89,0.12) 0%, rgba(255,149,77,0.12) 100%);
    --notarizr-black: #1A1A1A;
    --notarizr-gray-900: #2b2b2b;
    --notarizr-gray-600: #6b6b6b;
    --notarizr-gray-300: #e2e2e2;
    --notarizr-gray-100: #f8f7f5;
    --notarizr-white: #ffffff;
    --notarizr-success: #2f9e4f;
    --notarizr-error: #d64545;
    --notarizr-radius: 14px;
    --notarizr-radius-sm: 8px;
    --notarizr-shadow: 0 8px 24px rgba(26,26,26,0.08);
    --notarizr-font-heading: 'Poppins', 'Segoe UI', sans-serif;
    --notarizr-font-body: 'Inter', 'Segoe UI', sans-serif;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--notarizr-font-body);
    color: var(--notarizr-black);
    background: var(--notarizr-white);
    font-size: 16px;
    line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--notarizr-orange); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--notarizr-black); }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--notarizr-font-heading);
    font-weight: 800;
    color: var(--notarizr-black);
    line-height: 1.2;
    margin: 0 0 .5em;
    letter-spacing: -0.01em;
}
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}
.button, button, input[type="submit"], .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-block;
    font-family: var(--notarizr-font-heading);
    font-weight: 700;
    font-size: 15px;
    color: var(--notarizr-black) !important;
    background: var(--notarizr-gradient);
    border: none;
    border-radius: 999px;
    padding: 14px 30px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: var(--notarizr-shadow);
}
.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255,149,77,0.35);
    color: var(--notarizr-black) !important;
}
.button.button-outline {
    background: transparent;
    box-shadow: none;
    border: 2px solid var(--notarizr-black);
}

/* =========================================================
   3. HEADER
   ========================================================= */
.site-header {
    border-bottom: 1px solid var(--notarizr-gray-300);
    position: sticky;
    top: 0;
    background: var(--notarizr-white);
    z-index: 100;
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    gap: 24px;
}
.site-logo img { height: 48px; width: auto; }
.site-logo { display: flex; align-items: center; gap: 10px; font-family: var(--notarizr-font-heading); font-weight: 800; font-size: 20px; }
.main-navigation ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.main-navigation a { font-weight: 600; color: var(--notarizr-black); }
.main-navigation a:hover { color: var(--notarizr-orange); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.header-cart { position: relative; font-weight: 700; }
.header-cart .count-badge {
    position: absolute; top: -8px; right: -14px;
    background: var(--notarizr-gradient); color: var(--notarizr-black);
    border-radius: 50%; font-size: 11px; padding: 2px 6px; font-weight: 800;
}
.menu-toggle { display: none; background: none; box-shadow: none; padding: 6px; }

@media (max-width: 860px) {
    .main-navigation { display: none; }
    .menu-toggle { display: block; }
}

/* =========================================================
   4. HERO / FRONT PAGE
   ========================================================= */
.notarizr-hero {
    background: var(--notarizr-white);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--notarizr-gray-300);
}
.notarizr-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--notarizr-gradient);
}
.notarizr-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.notarizr-hero h1 { font-size: 48px; max-width: 560px; }
.notarizr-hero .highlight {
    background: var(--notarizr-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.notarizr-hero p.lead { font-size: 19px; color: var(--notarizr-gray-600); max-width: 480px; }
.notarizr-hero .button { color: var(--notarizr-black) !important; }
.notarizr-hero__art { display: flex; justify-content: center; align-items: center; position: relative; }
.notarizr-hero__art::before {
    content: "";
    position: absolute;
    width: 260px; height: 260px;
    background: var(--notarizr-gradient);
    opacity: 0.14;
    border-radius: 50%;
    z-index: 0;
}
.notarizr-hero__art img { max-width: 300px; filter: drop-shadow(0 20px 40px rgba(0,0,0,.12)); position: relative; z-index: 1; }

@media (max-width: 860px) {
    .notarizr-hero__inner { grid-template-columns: 1fr; text-align: center; }
    .notarizr-hero h1 { max-width: 100%; }
    .notarizr-hero p.lead { margin: 0 auto; }
}

.notarizr-trust-strip {
    display: flex; justify-content: center; gap: 48px; flex-wrap: wrap;
    padding: 28px 0; background: var(--notarizr-gray-100); text-align: center;
}
.notarizr-trust-strip .item { font-weight: 700; font-size: 14px; color: var(--notarizr-gray-900); }

.notarizr-categories { padding: 72px 0; }
.notarizr-categories h2 { text-align: center; font-size: 34px; margin-bottom: 40px; }
.notarizr-category-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.notarizr-category-card {
    border-radius: var(--notarizr-radius);
    background: var(--notarizr-gray-100);
    padding: 28px 20px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
    border: 1px solid var(--notarizr-gray-300);
}
.notarizr-category-card:hover { transform: translateY(-6px); box-shadow: var(--notarizr-shadow); }
.notarizr-category-card .icon-badge {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--notarizr-gradient); margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
}
.notarizr-category-card h3 { font-size: 17px; margin-bottom: 6px; }
.notarizr-category-card p { font-size: 13px; color: var(--notarizr-gray-600); margin: 0; }

@media (max-width: 960px) { .notarizr-category-grid { grid-template-columns: repeat(2, 1fr); } }

.notarizr-features { background: var(--notarizr-black); color: var(--notarizr-white); padding: 64px 0; }
.notarizr-features h2 { color: var(--notarizr-white); text-align: center; margin-bottom: 40px; }
.notarizr-features-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.notarizr-features-grid .feature { text-align: center; }
.notarizr-features-grid .feature .num {
    font-family: var(--notarizr-font-heading); font-weight: 800; font-size: 30px;
    background: var(--notarizr-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.notarizr-features-grid .feature h4 { color: var(--notarizr-white); font-size: 16px; }
.notarizr-features-grid .feature p { color: #c9c9c9; font-size: 13px; }
@media (max-width: 860px) { .notarizr-features-grid { grid-template-columns: repeat(2,1fr); } }

/* =========================================================
   5. SHOP / ARCHIVE
   ========================================================= */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; list-style: none; padding: 0; }
.woocommerce ul.products li.product {
    border: 1px solid var(--notarizr-gray-300); border-radius: var(--notarizr-radius);
    padding: 18px; transition: box-shadow .2s ease, transform .2s ease; background: var(--notarizr-white);
}
.woocommerce ul.products li.product:hover { box-shadow: var(--notarizr-shadow); transform: translateY(-4px); }
.woocommerce ul.products li.product img { border-radius: var(--notarizr-radius-sm); }
.woocommerce ul.products li.product .price { color: var(--notarizr-orange); font-weight: 800; }
.woocommerce span.onsale {
    background: var(--notarizr-gradient) !important; color: var(--notarizr-black) !important;
    font-weight: 800; border-radius: 999px;
}
@media (max-width: 960px) { .woocommerce ul.products { grid-template-columns: repeat(2,1fr); } }

/* =========================================================
   6. NOTARY STAMP CUSTOMIZER (single product page)
   ========================================================= */
.notarizr-customizer {
    margin: 28px 0; padding: 24px; border-radius: var(--notarizr-radius);
    background: var(--notarizr-gradient-soft); border: 1px solid rgba(255,149,77,0.35);
}
.notarizr-customizer h3 { font-size: 20px; margin-bottom: 18px; }
.notarizr-customizer__grid { display: grid; grid-template-columns: 320px 1fr; gap: 28px; }
.notarizr-customizer__preview {
    background: var(--notarizr-white); border-radius: var(--notarizr-radius-sm);
    padding: 16px; text-align: center; border: 1px solid var(--notarizr-gray-300);
}
.notarizr-customizer__preview canvas { max-width: 100%; }
.notarizr-preview-note { font-size: 12px; color: var(--notarizr-gray-600); margin-top: 8px; }
.notarizr-customizer__fields .form-row { margin-bottom: 14px; }
.notarizr-customizer__fields label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.notarizr-customizer__fields .required { color: var(--notarizr-error); }
.notarizr-customizer__fields input[type="text"],
.notarizr-customizer__fields select {
    width: 100%; padding: 11px 12px; border-radius: var(--notarizr-radius-sm);
    border: 1px solid var(--notarizr-gray-300); font-size: 14px; font-family: var(--notarizr-font-body);
}
.notarizr-customizer__fields input:focus, .notarizr-customizer__fields select:focus {
    outline: none; border-color: var(--notarizr-orange); box-shadow: 0 0 0 3px rgba(255,149,77,0.2);
}
.form-row-first, .form-row-last { display: inline-block; width: 48%; }
.form-row-first { margin-right: 4%; }
.notarizr-cert-notice {
    background: #fff4e5; border: 1px solid var(--notarizr-orange); border-radius: var(--notarizr-radius-sm);
    padding: 12px 14px; font-size: 13px; margin-bottom: 14px; color: var(--notarizr-gray-900);
}
.notarizr-cert-notice label { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-weight: 600; font-size: 13px; }

@media (max-width: 780px) {
    .notarizr-customizer__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   7. FOOTER
   ========================================================= */
.site-footer { background: var(--notarizr-gray-900); color: #d8d8d8; padding: 56px 0 24px; margin-top: 60px; }
.site-footer h4 { color: var(--notarizr-white); font-size: 15px; margin-bottom: 14px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 32px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: #d8d8d8; font-size: 14px; }
.footer-grid a:hover { color: var(--notarizr-orange); }
.footer-bottom { text-align: center; font-size: 13px; color: #9a9a9a; margin-top: 40px; padding-top: 20px; border-top: 1px solid #3a3a3a; }
.footer-newsletter input[type="email"] {
    padding: 10px 12px; border-radius: var(--notarizr-radius-sm) 0 0 var(--notarizr-radius-sm);
    border: none; width: 70%;
}
.footer-newsletter button {
    border-radius: 0 var(--notarizr-radius-sm) var(--notarizr-radius-sm) 0; padding: 10px 16px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2,1fr); } }