/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://purevitalitytips.com/
 Description:  Child theme for GeneratePress, used for custom code and styling.
 Author:       Faizan Ahmed
 Template:     generatepress
 Version:      1.0.0
*/

/* ============================================================
   Self-hosted Nunito Sans (replaces Google Fonts CDN request)
   ============================================================ */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/nunito-sans-v19-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/nunito-sans-v19-latin-300italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/nunito-sans-v19-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/nunito-sans-v19-latin-600italic.woff2') format('woff2');
}

/* ============================================================
   Explicit typography rules — restores the exact settings that
   were previously applied automatically via GeneratePress's
   "Use Google Fonts API" integration, now that it's disabled.
   ============================================================ */
body, button, input, select, textarea {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 600;
}


/* Rank Math TOC - Box Style */
.wp-block-rank-math-toc-block {
    margin-left: 0 !important;
    margin-bottom: 40px !important;
    border: 2px solid #0D9488 !important;
    border-radius: 8px !important;
    padding: 20px 25px !important;
    background-color: #F0FDFA !important;
    max-width: 600px !important;
}

#rank-math-toc > h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    color: #111827 !important;
}

#rank-math-toc a {
    color: #0D9488 !important;
    text-decoration: none !important;
}

#rank-math-toc a:hover {
    text-decoration: underline !important;
}

/* for paragraph justify */

p {
    text-align: justify !important;
}

/* for everything */

/* Better heading styles */
h1, h2, h3 {
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
}

/* Better paragraph spacing */
p {
    margin-bottom: 22px !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
}

/* Make article images rounded */
.wp-block-image img, 
article img {
    border-radius: 10px !important;
}

/* Better link colour */
a {
    color: #0D9488 !important;
    text-decoration: none !important;
}

a:hover {
    text-decoration: underline !important;
}

/* Add subtle background to blockquotes */
/* Target WordPress default Quote block container */
.wp-block-quote {
    border-left: 4px solid #0D9488 !important;
    background-color: #F0FDFA !important;
    padding: 15px 20px !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
}

/* Force the text inside the Quote block to be 14px and italic */
.wp-block-quote p {
    font-size: 15px !important;
    font-style: italic !important;
    line-height: 1.6 !important;
    color: #374151 !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    
    /* Adds a perfect gap between multiple paragraphs */
    margin: 0 0 12px 0 !important; 
}

/* Removes the gap from the very last paragraph so the bottom padding looks even */
.wp-block-quote p:last-child {
    margin-bottom: 0 !important;
}

/* Force 14px font size on all bullet lists and numbered lists */
ul li, 
ol li {
	
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #374151 !important;
}

/* Optional: Adds a clean, professional spacing between list items */
ul li, 
ol li {
	
    margin-bottom: 4px !important;
	text-align: justify
		!important;
}


/* for title of purevitalitytips */

.site-title a {
    line-height: 1 !important;
    display: block !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.site-description {
    margin-top: -10px !important;
    padding-top: 0 !important;
    line-height: 1 !important;
}

.site-branding p {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* for profile picture of about us page  */
.center-text-block {
    align-items: center !important;
}

.center-text-block .wp-block-media-text__content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* for picture and info in about me */
@media (max-width: 768px) {
    .mobile-spacing img {
        margin-bottom: 25px !important;
        padding-bottom: 25px !important;
    }
    
    .mobile-spacing {
        gap: 25px !important;
    }
}

/* Categories Widget */
.widget_categories .widget-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    border-bottom: 2px solid #0D9488 !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
}

.widget_categories ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.widget_categories ul li {
    padding: 7px 0 !important;
    border-bottom: 1px solid #F3F4F6 !important;
    display: flex !important;
    align-items: center !important;
    font-size: 11px !important;
}

.widget_categories ul li a {
    color: #374151 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-right: 4px !important;
}

.widget_categories ul li a:hover {
    color: #0D9488 !important;
    padding-left: 5px !important;
    transition: all 0.2s ease !important;
}

.widget_categories ul li .post-count {
    background: #F0FDFA !important;
    color: #0D9488 !important;
    border-radius: 20px !important;
    padding: 1px 6px !important;
    font-size: 11px !important;
    margin-left: 2px !important;
}

/* footer beautiful */

/* Main Footer Background - Removed padding for maximum tightness */
footer.site-footer, 
.site-footer, 
#colophon {
    background-color: #F9FAFB !important; 
    padding: 30px 0 0 0 !important; 
    margin-bottom: 0 !important;
}

