/*
 Theme Name:   Astra Child
 Template:     astra
 Version:      1.0.6
 Tags:        astra child, template
*/







/* Two-column card layout for medium posts */
.ofh-posts-medium-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 0;
  list-style: none;
}

.ofh-posts-medium-list li {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s ease;
}

.ofh-posts-medium-list li:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}

.ofh-posts-medium-list img {
  width: 60px;
  height: auto;
  flex-shrink: 0;
  border-radius: 4px;
}

.ofh-posts-medium-list h4 {
  font-size: 1rem;
  margin: 0 0 4px;
}

.ofh-posts-medium-list p {
  font-size: 0.875rem;
  line-height: 1.4;
  margin: 0;
}



@media (min-width: 768px) {
  .ofh-posts-medium-list {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* FROM Customizr */


.feature-block{
	    border: solid 2px var(--ast-global-color-1);
    border-radius: 20px;
    margin-bottom: 4em;
    padding: 20px 30px;
    background: #e3f0ef;
}
.vertical-buttons.uagb-buttons__outer-wrap .uagb-buttons__wrap{
	flex-direction: column;
}

#primary .genealogy-card__meta,
#primary .genealogy-archive-grid .genealogy-card.people,
#primary .genealogy-archive-grid .genealogy-card.story{
	margin-bottom: 0;
	padding-bottom:10px;}


.genealogy-card.family strong{
		float: right;
	margin: -25px 10px 0 0;
	border-right: solid 1px var(--ast-global-color-4);
	padding-right:  20px
}




/* ==========================================================================
   Component: Search & Browse Hero
   ========================================================================== */

  /* Container Box Styling */
.search-browse-hero {
   
    padding: 2rem;
    margin-bottom: 2rem;
}

/* Flex Wrapper: Handles Desktop 60/40 Split & Mobile Stacking */
.search-browse-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

/* Left Section - 60% Width */
.search-section {
    flex: 0 0 60%;
    max-width: 60%;
}

.search-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #426a65;
    margin: 0 0 0.25rem 0;
}

.search-subtitle {
    font-size: 1rem;
    color: #64748b;
    margin: 0 0 1.25rem 0;
}

/* Ensure WordPress default search form stretches full width */
.search-form-wrapper form {
    display: flex;
    width: 100%;
}

.search-form-wrapper input[type="search"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 1rem;
}

/* Right Section - Buttons Stacked */
.browse-buttons-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.browse-btn {
    display: block;
    text-align: center;
    background: var(--ast-global-color-1);
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    
    transition: background-color 0.2s ease;
    font-size: 1.4em;
    text-transform: uppercase;
}

.browse-btn:hover {
    background: var(--ast-global-color-2);

}
.browse-buttons-section a.browse-btn {
text-decoration: none;
}

/*  Reset the form layout using Grid to layer elements */
.search-form {
    position: relative;
    display: inline-block;
    width: 100%;
}

.search-form label {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
}

.search-form label > div{

  width: 100%

}

/* Style the input & leave room on the left for the icon */
.search-form .search-field {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem; /* 2.75rem padding creates space for the SVG */
    font-size: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background-color: #ffffff;
    color: #1e293b;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-form .search-field:focus {
    border-color: #426a65;
    box-shadow: 0 0 0 3px rgba(66, 106, 101, 0.15);
}

/*  Position the button inside the input on the left */
.search-form .search-submit.ast-search-submit {
    position: absolute;
    left: 12px;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    pointer-events: none; /* Clicking the icon focuses the input field */
    z-index: 2;
}

/* Color and size the Astra SVG icon */
.search-form .search-submit.ast-search-submit .ast-icon {
    width: 18px;
    height: 18px;
    fill: #64748b;
    display: flex;
}

.search-form .search-submit.ast-search-submit svg {
    width: 100%;
    height: 100%;
    fill: #64748b;
    float: right
}

/* Hide the second, redundant submit input button entirely */
.search-form input[type="submit"].search-submit {
    display: none !important;
}




/* Mobile Breakpoint: Stack Search on Top, Buttons Below */
@media (max-width: 768px) {
    .search-browse-container {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .search-section {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .browse-buttons-section {
        width: 100%;
    }
}  


/*search */

.genealogy-card__title{
	font-size: 1.2em
}
.genealogy-card__post_type{
	    color: var(--ast-global-color-1);
    background: var(--ast-global-color-4);
    display: inline-block;
    padding: 2px 5px;
    float: right;
    margin: -25px 8px 0 0;
    border: solid 1px var(--ast-global-color-3);
}
.home .wp-block-search label{
		margin-bottom: 20px;
    /* padding-bottom: 10px; */
    display: block;
    font-size: 1.2em;
}

.home .wp-block-search__inside-wrapper,
.home .wp-block-search__inside-wrapper >  div,
.home .wp-block-search__inside-wrapper  input{
	width: 100%
}

.home .wp-block-search__inside-wrapper  button{
padding: 0 20px !important;
}

/* Global */
	
	#main .home-main-links .uagb-button__wrapper{
		width: 300px;
		max-width: 96%
	}
	#main	.home-main-links .uagb-button__wrapper a{
	font-size: 1.4em;
	}



.search .ast-container section.ast-archive-description {
	background: var(--ast-global-color-4);
}

#primary	.ast-archive-description{
		background: var(--ast-global-color-4);
	}


#primary	.ast-archive-description{
		padding: 20px;
	}
	
	#primary .genealogy-archive-grid  .genealogy-card{
		padding: 0;
		width: 45%;
		max-width: 100%;
		border-bottom: solid 1px var(--ast-global-color-4);
    padding-bottom: 20px;
	}
@media all and (max-width: 768px){
	#primary .genealogy-archive-grid  .genealogy-card{
		padding: 0;
		width: 100%;
	}

	.ast-blog-layout-4-grid .ast-article-inner {
		box-shadow: none;
		padding: 0
	}
	
	/* Header */
	.site-title a, .site-title a:focus, .site-title a:hover, .site-title a:visited, .main-header-menu > .menu-item > .menu-link, .site-title a{
		font-size: 1.4rem;
	}
	.site-header .site-description {
	 font-size: .9rem
	}
	    header .custom-logo-link img, .ast-header-break-point .site-branding img, .ast-header-break-point .custom-logo-link img
 {
        max-width: 100px;
        width: 100px;
    }
	
	
	.ast-blog-layout-5-grid .ast-article-inner ,
		#primary #main	.ast-blog-layout-5-grid .ast-article-inner, 
	#primary #main article.ast-article-post {

    max-width: 100%;
    width: 98%;
box-shadow: none;
		        border: none;
        
	}
	
	.ast-blog-layout-5-grid .ast-article-inner{
		border-bottom: solid 1px #ccc;
	}
	
	
	#main article{
		padding: 10px
	}
	
	#main article h2{
			font-size: 1.2rem
	}
	

		.ast-separate-container .ast-blog-layout-5-grid .post-content{
	padding: 0px
}
	
.search .ast-container section.ast-archive-description {
	padding: 20px
}
	.search .ast-container section.ast-archive-description h1{
	font-size: 1.8rem
}
	
	
	
}