/*
 Theme Name:   Piers cc theme React
 Theme URI:    https://piers.cc
 Description:  A child theme
 Author:       Piers R-K
 Author URI:   https://piers.cc
 Template:     generatepress
 Version:      1.0.0
*/


/* For desktop screens (1024px and wider) */
@media (min-width: 1024px) {
    .post-password-form {
        width: 42%;
        margin: 100px auto;
			text-align: center;
    }
	.rounded {
	border-radius: 2rem;
	overflow: hidden;
}
}

/* For mobile screens (smaller than 1024px) */
@media (max-width: 1023px) {
    .post-password-form {
        width: 100%;
        margin: 20px auto;
			text-align: center;
    }
	.rounded {
	border-radius: 1rem;
	overflow: hidden;
}
}
.post-password-form input[type="submit"] {
		width: 240px;
	font-weight:600;
		border-radius: 0.5rem;
        display: block;
        margin: 20px auto;
	background-color: var(--accent)
    }

.post-password-form input[type="submit"]:hover {
	background-color: #176FDE;
    }

.featured-image, .post-image {
	  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	border: 1px solid #e5e7eb;    
	border-radius: 1rem;
	overflow: hidden;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}

.ring {
	border: 1px solid #e5e7eb;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Ensures the body is at least the height of the viewport */
    background-size: 100% 100vh; /* Stretch the background to cover the full viewport height */
    background-repeat: no-repeat;
    background: rgb(240,238,246);
    background: linear-gradient(0deg, rgba(240,238,246,1) 0%, rgba(251,254,255,1) 100%);
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

.widget_categories {
    padding: 0;
    background-color: transparent;
}

.resize-featured-image .post-image img {
   margin: -11px;
}

.entry-summary {
    margin-top: 1rem !important;
}

.blog .post, .category .post {
    padding: 20px 20px 0;
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    background-color: #ffffff
}

.sidebar .widget {
        border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
}

.hfeed .post .inside-article {
padding: 0;
}

@media (max-width: 768px) {
    .hfeed .post {
        padding: 12px 12px 0;
        margin: 6px
    }
}

.mobile-menu-control-wrapper {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background-color: #ffffff !important;
}

.site-navigation {
    background-color: #ffffff !important;
}

.has-inline-mobile-toggle #site-navigation.toggled {
        border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background-color: #ffffff !important;
}

.post .entry-content {
    max-width: 700px;
}

.hover-grow {
    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.hover-grow:hover {
  transform: scale(1.005);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);

}

.gb-container.linked-container {
    position: relative;
        transition: box-shadow 0.3s ease;
}
.gb-container.linked-container:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.gb-container.linked-container a:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}
.gb-container.linked-container a {
    text-decoration:none;
}
.gb-container.linked-container a:hover {
    color: #fff;
    text-decoration:underline;
    
}
.gb-container.linked-container h2 {
    margin-bottom: 0;
}

.wp-block-separator {
    border-color: #dedede;
}


.sub-menu {
  border-radius: 1rem;
  border: 1px solid #e5e5e5;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  background: #fff;
  padding: 0.5rem 0;
  min-width: 12rem;
  margin-top: 0.25rem;
}

/* Dark mode – matches dark:border-neutral-800, dark:bg-gray-800 */
@media (prefers-color-scheme: dark) {
  .sub-menu {
    border-color: #262626;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.2);
    background: #1f2937; /* gray-800 */
  }
}

/* Optional: if your theme uses a .dark class on body/html instead of prefers-color-scheme */
.dark .sub-menu,
[data-theme="dark"] .sub-menu {
  border-color: #262626;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.2);
  background: #1f2937;
}

/* Sub-menu links – align with home page link styling */
.sub-menu a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #525252; /* neutral-600 */
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}

.sub-menu a:hover {
  color: #2563eb; /* blue-600 */
  background-color: #f5f5f5;
}

.dark .sub-menu a,
[data-theme="dark"] .sub-menu a,
@media (prefers-color-scheme: dark) {
  .sub-menu a {
    color: #a3a3a3; /* neutral-400 */
  }
  .sub-menu a:hover {
    color: #60a5fa; /* blue-400 */
    background-color: rgba(31, 41, 55, 0.5);
  }
}

/* Mobile: keep sub-menu away from screen edges */
@media (max-width: 640px) {
  .main-navigation ul .sub-menu {
        margin:0.75rem;
        width:94%!important;
  }
}