/* Force the widget area to have no bottom spacing */
.site-footer .widget {
    margin-bottom: 0 !important;
}

/* Titles and Links */
.site-footer .widget-title {
    color: #111827 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #0D9488 !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
}

.site-footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-footer ul li {
    padding: 4px 0 !important;
    margin: 0 !important;
}

.site-footer ul li a {
    color: #374151 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
}

.site-footer ul li a:hover {
    color: #0D9488 !important;
}



/* Bottom Copyright Bar - The "Glue" that pulls it up */
.site-info {
    background-color: #0D9488 !important;
    color: #FFFFFF !important;
    text-align: center !important;
    padding: 5px 0 !important; 
    font-size: 13px !important;
    margin-top: 0 !important; 
    /* Negative margin pulls the green bar up to close the last gap */
    margin-bottom: 0 !important;
}

.site-info p { 
    margin: 0 !important; 
    padding: 0 !important; 
}
/* FINAL ATTEMPT: Absolute Priority Background Override */
.site-footer, 
footer, 
#colophon, 
.footer-widgets, 
.footer-container {
    background-color: #F0FDFA !important; /* CHANGE THIS CODE TO PICK YOUR FAVORITE FROM THE TABLE ABOVE */
    background-image: none !important;    /* Forces the theme to remove any hidden images/gradients */
}


/* ==================================================
   FINAL SEARCH BAR: Reduced Width
   ================================================== */

.site-footer .widget_search form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-top: 5px !important;
}

/* Input Box: Reduced to 100px */
.site-footer .widget_search input[type="search"],
.site-footer .widget_search input[type="text"] {
    background: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
    color: #111827 !important;
    height: 38px !important;      
    width: 100px !important;      /* Reduced width for a smaller look */
    padding: 0 12px !important; 
    border-radius: 6px !important; 
    font-size: 13px !important;
    margin: 0 8px 0 0 !important; /* Maintains the 8px space */
}

/* Submit Button */
.site-footer .widget_search .search-submit,
.site-footer .widget_search button[type="submit"],
.site-footer .widget_search input[type="submit"] {
    background: #0D9488 !important;
    color: #FFFFFF !important;
    border: none !important;
    height: 38px !important;      
    padding: 0 16px !important;
    border-radius: 6px !important; 
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin: 0 !important;
    line-height: 38px !important;
}

/* ==================================================
   UNIFIED HEADER & DESCRIPTION STYLING
   ================================================== */

/* --- Navigation Menu Styling --- */
.main-navigation ul li {
    padding: 0 !important;
    margin: 0 !important;
}

.main-navigation ul li a {
    margin-right: 25px !important;
    padding: 0 !important;
    display: inline-block !important;
    color: #374151 !important;
    font-weight: 600 !important;
    transition: color 0.3s ease !important;
    text-decoration: none !important;
    border: none !important;
}

.main-navigation ul li:last-child a {
    margin-right: 0 !important;
}

.main-navigation ul li a:hover {
    color: #0D9488 !important;
    text-decoration: none !important;
    border: none !important;
}

/* --- Site Description Styling --- */
.site-description {
    font-size: 14px !important;
    color: #000000 !important;
    margin-top: -5px !important;
    display: block !important;
}
/* ==================================================
   REMOVE DROPDOWN BACKGROUND COMPLETELY
   ================================================== */

