/* declare fonts */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700;900&display=swap');

/*

.widget .widget-title {
  font-size: 2.2rem;
  font-weight: bold;
  color: #1c1c84;
}

h2 {
  font-size: 2rem;
}

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
  font-size: 2rem;
}

.entry-content h3 {
  font-size: 3rem;
}

.entry-content h2 {
  font-size: 3rem;

}

.product_title.entry-title {
  font-size: 3rem;
}

*/

/* Make Towel features diagram navy */
/* Make Towel Loop navy */
.entry-content h2.sow-headline, .entry-content h2.woocommerce-loop-product__title, .woocommerce-loop-product__title {
  
  color: #1c1c84 !important;
}

#panel-w69af57f368990-1-0-0 .widget-title {
  font-size: 14pt;
}


/* Hero main headline */

.tennify-hero-main h1 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 8rem !important;
  font-weight: 900;
  line-height: 1.05;
  margin: 0 0 1rem 0;
  color: #ffffff;
  text-shadow: 4px 4px 12px rgba(0,0,0,0.85);
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

/* "Because…" pause line */
.hero-because {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 700 !important;
    font-size: 2.8rem !important;        /* smaller but still bold */
    color: #00a896 !important;           /* tennis green accent for pop */
    margin: 0.5rem 0 0.5rem 0 !important;
    letter-spacing: 0.1em !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7) !important;
}



/* Sub-line - only for home page main widget */

.tennify-hero-main .hero-sub {
  font-family: 'Roboto', sans-serif !important;
  font-size: 2.0rem;
  font-weight: 600;
  color: #f0f0f0;
  margin: 0.5rem 0 3.5rem 0;
  letter-spacing: 0.5px;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.9);
}

/* Mobile: smaller text only for home page main widget */

@media (max-width: 767px) {
  .tennify-hero-main h1 {
    font-size: 3.7rem !important;
    line-height: 1.1;
    margin: 0 0 0.8rem 0;
  }

  .hero-because {
        font-size: 2.0rem !important;
    }

		
  .tennify-hero-main .hero-sub {
    font-size: 1.5rem !important;
    font-weight: 600;
    margin: 0.4rem 0 1.5rem 0;
  }
}

/* Adding Global Font Rules for Tennify */

/* 1. Body text & most content – use Roboto */

body,
p,
li,
div,
  /* span,  Span ruins Icons with Roboto */
input,
textarea,
button,
a,
.site-content,
.woocommerce-product-details__short-description,
.woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.entry-content,
.widget-area,
footer {
  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 400;
  /* Regular weight for body copy */
  line-height: 1.6;
  color: #222222;
  /* or #333333 your preferred dark text color */
}

/* 2. Headings (h1–h6) & other headline-style elements – use Oswald */

h1,
h2,
h3,
h4,
h5,
h6,
.widget-title,
.woocommerce div.product .product_title,
.woocommerce-loop-product__title,
.page-title,
.entry-title,
.archive-title,
.site-title,
.site-description,
.menu-item a {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700;
  /* Bold or 900 for stronger impact */
  line-height: 1.2;
  letter-spacing: -0.01em;
/* Testing Color alt #0f0f5e */
		color: #1c1c84;
}

/* 3. Buttons & strong CTAs – keep Roboto but bold */

button,
.button,
.add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.hero-cta {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700 !important;
}

/* Global Base sizes */

body {
  font-size: 1.1rem;
  /* or 16–18px base */
}

h1 {
  font-size: 3.5rem;
  font-weight: 900;
}

h2 {
  font-size: 2.8rem;
  font-weight: 700;
}

h3 {
  font-size: 2.2rem;
  font-weight: 700;
}

h4 {
  font-size: 1.8rem;
  font-weight: 700;
}

/* Mobile scaling */

@media (max-width: 767px) {
  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2.2rem;
  }

  h3 {
    font-size: 1.8rem;
  }
}


