/*
Theme Name: Kirana Store
Theme URI: https://example.com/kirana-store
Author: Your Name
Author URI: https://example.com
Description: Mobile-first WordPress theme for Indian kirana/grocery stores with WhatsApp ordering. Includes a working three-line hamburger menu, off-canvas mobile navigation, and full support for flexible gram-based product ordering (50g to 25kg) via the companion Kirana WhatsApp Ordering plugin.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kirana-store
Domain Path: /languages
Tags: e-commerce, custom-menu, custom-logo, featured-images, translation-ready, right-sidebar, block-styles, wide-blocks, threaded-comments, footer-widgets
*/

/* =========================================================
   Kirana Store — style.css
   Last-mile overrides only.

   Load order (set in functions.php):
     1. assets/css/main.css        (components, tokens, layout)
     2. assets/css/responsive.css  (media queries)
     3. style.css                  (this file, last)

   Put ONLY these kinds of rules here:
     - WordPress core alignment & caption classes
     - Block library compatibility gaps
     - Accessibility overrides (forced colors, high contrast)
     - Print styles
     - Final safety nets

   Do NOT put layout or component rules here. Those belong
   in main.css or responsive.css.
   ========================================================= */

/* =========================================================
   1. WordPress core alignment classes
   WP outputs these on every editor image. A theme that
   omits them fails WP.org theme review and breaks the
   editor's alignment experience.
   ========================================================= */

.alignleft {
    float: left;
    margin: 0.4em 1.2em 1em 0;
}

.alignright {
    float: right;
    margin: 0.4em 0 1em 1.2em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
}

.alignwide {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

.alignfull {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.alignnone {
    margin-left: 0;
    margin-right: 0;
}

/* Clear floats around images and blocks */
.entry-content::after,
.wp-block-image::after,
.wp-block-table::after {
    content: "";
    display: table;
    clear: both;
}

/* =========================================================
   2. Image captions (classic and block editor)
   ========================================================= */

.wp-caption {
    max-width: 100%;
    margin-bottom: 1.5em;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
}

.wp-caption img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.wp-caption-text,
.wp-block-image figcaption,
.wp-block-gallery .blocks-gallery-caption,
.wp-element-caption {
    font-size: 0.85rem;
    color: #6b7280;
    padding: 8px 12px;
    margin: 0;
    line-height: 1.5;
    text-align: center;
    font-style: italic;
}

/* Gallery */
.gallery {
    margin: 0 0 1.5em;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.gallery-item {
    margin: 0;
}

.gallery-icon img {
    margin: 0 auto;
    border-radius: 6px;
}

/* =========================================================
   3. Sticky post indicator
   ========================================================= */

.sticky .archive-card__title::before,
.sticky .post-card__title::before {
    content: "📌 ";
    font-size: 0.9em;
}

/* =========================================================
   4. Block library compatibility
   ========================================================= */

.wp-block-separator {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 2em 0;
}

.wp-block-separator.is-style-wide {
    border-top-width: 1px;
}

.wp-block-separator.is-style-dots {
    border: none;
    text-align: center;
    height: auto;
    line-height: 1;
}

.wp-block-separator.is-style-dots::before {
    content: "···";
    letter-spacing: 1.5em;
    color: #6b7280;
    font-size: 1.5rem;
    padding-left: 1.5em;
}

.wp-block-pullquote {
    border-top: 3px solid #0a7d3e;
    border-bottom: 3px solid #0a7d3e;
    padding: 2em 0;
    text-align: center;
    color: #1f2937;
}

.wp-block-pullquote blockquote {
    margin: 0;
    border-left: none;
    background: transparent;
    padding: 0;
    font-style: italic;
    font-size: 1.15rem;
}

.wp-block-quote {
    border-left: 4px solid #0a7d3e;
    background: #f9fafb;
    padding: 12px 20px;
    margin: 1.5em 0;
    border-radius: 6px;
}

.wp-block-quote cite {
    display: block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #6b7280;
    font-style: normal;
}

.wp-block-table {
    overflow-x: auto;
}

.wp-block-table table {
    margin: 0;
}

.wp-block-button__link {
    text-decoration: none;
}

.wp-block-button__link:hover {
    text-decoration: none;
}

.wp-block-image {
    margin: 1.5em 0;
}

.wp-block-image img {
    border-radius: 8px;
}

.wp-block-embed__wrapper {
    position: relative;
    max-width: 100%;
}

.wp-block-embed iframe {
    max-width: 100%;
}

.wp-block-cover {
    border-radius: 8px;
    overflow: hidden;
}

.wp-block-group {
    max-width: 100%;
}

/* =========================================================
   5. Forced colors (Windows High Contrast)
   ========================================================= */

@media (forced-colors: active) {
    .ks-btn,
    .header-cart,
    .ks-menu-toggle,
    .ks-drawer__close,
    .footer-backtotop {
        border: 1px solid ButtonText;
    }

    .ks-btn:focus,
    .header-cart:focus,
    .ks-menu-toggle:focus {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }

    .ks-btn--primary,
    .ks-btn--secondary {
        background: ButtonFace;
        color: ButtonText;
    }

    a {
        color: LinkText;
    }
}

/* =========================================================
   6. Print styles
   ========================================================= */

@media print {
    .site-header,
    .site-footer,
    .ks-mobile-drawer,
    .ks-mobile-backdrop,
    .ks-announcement,
    .ks-demo-notice,
    .skip-link,
    .header-actions,
    .single-nav,
    .single-author-box,
    .single-comments,
    .page-comments,
    .footer-backtotop,
    .ks-404__links,
    .ks-404__search {
        display: none !important;
    }

    body {
        font-size: 11pt;
        color: #000;
        background: #fff;
        position: static;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
        word-break: break-all;
    }

    a[href^="#"]::after,
    a[href^="tel:"]::after,
    a[href^="mailto:"]::after {
        content: "";
    }

    .single-main,
    .page-main {
        max-width: 100%;
        padding: 0;
    }

    .single-hero,
    .page-hero {
        page-break-inside: avoid;
        max-height: 200px;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    .page-content table,
    .single-content table {
        display: table;
        width: 100%;
        font-size: 10pt;
    }

    .footer-contact {
        display: block !important;
    }
}

/* =========================================================
   7. Final safety net — no horizontal scroll at 320px
   ========================================================= */

@media (max-width: 359px) {
    html,
    body {
        overflow-x: hidden;
    }

    .entry-content,
    .page-content,
    .single-content,
    .archive-card__excerpt,
    .footer-inner {
        overflow-wrap: anywhere;
        word-wrap: break-word;
    }

    .entry-content pre,
    .page-content pre,
    .single-content pre {
        max-width: calc(100vw - 32px);
    }
}