/* 
Theme Name:		 croft-publications
Theme URI:		 http://childtheme-generator.com/
Description:	 rid-it is a child theme of GeneratePress, created by ChildTheme-Generator.com
Author:			 cyberwink
Author URI:		 http://childtheme-generator.com/
Template:		 generatepress
Version:		 1.0.0
Text Domain:	 croft-publications
*/

html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
}
.site {
    flex: 1 0 auto;
}
.site-footer {
    flex-shrink: 0;
}
/* ==========================================
   5. NAVIGATION MENU (Large & Fixed Dropdowns)
   ========================================== */
/* Main Menu Size */
#site-navigation .main-nav > ul > li > a {
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* Desktop Only Menu Settings */
@media (min-width: 769px) {
   
    .main-navigation .main-nav ul li a {
        line-height: 80px !important;
    }
    /* Hide arrow on desktop for equal spacing */
    .menu-item-has-children .dropdown-menu-toggle { display: none !important; }
    .main-navigation .main-nav ul li.menu-item-has-children > a { padding-right: 25px !important; }
    
    /* Sub-menu bridge & positioning */
    .main-navigation ul ul { top: 80px !important; width: 250px !important; }
    .main-navigation .main-nav ul li.menu-item-has-children { padding-bottom: 15px; margin-bottom: -15px; }
}


/* Mobile View (Below 768px) */
@media (max-width: 768px) {
     h1{font-size: 26px;}
      h2{font-size: 18px;}
    .footer-flex-wrap {
        flex-direction: column; /* This forces the 1-column stack */
        align-items: center;    /* This centers the items */
    }

    .footer-left-side, 
    .footer-right-side {
        text-align: center;     /* Centers text on mobile */
        margin-bottom: 10px;    /* Adds a little gap between the two rows */
    }
}


/* Dropdown Item Reset */
.main-navigation .main-nav ul ul li a { 
    line-height: 40px !important; 
    font-size: 17px !important; 
    padding: 10px 20px !important; 
}

/* Mobile Menu Fix (Restore Dropdown Access) */
@media (max-width: 768px) {
    .main-navigation .dropdown-menu-toggle { display: inline-block !important; }
    .main-navigation .main-nav ul li a { line-height: 50px !important; font-size: 18px !important; }
    .main-navigation ul ul { top: auto !important; }
}

/* ==========================================
   6. GLOBAL BODY TYPOGRAPHY (Large Font)
   ========================================== */
body, p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    /*color: #333333;*/
}

/* ==========================================
   6. WOOCOMMERCE CHANGES
   ========================================== */
/* Custom Headline Color */

/*h2 { line-height: 1.2em;font-size: 21px;font-weight: bolder; }*/
.site-info { padding-top: 2%; padding-bottom: 2%; }

/* Center product title and price on shop/category pages */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
    text-align: center;
}

/* Center the add to cart button */
.woocommerce ul.products li.product .button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

/* Change the 'Add to Basket' button on the Shop/Archive pages */
.woocommerce ul.products li.product .button {
    background-color: var(--base-3);
    color: #ffffff;
}

/* Hover state for Shop/Archive pages */
.woocommerce ul.products li.product .button:hover .page-numbers .add_to_cart_button:hover {
    background-color: var(--button-hover);
}
/* Change Checkout "Place Order" and Cart Buttons */
.woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt {
    background-color: var(--base-3); /* Replace with your color */
    color: #FFFFFF; /* Text color */
}

/* Hover State */
.woocommerce #respond input#submit.alt:hover, 
.woocommerce a.button.alt:hover, 
.woocommerce button.button.alt:hover, 
.woocommerce input.button.alt:hover {
    background-color: var(--button-hover); /* Replace with hover color */
    color: #FFFFFF;
}

/* Fix "Update Cart" greyed out button (Optional) */
.woocommerce button.button:disabled, 
.woocommerce button.button:disabled[disabled] {
    background-color: var(--base-3); /* Standard light grey for disabled */
    color: #a0a0a0;
}

/* Style the Apply Coupon button */
.woocommerce button.button[name="apply_coupon"] {
    background-color: var(--base-3); /* Your desired button color */
    color: var(--base-2); /* Your desired text color */
}

/* Hover state for the Apply Coupon button */
.woocommerce button.button[name="apply_coupon"]:hover {
    background-color:var(--button-hover); /* Hover color */
    color: var(--base-2);
}

/* Style the View Basket button (often appears after adding a product) */
.woocommerce a.button.wc-forward:not(.checkout) {
    background-color: var(--base-3); !important;
    color: #FFFFFF !important;
}

/* Hover state for View Basket */
.woocommerce a.button.wc-forward:not(.checkout):hover {
    background-color: var(--button-hover) !important;
    color: #FFFFFF !important;
}

/* 1. The Outer Container (The moving gradient) */
.border-box {
  position: relative;
  width: fit-content;
  /* INCREASE THIS for a thicker outer frame */
  padding: 6px; 
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  background: #fff; /* This color fills the 'gap' */
}

/* 2. The Animated Gradient (The "Border") */
.border-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(transparent, #00e5ff, #7000ff, transparent 30%);
  animation: rotate 4s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show on Hover */
.border-box:hover::before {
  opacity: 1;
}

/* 3. The Image + The Gap */
.border-box img {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 14px;
  
  /* THIS CREATES THE GAP */
  /* This border matches your site's background color */
  border: 4px solid #ffffff; 
  
  /* Optional: make the image pop slightly */
  transition: transform 0.3s ease;
}

.border-box:hover img {
  transform: scale(1.02);
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Desktop View (Default) */
.footer-flex-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-left-side { text-align: left; }
.footer-right-side { text-align: right; }