/*
Theme Name: WSP Template
Author: WebSolProv
Description: Standard template for Web Solution Providers
Version: 5.0

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

/* 
Start - Pricing Table Styles
*/

/* Modern plan table polish (keeps your WP preset variables) */

.table-pricing table{
  margin-top: 20px;
  margin-bottom: 20px;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

/* Outer card */
.table-pricing table tbody{
  border: 2px solid var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--medium);

  border-radius: 16px;
  overflow: hidden;

  /* subtle lift */
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* Cells: remove heavy grid, add breathing room */
.table-pricing table td{
  border: 0;
  padding: 18px 18px;
  vertical-align: middle;
}

/* Subtle row separators instead of boxed borders */
.table-pricing table tr:not(:last-child) td{
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* Column styling */
.table-pricing table td:nth-child(1){
  color: var(--wp--preset--color--primary);
  font-weight: 600; /* slightly less shouty than 700 */
}

.table-pricing table td:nth-child(2){
  text-align: right;
  font-weight: 600;
}

/* Optional: zebra striping for easier scanning */
.table-pricing table tr:nth-child(even) td{
  background: rgba(255,255,255,0.03);
}

/* Optional: hover micro-interaction */
.table-pricing table tr:hover td{
  background: rgba(255,255,255,0.05);
  transition: background 0.15s ease;
}

/* Price typography: tighten the group */
.table-pricing table td .CurrPrice{
  vertical-align: super;
  font-size: var(--wp--preset--font-size--small);
  opacity: 0.9;
  margin-right: 4px;
}

.table-pricing table td .WholePrice{
  color: var(--wp--preset--color--primary);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.table-pricing table td .SubPrice,
.table-pricing table td .PeriodPrice{
  font-size: var(--wp--preset--font-size--small);
  opacity: 0.9;
}

/* Make the top “price row” feel like a header block (if that’s your first row) */
.table-pricing table tr:first-child td{
  padding-top: 28px;
  padding-bottom: 28px;
  background: rgba(0,0,0,0.12);
}

/* 
End - Pricing Table Styles
*/

/* Overlay header must always sit above the hero cover */
.home .container-menu-home{
  position: relative;
  z-index: 10; /* match Host Junction's current behaviour */
}

/* Make the cover explicitly lower when overlapped */
.home .wp-block-cover{
  position: relative;
  z-index: 1;
}

@media (max-width:781px){

  .home .container-menu-home{
    position: relative !important;
    z-index: 50000 !important;
  }

  .home .wp-block-cover{
    position: relative;
    z-index: 1;
  }

  .home .wp-block-cover .wp-block-cover__inner-container > .wp-block-group{
    margin-top: 190px !important;
  }

  .home .wp-block-cover h1.wp-block-heading.has-xxx-large-font-size{
    font-size: 28px !important;
    line-height: 1.08 !important;
  }
  .home .wp-block-cover h2.wp-block-heading.has-medium-font-size{
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  .home .wp-block-cover .wp-block-button__link{
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }  

}

@media (max-width: 781px){

  /* Make the navigation overlay a real full-screen modal */
  .wp-block-navigation__responsive-container{
    background: #111 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Menu link styling (readable + consistent) */
  .wp-block-navigation__container a,
  .wp-block-navigation-item__label{
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    text-decoration: none !important;
  }
  
  /* Reduce top spacing inside the mobile menu */
  .wp-block-navigation__responsive-dialog{
    padding-top: 30px !important;   /* try 24px if you want tighter */
  }

  /* Optional: tighten overall vertical spacing */
  .wp-block-navigation__responsive-container-content{
    padding-top: 0 !important;
  }
  
}

@media (max-width: 781px){

  /* Inner pages: make the hero panel a centred card */
  body:not(.home) .inner-hero-panel{
    flex: 0 1 auto !important;
    width: 80vw !important;        /* ~80% of viewport */
    max-width: 420px !important;   /* prevents it getting silly on big phones */
    margin: 0 auto !important;

    padding: 32px 20px !important; /* replaces 70px/30px desktop padding */
    box-sizing: border-box !important;
  }

  /* Typography inside the panel */
  body:not(.home) .inner-hero-panel h1{
    font-size: 28px !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
  }

  body:not(.home) .inner-hero-panel h2{
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin: 0 0 16px !important;
  }

  /* Button: stop awkward wrapping and scale text */
  body:not(.home) .inner-hero-panel .wp-block-button__link{
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding: 14px 18px !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    max-width: 100%;
  }
}