/*
Theme Name: HYPAFamily
Theme URI: https://hypafamily.com
Author: HYPAFamily
Description: Luxury sailing experiences that fund foster care sailing education. Minimal luxury nautical design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
License: Proprietary
Text Domain: hypafamily
*/

/* ===== TAILWIND CSS LOADED VIA CDN IN header.php ===== */

/* Custom overrides */
html {
  scroll-behavior: smooth;
}

body {
  background-color: #f9f9f9;
  color: #1a1c1c;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ===== WooCommerce Minimal Styles ===== */
.woocommerce a.remove {
  color: #b91c1c !important;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: 700;
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #b91c1c;
}
.woocommerce a.remove:hover {
  background: #b91c1c;
  color: #fff !important;
}
.woocommerce table.shop_table {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  width: 100%;
  margin-bottom: 24px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e5e5e5;
}
.woocommerce table.shop_table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.woocommerce .quantity .qty {
  width: 60px;
  padding: 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  text-align: center;
}
.woocommerce .coupon input {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  margin-right: 8px;
}
.woocommerce .coupon button,
.woocommerce button.button,
.woocommerce a.button {
  display: inline-block;
  padding: 14px 32px;
  background: #0A192F;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover {
  opacity: 0.85;
  color: #fff;
}
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  background: #775a19 !important;
  color: #fff !important;
  padding: 16px 40px !important;
  font-size: 14px !important;
  width: 100%;
  text-align: center;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background: #5d4201 !important;
}
.woocommerce .cart_totals {
  background: #fff;
  padding: 24px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}
.woocommerce .cart_totals h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #0A192F;
}
.woocommerce .cart_totals table {
  width: 100%;
  margin-bottom: 16px;
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
  padding: 12px;
  border-bottom: 1px solid #e5e5e5;
  font-size: 15px;
}
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
  font-size: 18px;
  font-weight: 700;
  color: #0A192F;
}
.woocommerce .wc-proceed-to-checkout {
  margin-top: 20px;
}
.woocommerce-checkout .woocommerce-info {
  background: #f3f3f4;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 24px;
}
.woocommerce-checkout .form-row {
  margin-bottom: 16px;
}
.woocommerce-checkout .form-row label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
}
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-family: Inter, sans-serif;
  font-size: 14px;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: #775a19;
  outline: none;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 16px;
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
  padding: 12px;
  border-bottom: 1px solid #e5e5e5;
}
.woocommerce-checkout #payment {
  background: #f3f3f4;
  border-radius: 4px;
  padding: 20px;
  margin-top: 24px;
}
.woocommerce-checkout #payment .payment_methods {
  list-style: none;
  padding: 0;
}
.woocommerce-checkout #payment .payment_methods li {
  padding: 8px 0;
}
.woocommerce-checkout #payment .payment_box {
  background: #fff;
  padding: 12px;
  border-radius: 4px;
  margin-top: 8px;
}
.woocommerce-checkout #place_order,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"],
.wc-block-checkout__actions button.wc-block-components-checkout-place-order-button {
  width: 100% !important;
  padding: 18px 40px !important;
  background: #775a19 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  border: 2px solid #775a19 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  margin-top: 20px !important;
  transition: all 0.3s !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
  line-height: 1.4 !important;
  box-shadow: 0 2px 8px rgba(119,90,25,0.3) !important;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"]:hover {
  background: #5d4201 !important;
  border-color: #5d4201 !important;
  box-shadow: 0 4px 12px rgba(119,90,25,0.4) !important;
}

.woocommerce-checkout .hypa-back-to-cart {
  display: inline-block;
  margin-bottom: 20px;
  padding: 10px 20px;
  background: transparent;
  color: #0A192F;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid #0A192F;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s;
}
.woocommerce-checkout .hypa-back-to-cart:hover {
  background: #0A192F;
  color: #fff;
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
  padding: 12px 16px 12px 56px;
  border-radius: 4px;
  margin-bottom: 20px;
  border-left: 4px solid #775a19;
  background: #f9f9f9;
}
.woocommerce .woocommerce-error {
  border-left-color: #b91c1c;
}
.woocommerce .woocommerce-message {
  border-left-color: #16a34a;
}

/* WooCommerce page layout fixes */
body.woocommerce-cart .site-header,
body.woocommerce-checkout .site-header,
body.woocommerce-account .site-header {
  /* ensure header/navbar is on top */
  z-index: 999;
}
.woocommerce .woocommerce-notices-wrapper {
  margin-top: 1rem;
}
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title {
  display: none;
}
.woocommerce table.shop_table td.actions {
  padding: 16px 12px;
}
.woocommerce-cart .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
}
.woocommerce .select2-container .select2-selection--single {
  height: 44px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 6px 12px;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 30px;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
}

/* ===== Fix WooCommerce overriding Tailwind image sizes on nav/footer ===== */
/* WooCommerce sets .woocommerce-page img { height: auto; max-width: 100%; }
   which overrides Tailwind's h-14/h-12/w-44 on cart/checkout/account pages.
   These rules restore the intended sizes with equal or higher specificity. */
.woocommerce-page nav a img {
  height: 3.5rem;
  width: auto;
  max-width: none;
}
.woocommerce-page footer a img {
  max-width: none;
}
.woocommerce-page footer div > a > img {
  height: 3rem;
  width: auto;
}
.woocommerce-page footer div > img {
  width: 11rem;
  height: auto;
}

/* Scale down for smaller laptop screens (14" and similar) */
@media (max-width: 1440px) {
  .max-w-container-max,
  [class*="max-w-container-max"] {
    max-width: 1200px;
  }
  .py-section-padding,
  [class*="py-section-padding"] {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  [class*="px-margin-desktop"] {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  [class*="gap-gutter"] {
    gap: 24px;
  }
  .text-headline-lg,
  [class*="text-headline-lg"] {
    font-size: 3rem;
  }
  .text-headline-md,
  [class*="text-headline-md"] {
    font-size: 2.25rem;
  }
}