/*
Theme Name: Francesco il Musical
Theme URI: https://sanfrancesco.us
Author: Saryan Corporation
Description: Custom classic theme for Francesco (il Musical), converted from a Claude Design layout. Bilingual EN/IT, with a WooCommerce-powered Buy Now page.
Version: 1.0.5
Requires at least: 6.0
Tested up to: 6.5
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: francesco
WC requires at least: 6.0
WC tested up to: 9.0
*/

/* ---------- Global base (ported from the Claude Design export) ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  font-family: 'Spectral', serif;
  color: #40301C;
}
a { color: #7E1416; text-decoration: none; }
a:hover { color: #B8863A; }
::selection { background: #7E1416; color: #F3E6C0; }

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

/* Keyframes used by inline animation styles in the templates */
@keyframes fr-kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.07); } }
@keyframes fr-shimmer  { 0% { background-position: -140% 0; } 100% { background-position: 240% 0; } }
@keyframes fr-rise     { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fr-riseTop  { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes fr-fade     { from { opacity: 0; } to { opacity: 1; } }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- WooCommerce price + product styling (matches the design tokens) ---------- */
/* Woo generates its own price markup; these rules give it the same look as the mockup. */
.fr-price { margin-top: 10px; font-family: 'Spectral', serif; font-style: italic; font-size: 20px; color: #B8863A; }
.fr-price .price { margin: 0; }
.fr-price del,
.fr-price del .woocommerce-Price-amount {
  color: #b3a074;
  text-decoration: line-through;
  margin-right: 8px;
  font-style: italic;
}
.fr-price ins,
.fr-price ins .woocommerce-Price-amount {
  text-decoration: none;
  color: #7E1416;
  font-weight: 500;
}
.fr-price .woocommerce-Price-amount { white-space: nowrap; }

.fr-product-image { width: 100%; }
.fr-product-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(200px, 24vw, 230px);
  object-fit: contain;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  transition: transform .4s cubic-bezier(.2,.6,.2,1);
}
.fr-product-card:hover .fr-product-image img { transform: translateY(-6px); }

/* Woo "View cart" link that appears after an AJAX add-to-cart */
.fr-add-to-basket.added + .added_to_cart {
  display: inline-block;
  margin-top: 12px;
  margin-left: 12px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 12px;
  color: #7E1416;
  border-bottom: 1px solid #cbb06a;
}
.fr-add-to-basket.loading { opacity: .65; pointer-events: none; }

/* Scenes theatre responsive collapse */
@media (max-width: 860px) {
  .fr-scenes-grid { grid-template-columns: 1fr !important; }
}

/* Accordion content visibility fallback (in case JS is disabled) */
.no-js .fr-js-only { display: none; }

/* ---------- Responsive header menu (CSS-only checkbox toggle) ---------- */
/* On desktop, everything mobile-only is fully hidden (display:none) so no
   panel, border, or shadow can leak into the header. The menu is only
   enabled inside the <=768px breakpoint below. */
#fr-menu-toggle { position:absolute; opacity:0; pointer-events:none; width:0; height:0; margin:0; }
#fr-hamburger { display:none; }
#fr-backdrop { display:none; }
#fr-mobmenu { display:none; }

@media (max-width:768px) {
  /* Desktop links collapse; hamburger + drawer take over. */
  #fr-desktop-nav > a[data-i18n-en] { display:none !important; }
  #fr-desktop-nav { flex:1 1 auto; justify-content:flex-end; flex-wrap:nowrap; gap:16px; }

  #fr-hamburger {
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    color:#7E1416; padding:6px; margin-left:2px; -webkit-tap-highlight-color:transparent;
  }
  #fr-hamburger .fr-ic-x { display:none; }

  #fr-mobmenu {
    display:block;
    position:absolute; top:100%; left:0; right:0; z-index:22;
    background:#ffffff; border-bottom:1px solid #e6d6a8;
    box-shadow:0 14px 26px rgba(60,20,10,.14);
    overflow:hidden; max-height:0;
    transition:max-height .32s cubic-bezier(.2,.6,.2,1);
  }

  #fr-menu-toggle:checked ~ #fr-mobmenu { max-height:360px; }
  #fr-menu-toggle:checked ~ .fr-hrow #fr-hamburger .fr-ic-bars { display:none; }
  #fr-menu-toggle:checked ~ .fr-hrow #fr-hamburger .fr-ic-x { display:block; }
  #fr-menu-toggle:checked ~ #fr-backdrop { display:block; position:fixed; left:0; right:0; top:0; bottom:0; z-index:8; }
}

/* ---------- Mailchimp for WordPress (MC4WP) embedded form ---------- */
.fr-site .mc4wp-form { width: 100%; }
.fr-site .mc4wp-form p { margin: 0; }
.fr-site .mc4wp-response { flex-basis: 100%; margin-top: 12px; font-family: 'Spectral', serif; font-size: 14.5px; line-height: 1.5; color: #5a4a2c; }
.fr-site .mc4wp-response .mc4wp-alert, .fr-site .mc4wp-response .mc4wp-success { color: #5a4a2c; }
.fr-site .mc4wp-response .mc4wp-error { color: #7E1416; }