/*--------------------------------------------------------------
# Visual polish — additive cosmetic refinements only.
#
# Deliberately conservative: no redesign, no color changes to the
# brand. This file is enqueued last (after the main stylesheet) so
# it only layers small refinements on top. Safe to remove at any
# time with no effect on the underlying layout.
--------------------------------------------------------------*/

/* --- Brand color tokens. Defined once here so the brand colours live
       in a single place and can be adopted across the theme gradually.
       Values are unchanged, so rendering is identical. --- */
:root {
    --tc-green:  #19B296; /* brand primary — actions, highlights, selection */
    --tc-pink:   #eb7e93;
    --tc-cyan:   #21b094;
    --tc-indigo: #6c79e0;
    --tc-amber:  #ffc107; /* base colour of form / action buttons */
}

/* --- Crisper Persian text on webkit/blink and Firefox --- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* --- Brand-colored text selection (instead of the default blue) --- */
::selection {
    background-color: var(--tc-green);
    color: #fff;
}
::-moz-selection {
    background-color: var(--tc-green);
    color: #fff;
}

/* --- Visible focus ring for keyboard users only (accessibility).
       Invisible to mouse users, so the visual design is unchanged. --- */
:focus-visible {
    outline: 2px solid var(--tc-green);
    outline-offset: 2px;
}

/* NOTE: a global `img { max-width:100%; height:auto }` rule was tried here
   and has been removed. Many images in this theme are sized by explicit
   width/height attributes (the header logo, the front-page images, coach
   photos, product thumbnails), and forcing height:auto resized them and
   threw off the front page, the article listings and the header spacing.
   Image sizing is left entirely to the theme's own stylesheets. */

/* --- Smooth, consistent hover transitions on interactive elements.
       Only animates state changes — it never alters the static look. --- */
a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

/* --- Gentle radius harmonisation on the main shop / cart / checkout
       action buttons. No !important, so any button with a deliberate
       radius keeps it, and circular elements (border-radius:50%) are
       left untouched. --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .button,
.woocommerce-checkout .button {
    border-radius: 5px;
}

/* NOTE: an `.entry-content img/figure/iframe/video { margin-bottom: 1rem }`
   rule was tried here and has been removed — it changed the spacing inside
   article and page bodies. Content spacing is left to the theme. */

/* --- Subtle lift + soft shadow on product cards for a more modern,
       "alive" feel on hover. Uses transform (no layout reflow) and an
       additive shadow, so nothing shifts and the design is unchanged
       at rest. --- */
.woocommerce ul.products li.product,
ul.products li.product {
    transition: transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

/* --- Mobile hamburger menu safety net.
       css/mobile.css hides the mobile menu with
       `.mega-menu-toggle + #mega-menu-menu-1 { display: none }` but never
       defines the opened state, so the menu only opens if Max Mega Menu's
       own rule outweighs it. This adds the matching open-state rule at a
       higher specificity, scoped to the same breakpoint. It applies only
       while the menu is actually open, so nothing changes at rest. --- */
@media (min-width: 320px) and (max-width: 600px) {
    #mega-menu-wrap-menu-1 .mega-menu-toggle.mega-menu-open + #mega-menu-menu-1 {
        display: block;
    }
}