/*
Theme Name: W.Va. Insurance Company
Theme URI: https://wvainsurance.com
Author: W.Va. Insurance Company
Description: A warm, photo-forward block theme for W.Va. Insurance Company — a West Virginia farm mutual protecting homes and farms since 1923. Heritage navy, harvest rust, and cream, with real Mountain-State photography and a front-and-center online bill-pay experience. Built for Full Site Editing so content is easy to update.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wva-insurance
Tags: full-site-editing, block-patterns, custom-colors, business, block-styles, wide-blocks
*/

/* ==========================================================================
   The design system lives in theme.json. This file adds interactions and the
   utility classes / components the patterns rely on.
   ========================================================================== */

:root { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* --- Buttons & links ---------------------------------------------------- */
.wp-element-button, .wp-block-button__link {
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(196, 90, 51, 0.5); }
a { transition: color .15s ease; }

/* Outline buttons */
.wp-block-button.is-style-outline .wp-block-button__link {
  border-width: 2px;
}
.wp-block-button.is-style-outline-light .wp-block-button__link {
  background: transparent;
  color: #F5EFE2;
  border: 2px solid rgba(245, 239, 226, 0.5);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
  background: #F5EFE2; color: #14283A; border-color: #F5EFE2;
}

/* --- Brand lockup (header + footer) ------------------------------------ */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand-mark {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600; font-size: 1.7rem; line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 6px 16px -8px rgba(196, 90, 51, 0.7);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600; font-size: 1.32rem; letter-spacing: -0.01em;
  color: var(--wp--preset--color--primary);
}
.brand-tagline {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #9A7B3E; margin-top: 0.28rem;
}
.brand--light .brand-name { color: var(--wp--preset--color--base); }
.brand--light .brand-tagline { color: var(--wp--preset--color--accent); }

/* --- Eyebrow label ------------------------------------------------------ */
.eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: .8rem !important;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wp--preset--color--secondary);
}
.eyebrow.is-on-dark { color: var(--wp--preset--color--accent); }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 247, 239, 0.92);
  border-bottom: 1px solid var(--wp--preset--color--soft-line);
}
/* Remove WordPress's default block-gap between the header and page content
   so the hero/banner sits flush under the menu on every page. */
.wp-site-blocks > main { margin-block-start: 0; }
.site-header .wp-block-navigation { font-family: var(--wp--preset--font-family--body); font-weight: 500; }
.site-header .wp-block-navigation a { text-decoration: none; color: var(--wp--preset--color--primary); padding-block: .35rem; position: relative; }
.site-header .wp-block-navigation .wp-block-navigation-item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--wp--preset--color--secondary); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.site-header .wp-block-navigation .wp-block-navigation-item > a:hover::after,
.site-header .wp-block-navigation .current-menu-item > a::after { transform: scaleX(1); }

/* "Pay My Bill" nav button */
.site-header .wp-block-navigation .is-pay-link a {
  background: var(--wp--preset--color--secondary); color: #FFF;
  border-radius: 8px; padding: .55rem 1.15rem; font-weight: 600;
}
.site-header .wp-block-navigation .is-pay-link a::after { display: none; }
.site-header .wp-block-navigation .is-pay-link a:hover { background: #A4472A; }

/* --- Mobile overlay menu ------------------------------------------------ */
/* !important is required throughout: WordPress core's navigation styles use
   the same selectors and load after the theme, so they win ties otherwise. */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  max-width: 100vw !important;
  padding: 5rem 1.5rem 2.5rem !important;
  background-color: var(--wp--preset--color--primary-dark) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  width: 100% !important; height: 100% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  gap: 1.6rem !important; width: 100% !important; max-width: 100% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100% !important; text-align: center !important;
  align-items: center !important; justify-content: center !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
  color: var(--wp--preset--color--base) !important; font-size: 1.5rem !important;
  justify-content: center !important; text-align: center !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a::after { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a:hover { color: var(--wp--preset--color--accent) !important; }
.wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--accent) !important; }

/* --- Cards -------------------------------------------------------------- */
.wva-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--soft-line);
  border-radius: 14px; height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wva-card:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -28px rgba(20,40,58,0.5); border-color: var(--wp--preset--color--secondary); }

/* Photo card — image on top, content below */
.photo-card { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--soft-line); border-radius: 16px; overflow: hidden; height: 100%; transition: transform .2s ease, box-shadow .2s ease; }
.photo-card:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -30px rgba(20,40,58,0.55); }
.photo-card .wp-block-image, .photo-card figure { margin: 0; }
.photo-card img { display: block; width: 100%; height: 230px; object-fit: cover; }

/* Quick-actions row that overlaps the hero */
.quick-actions { position: relative; z-index: 3; margin-top: -3.75rem; }
.quick-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--soft-line);
  border-radius: 16px; height: 100%;
  box-shadow: 0 26px 50px -30px rgba(20,40,58,0.5);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.quick-card:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--secondary); box-shadow: 0 32px 56px -28px rgba(20,40,58,0.55); }
.quick-card a.stretch::after { content: ""; position: absolute; inset: 0; }

/* Icon chip — fixed square that always centers its icon */
.icon-chip {
  flex: 0 0 54px;
  width: 54px; height: 54px;
  border-radius: 12px;
  background: rgba(30,58,82,0.07);
  border: 1px solid var(--wp--preset--color--soft-line);
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
.icon-chip.on-rust { background: rgba(196,90,51,0.12); border-color: rgba(196,90,51,0.25); }
/* Payment-method cards: lift the icon chip so it straddles the card's top border */
.wva-card .icon-chip { margin-top: -59px; }
.icon-chip .wp-block-image, .icon-chip figure { margin: 0 !important; line-height: 0; }
.icon-chip img { width: 26px !important; height: 26px !important; max-width: none !important; display: block; }

/* Short rule */
.rule-rust { width: 56px; height: 4px; background: var(--wp--preset--color--secondary); border: 0; border-radius: 4px; }

/* Stats */
.stat-number { font-family: var(--wp--preset--font-family--heading); line-height: 1; color: var(--wp--preset--color--primary); white-space: nowrap; }

/* Framed photo */
.framed { border-radius: 16px; overflow: hidden; box-shadow: var(--wp--preset--shadow--soft); }

/* Footer links */
.site-footer a { text-decoration: none; color: var(--wp--preset--color--base); }
.site-footer a:hover { color: var(--wp--preset--color--accent); }
.site-footer .eyebrow.is-on-dark { color: var(--wp--preset--color--accent); }

/* Info rows */
.info-row { border-bottom: 1px solid var(--wp--preset--color--soft-line); }

/* Hero min-height + overlay text */
.hero-cover { min-height: clamp(520px, 72vh, 720px); }
@media (max-width: 781px) { .hero-cover { min-height: 460px; } .quick-actions { margin-top: 1.5rem; } }

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}