.main-navigation ul ul {
    background: transparent !important;      /* Makes it invisible */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.main-navigation ul ul li a {
    background: transparent !important;      /* Ensures no background on items */
}


/* ==================================================
   SEARCH BAR: FORCED GAP USING FLEXBOX
   ================================================== */

/* Wrap the search container in a display flex to control the layout */
.search-form {
    display: flex !important;
    gap: 15px !important; /* This creates the physical space between items */
}
/* ==================================================
   REMOVE CATEGORY/META BACKGROUND
   ================================================== */

/* Target the wrapper holding the category text */
.entry-meta, 
.cat-links, 
.post-categories, 
.entry-footer .cat-links {
    background-color: transparent !important;
    background: none !important;
}

/* Ensure the link inside doesn't carry a background either */
.entry-meta a, 
.cat-links a {
    background-color: transparent !important;
    background: none !important;
    padding: 0 !important; /* Removes extra padding that might look like a box */
}

/* Ensure the input field takes up the remaining space */
.search-field {
    flex: 1 !important; /* Forces the input to stretch */
    border: 1px solid #E2E8F0 !important;
    border-radius: 6px !important;
    padding: 10px 15px !important;
    background-color: #F8FAFC !important;
    color: #374151 !important;
    margin: 0 !important; /* Removes margins so gap works */
}

/* Button stays as its own separate unit */
.search-submit {
    background-color: #0D9488 !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    border: none !important;
    padding: 10px 20px !important;
    margin: 0 !important; /* Removes margins so gap works */
    transition: background 0.3s ease !important;
    white-space: nowrap !important; /* Keeps button text on one line */
}

.search-submit:hover {
    background-color: #0F766E !important;
}

/* ==================================================
   BEAUTIFY CONTACT FORM 7
   ================================================== */

/* 1. Container spacing */
.wpcf7-form {
    max-width: 600px;
    margin: 20px 0;
}

/* 2. Styling the input fields and text area */
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 6px !important;
    background-color: #F8FAFC !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease !important;
    font-size: 16px !important;
}

/* 3. Adding a "focus" effect when typing */
.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus {
    outline: none !important;
    border-color: #0D9488 !important; /* Matches your Teal accent */
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1) !important;
}

/* 4. Beautifying the Submit Button */
.wpcf7-submit {
    background-color: #0D9488 !important;
    color: #FFFFFF !important;
    padding: 12px 30px !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
}

.wpcf7-submit:hover {
    background-color: #0F766E !important;
}

/* for background of mobile menu */

/* Fix mobile menu background flash and transparency */
button.menu-toggle,
button.menu-toggle:focus,
button.menu-toggle:active,
button.menu-toggle:hover,
.main-navigation.mobile-header-navigation .menu-toggle,
.menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {
    background-color: transparent !important;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .main-navigation.toggled,
    .main-navigation.toggled ul,
    .main-navigation.toggled .main-nav > ul,
    .main-navigation.toggled .sub-menu,
    .main-navigation.toggled .main-nav > ul > li > a,
    .main-navigation.toggled .sub-menu li a {
        background-color: transparent !important;
        background: transparent !important;
    }
}

/* to make group beautiful */
.wp-block-group {
  background-color: #ffffff; 
  border: 1px solid #e5e7eb; 
  border-left: 5px solid #14b8a6; 
  padding: 1.5rem 2rem;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  margin: 2rem 0;
}

.wp-block-group p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #374151;
  margin: 0;
}

/* ================================
   POPULAR POST WIDGET STYLING
   ================================ */

.wpp-list li {
  display: flex !important;
  align-items: center !important;
  padding: 10px 0 !important;
  margin-bottom: 0 !important;
}

.wpp-list li img {
  width: 65px !important;
  height: 55px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

.wpp-list .wpp-item-data {
  overflow: hidden !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.wpp-list .taxonomies {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  margin-bottom: 1px !important;
  display: block !important;
}

.wpp-taxonomy {
  display: inline !important;
  color: #0D9488 !important;
}

.wpp-list .wpp-item-data a:not(.wpp-taxonomy) {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2em !important;
  font-size: 13px !important;
  color: black !important;
  text-decoration: none !important;
}

/* Divider using hr */
.wpp-list li.wpp-divider {
  padding: 0 !important;
  margin: 12px 0 !important;
  list-style: none !important;
  display: block !important;
}

.wpp-list li.wpp-divider hr {
  border: none !important;
  border-top: 1px solid #D1D5DB !important;
  margin: 0 !important;
  width: 100% !important;
}