/* removed tiny */


/* Because Tennify */

.opening-statement {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    line-height: 1.7;
    text-align: center;
    max-width: 900px;
    margin: 1.5rem auto 3rem auto;
    color: #444;
}

.opening-statement strong {
    font-weight: 700;
    color: #006633; /* tennis green accent */
}

/* ──────────────────────────────────────────────
   ONLY for Because... Tennify page hero
   Scoped with .because-tennify-hero to avoid affecting main hero
   ────────────────────────────────────────────── */

/* Add this to Additional CSS or your stylesheet */
.because-tennify-hero .hero-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
	justify-content: flex-start !important;
	
  gap: 0.1em;
  /* padding: 0 1.5rem; */
	padding: 6vh 1.5rem 4vh 1.5rem !important;  /* top 8vh, sides keep 1.5rem, bottom 4vh */
  max-width: 1400px;
  margin: 0 auto;
  height: 100vh;               /* or 80vh / 600px depending on desired height */
  text-align: center;
  color: white;
	
}

.because-tennify-hero .join-movement {
  font-size: clamp(2.8rem, 8vw, 7.5rem) !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  text-shadow: 4px 4px 14px rgba(0,0,0,0.8) !important;
  margin: 0 0 0.08em 0 !important;
}

.because-tennify-hero .get-tennified {
  font-size: clamp(4.5rem, 14vw, 13rem) !important;
  font-weight: 900 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, #ffb700, #ffea00, #ff9500) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.3); /* keep subtle outline */
  /* text-shadow:
    0 0 14px rgba(255, 255, 255, 0.75),
    0 0 24px rgba(255, 215, 0, 0.55),
    0 0 40px rgba(255, 140, 0, 0.35),
    0 6px 20px rgba(0,0,0,0.55) !important; */
		
	 text-shadow:
  0 0 12px rgba(255, 255, 255, 0.7),
  0 0 22px rgba(255, 215, 0, 0.5),
  0 0 38px rgba(255, 140, 0, 0.3),
  0 6px 18px rgba(0,0,0,0.5) !important;
  
	/*	filter: drop-shadow(0 0 15px rgba(255, 200, 0, 0.6)) brightness(1.05) !important; */
		
	filter: drop-shadow(0 0 15px rgba(255, 200, 0, 0.6))
  brightness(1.04) contrast(1.05) !important;
		
  margin: 0.05em 0 0.3em 0 !important;
}

.because-tennify-hero .hero-because {
  font-size: clamp(1.8rem, 5vw, 4.2rem) !important;
  font-weight: 700 !important;
  color: #00a896 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  margin: 0.3rem 0 2.8rem 0 !important;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.7) !important;
}

/* Reduce space between tagline and button */
.because-tennify-hero .hero-because {
  margin-bottom: 0.5rem !important;  /* or 0.5rem / 0.6rem – start here */
}

/* Pull the sow-hero-buttons container closer */
.because-tennify-hero .sow-hero-buttons,
.because-tennify-hero .sow-hero-buttons-wrapper,
.because-tennify-hero .sow-button-base {
  margin-top: -0.4rem !important;     /* negative value lifts button up – try -0.4rem to -0.8rem */
  margin-bottom: 1.5rem !important;   /* space below button */
}


/* Make sure the paragraph/button container has minimal top margin */
.because-tennify-hero .hero-content-wrapper p {
  margin-top: 0rem !important;     /* or 0.3rem – reduces gap above button */
  margin-bottom: 0rem !important;    /* space below button */
}

