/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Novara Energy custom child theme with brand colors and typography
 Author:       Novara Energy
 Author URI:   https://novara.com
 Template:     generatepress
 Version:      1.0.3
 Text Domain:  generatepress_child
*/

/* =========================================
   Navigation
========================================= */

/* Subtle letter spacing for nav links */
.main-navigation a,
.slideout-navigation.main-navigation .main-nav ul li a {
  letter-spacing: var(--wp--custom--nav-letter-spacing, 0.04em);
}

/* Vertical line animation above top-level nav items (desktop) */
@media (min-width: 1024px) {
  .main-navigation .main-nav > ul > li {
    position: relative;
  }
  .main-navigation .main-nav > ul > li > a::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -50px;
    width: 1px;
    height: 0;
    background-color: var(--wp--preset--color--novara-sky, #cdecf6);
    transform: translateX(-50%);
    transition: height .3s ease-out;
  }
  .main-navigation .main-nav > ul > li:hover > a::before,
  .main-navigation .main-nav > ul > li.current-menu-item > a::before,
  .main-navigation .main-nav > ul > li.current-page-ancestor > a::before {
    height: 50px;
    z-index: 1;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .main-navigation .main-nav > ul > li > a::before {
    transition: none;
  }
}

/* Secondary nav styling */
.secondary-navigation {
  background-color: var(--wp--preset--color--novara-teal, #054f59) !important;
  letter-spacing: 1px;
  text-transform: capitalize;
}
.secondary-navigation ul li a {
  letter-spacing: 1px;
  text-transform: capitalize;
}

/* Mobile header spacing */
.mobile-header-navigation {
  padding: 10px;
  box-sizing: border-box;
}

/* =========================================
   Headings
========================================= */
.headline-rule h1 {
  position: relative;
}
.headline-rule h1::before {
  content: '';
  position: absolute;
  display: block;
  height: 60px;
  border-left: 1px solid var(--contrast, currentColor);
  left: 50%;
  transform: translateX(-50%);
  top: -66px;
}

/* =========================================
   Images
========================================= */
figure.wp-block-image.image-style img {
  border-radius: 80px 4px; /* TL/BR 80px, TR/BL 4px */
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

/* =========================================
   Header container
========================================= */
.site-header {
  overflow-y: hidden;
}

/* =========================================
   Megamenu (desktop)
========================================= */
@media (min-width: 769px) {
  nav .main-nav .mega-menu { position: static; }
  nav .main-nav .mega-menu > ul {
    position: absolute; top: 100%; left: 0 !important; width: 100%;
    display: flex; flex-wrap: wrap;
  }
  nav .main-nav .mega-menu > ul > li > a { font-weight: 700; }
  nav .main-nav .mega-menu > ul > li { display: inline-block; width: 25%; vertical-align: top; }
  nav .main-nav .mega-menu.mega-menu-col-2 > ul > li { width: 50%; }
  nav .main-nav .mega-menu.mega-menu-col-3 > ul > li { width: 33.3333%; }
  nav .main-nav .mega-menu.mega-menu-col-5 > ul > li { width: 20%; }
  nav .main-nav .mega-menu > ul > li:hover > a,
  nav .main-nav .mega-menu > ul > li:focus-within > a,
  nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
  nav .main-nav .mega-menu ul ul { background-color: transparent !important; color: inherit; }
  nav .main-nav .mega-menu ul .sub-menu {
    position: static; display: block; opacity: 1; visibility: visible; width: 100%;
    box-shadow: none; left: 0; height: auto; pointer-events: auto; transform: none;
  }
  nav .main-nav .mega-menu ul.toggled-on .sub-menu { pointer-events: auto; }
  nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle { display: none; }
}

/* =========================================
   Per-page background helper
========================================= */
.post-7145 {
  background-color: var(--wp--preset--color--base-2, #f7f8f9);
}

/* =========================================
   Secondary nav (mobile layout helpers)
========================================= */
@media (max-width: 768px) {
  .secondary-navigation { text-align: center !important; }
  .secondary-navigation ul { display: block; }
  .secondary-navigation .sf-menu > li { float: none; display: inline-block !important; }
}

/* =========================================
   TABLES — Scrollable, sticky, no mid-word breaks
   Applies to Gutenberg tables wrapped in:
   <figure class="wp-block-table member-benefits-comparison-table"> ... </figure>
   and
   <figure class="wp-block-table membership-pricing-table"> ... </figure>
========================================= */

/* Scroll container (the <figure>) */
figure.wp-block-table.member-benefits-comparison-table,
figure.wp-block-table.membership-pricing-table {
  position: relative;
  display: block;
  max-width: 100%;
  margin: 0 0 var(--wp--preset--spacing--40, 1rem) 0;
  padding: 0;                       /* ensure sticky first column touches the left edge */
  overflow-x: auto;                 /* horizontal scroll */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;         /* avoid layout shift */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  contain: paint;                   /* safer sticky layering inside overflow */
  padding-inline-end: 1px;          /* ensures last column fully scrolls into view */
}

/* If WP injects an inner container, strip spacing there too */
figure.wp-block-table.member-benefits-comparison-table > .wp-block-table__container,
figure.wp-block-table.membership-pricing-table > .wp-block-table__container {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}

/* The table itself should size to content and enable scrolling rather than squish */
figure.wp-block-table.member-benefits-comparison-table > table,
figure.wp-block-table.membership-pricing-table > table {
  width: max-content !important;    /* exceed viewport when columns need it */
  min-width: 100%;                  /* but never smaller than the container */
  margin: 0 !important;
  border-collapse: separate;        /* sticky works more reliably than with collapse */
  border-spacing: 0;
  table-layout: auto;               /* respect min-width on cells and allow natural sizing */
  box-sizing: border-box;
  background: transparent;
}

/* Cells — spacing, borders, and line breaking behavior */
figure.wp-block-table.member-benefits-comparison-table th,
figure.wp-block-table.member-benefits-comparison-table td,
figure.wp-block-table.membership-pricing-table th,
figure.wp-block-table.membership-pricing-table td {
  min-width: var(--wp--custom--table-col-min, 220px);
  padding: .65rem .85rem;
  white-space: normal;              /* allow wrapping across lines at spaces */
  word-break: keep-all;             /* never break within a word */
  overflow-wrap: normal;            /* don't force word breaks */
  hyphens: none;
  border: 1px solid var(--wp--custom--table-border, rgba(0,0,0,.12));
  box-sizing: border-box;
  font-weight: 400;                 /* default weight for inner cells */
}

/* Sticky header row (and bold) */
figure.wp-block-table.member-benefits-comparison-table thead th,
figure.wp-block-table.membership-pricing-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  color: #fff;
  background: var(--wp--preset--color--novara-teal, #054f59);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  font-weight: 700;                 /* BOLD header cells */
}



/* Sticky first column (both th/td) — also bold to differentiate */
figure.wp-block-table.member-benefits-comparison-table thead th:first-child{
  position: sticky;
  left: 0;
  z-index: 4;                       /* header corner stays above row cells */
}

/* Sticky first column (both th/td) — also bold to differentiate */
/* figure.wp-block-table.member-benefits-comparison-table thead th:first-child, */
figure.wp-block-table.member-benefits-comparison-table tbody th:first-child,
figure.wp-block-table.member-benefits-comparison-table tbody td:first-child,
figure.wp-block-table.membership-pricing-table tbody td:first-child{
  position: sticky;
  left: 0;
  background: var(--wp--preset--color--novara-sky, #cdecf6);
  z-index: 4;                       /* header corner stays above row cells */
  box-shadow: 1px 0 0 rgba(0,0,0,.06);
  font-weight: 700;                 /* BOLD first column cells */
}

/* Make the top-left header cell invisible if it's intentionally empty */
figure.wp-block-table.member-benefits-comparison-table thead th:first-child:empty,
figure.wp-block-table.membership-pricing-table thead th:first-child:empty {
  background-color: var(--wp--preset--color--novara-teal)
}

/* Improve scrollbar discoverability */
figure.wp-block-table.member-benefits-comparison-table::-webkit-scrollbar,
figure.wp-block-table.membership-pricing-table::-webkit-scrollbar {
  height: 10px;
}
figure.wp-block-table.member-benefits-comparison-table::-webkit-scrollbar-thumb,
figure.wp-block-table.membership-pricing-table::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.25);
  border-radius: 10px;
}

figure.wp-block-table.membership-pricing-table thead th:first-child:empty {
  background-color: var(--wp--preset--color--novara-teal)
}
/* Slightly narrower columns on tiny phones */
@media (max-width: 480px) {
  :root { --wp--custom--table-col-min: 170px; }
}

/* Remove default "card" look some block styles may add */
.wp-block-table:not(.is-style-stripes) {
  box-shadow: none !important;
  background: transparent !important;
}

/* =========================================
   Focus visibility (a11y)
========================================= */
.main-navigation a:focus-visible,
.secondary-navigation a:focus-visible {
  outline: 2px solid var(--wp--preset--color--novara-yellow, #f7e55a);
  outline-offset: 2px;
}

/* =========================================
   Buttons (Novara)
========================================= */
.gpb-button--secondary {
  color: var(--wp--preset--color--novara-rust, #f47729) !important;
  background-color: rgba(244, 119, 41, .12);
}

.novara-primary-button {
  color: #fff;
  background-color: var(--wp--preset--color--novara-rust, #f47729);
}

.novara-button-primary a,
.gpb-button--primary a {
  color: #ffffff !important;
  background-color: var(--wp--preset--color--novara-rust, #f47729);
}

.novara-secondary-button {
  color: var(--wp--preset--color--novara-rust, #f47729) !important;
  background-color: rgba(244, 119, 41, .12);
}