/* Force image to shift upward – crops more top, shows more bottom */
.because-tennify-hero,
.because-tennify-hero .panel-grid-cell,
.because-tennify-hero .so-panel,
.because-tennify-hero [style*="background-image"] {
  background-position: center 75% !important;   /* 20% = crops ~20% top, shows ~80% bottom */
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.because-tennify-hero {
  height: 85vh !important;         /* or 65vh / 600px – adjust after position is fixed */
  min-height: 480px !important;    /* safety for small screens */
}

/* Mobile */
@media (max-width: 767px) {
  .because-tennify-hero .join-movement {
    /* font-size: 2.8rem !important; */
  }
  .because-tennify-hero .get-tennified {
    /* font-size: 5rem !important; */
    line-height: 0.98 !important;
  }
  .because-tennify-hero .hero-because {
    /* font-size: 1.8rem !important; */
  }
	.because-tennify-hero .hero-content-wrapper {
    padding-top: calc(14vh + env(safe-area-inset-top)) !important;   /* small top breathing room */
  }
		
}

/* Remove underline from footer "Company" section links */
.siteorigin-widget-tinymce a,
.footer-widgets .widget-title + .textwidget a,
.sow-editor-base a {
  text-decoration: none !important;
}

/* Optional: underline only on hover for usability */
.siteorigin-widget-tinymce a:hover,
.footer-widgets .widget-title + .textwidget a:hover,
.sow-editor-base a:hover {
  text-decoration: underline !important;
}

/* Main menu links – dark blue */
.primary-menu a,
.site-header a,
.nav-menu a,
.main-navigation a,
.menu-item a {
  color: #1c1c84 !important;
}

/* Hover/focus – teal accent for interactivity */
.primary-menu a:hover,
.primary-menu a:focus,
.site-header a:hover,
.site-header a:focus,
.nav-menu a:hover,
.nav-menu a:focus {
  color: #00a896 !important;   /* your teal – or #008080 for deeper */
}

/* Optional: underline on hover for extra clarity */
.primary-menu a:hover,
.nav-menu a:hover {
  text-decoration: underline !important;
}


/* Force 2 columns on mobile – high specificity */
@media (max-width: 767px) {
  .woocommerce ul.products,
  .woocommerce ul.products.columns-1,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4 {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px !important;   /* negative margin for gaps */
  }

  .woocommerce ul.products li.product,
  .woocommerce ul.products.columns-1 li.product,
  .woocommerce ul.products.columns-2 li.product,
  .woocommerce ul.products.columns-3 li.product,
  .woocommerce ul.products.columns-4 li.product {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 10px 20px !important;   /* horizontal gap + bottom space */
    box-sizing: border-box !important;
    width: 50% !important;   /* extra override for stubborn themes */
  }

  /* Product image & content tweaks for better mobile fit */
  .woocommerce ul.products li.product img {
    width: 100% !important;
    height: auto !important;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.1rem !important;
  }
}

/* Optional: 1 column only on tiny screens if 2 feels cramped */
@media (max-width: 480px) {
  .woocommerce ul.products li.product {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}



@media only screen and (max-width: 768px) {
  .woocommerce .related.products ul.products,
  .woocommerce-page .related.products ul.products,
  .woocommerce .upsells.products ul.products,
  .woocommerce-page .upsells.products ul.products {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;   /* or flex-start if you prefer top alignment */
  }
}



@media (max-width: 767px) {
  .sow-hero-buttons,
  .sow-button-base,
  .hero-cta-button {
    padding: 0.8rem 1.8rem !important;     /* smaller than desktop padding */
    font-size: clamp(1rem, 4.5vw, 1.2rem) !important;   /* ~16–19px on small phones */
    min-width: 220px !important;           /* prevents it from being too narrow */
    max-width: 90% !important;             /* caps width so it doesn't fill the whole screen */
    margin: 1.2rem auto 1.5rem auto !important;   /* vertical space around button */
  }
}


/* Bold navy links in normal content areas */
/* Only body content and main widgets — no footer */
.entry-content p a,
.site-content p a,
.page-content p a {
  color: #1c1c84 !important;
  font-weight: 700 !important;
}

.entry-content p a:hover,
.site-content p a:hover,
.page-content p a:hover {
  color: #2c2c94 !important;
}