/**
Theme Name: Flitwick Living History
Author: Uncontainable
Author URI: https://uncontainable.co.uk
Description: A theme designed for Flitwick - A Living History by the team at Uncontainable.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flitwick-living-history
Template: astra
*/

/* HEADER STYLING */
/* MAIN MENU */
/* Link Spacing */
span.menu-image-title-below.menu-image-title {
    padding-top: 10px;
}

/*Breadcrums Styling*/
.ast-breadcrumbs-wrapper {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
	padding-right: 20px;
}

.ast-breadcrumbs {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 5px;
	padding-top: 5px;
    font-size: 16px;
}

/* TITLE STYLING */
/* Title Underlines */
/* .ftc-title-underline span.fl-heading-text {
    border-bottom: 5px solid #007177;
	padding-bottom: 3px; */
}

/* MAP STYLING */
/* Map Info Window Styling */
.flh-map-info-button {
    background-color: #007177 !important;
}

.flh-map-info-button:hover {
    background-color: #4d4d4d !important;
}

.flh-map-info-button a {
    color: #ffffff !important;
	text-decoration: none !important;
}

.flh-map-info-button a:hover {
    color: #ffffff !important;
	text-decoration: none !important;
}

/* HOME PAGE*/

.flh-history-posts-home img {
    /* height: 200px;
    width: 100%; */
	aspect-ratio: 3 / 2;
    object-fit: cover;
}

.flh-home-additions-posts {
    padding: 10px 10px 0px 10px;
}

.flh-home-additions-posts h3 {
    font-size: 18px;
}

.flh-home-additions-posts h5 {
    font-size: 16px;
}

.flh-info-box-categories .uabb-infobox-title-wrap {
    padding-left: 20px;
}

/* Category Boxes */
.flh-info-box-categories .uabb-image-content {
    width: 100%;
}

.flh-info-box-categories img {
    width: 100% !important;
	aspect-ratio: 1.3 / 1;
    object-fit: cover;
}

.history-category-children .history-cat-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2em;
}

/* Make the link wrapper 33% wide */
.history-category-children .history-cat-thumb {
  flex: 0 0 33%;
  max-width: 33%;
  margin-right: 20px;
  display: block;
}

/* Ensure the image fills the link container */
.history-category-children .history-cat-thumb img {
  width: 100%;
  height: auto;
}

/* Content takes the remaining space */
.history-category-children .history-cat-content {
  flex: 1;
  max-width: 67%;
}

/* HISTORY SINGLE */
/* Featured image description */
.featured-image-description {
    font-size: 14px;
    color: #555;
    font-style: italic;
	text-align: center;
}

.flh-history-featured-image {
    margin-bottom: 0px;
}


/* Gallery Images */
.pp-caption {
    color: #fff !important;
    background-color: var(--ast-global-color-0);
}

.fancybox-caption__body {
    text-transform: uppercase;
}

.pp-fancybox-desc {
    text-transform: capitalize;
    font-style: italic;
}

/* Share This Box */
.glh-heading-box-green {
    background-color: var(--ast-global-color-0);
    margin: 0px 20px;
}
.glh-icon-box-box {
    background-color: lightgray;
    margin: 0px 20px;
}

/* Comments */

/* 1. ENABLE FLEXBOX ON THE CONTAINER */
.ast-comment-list article.ast-comment {
    display: flex;
    flex-direction: column; /* Stack items vertically */
}

/* 2. ORDER: CONTENT FIRST (TOP) */
.ast-comment-content.comment {
    order: 1; 
    margin-bottom: 15px;    /* Space between bubble and author name */
    margin-top: 0;          /* Remove top spacing */
    position: relative;     /* Keep relative for the arrow */
    
    /* Bubble Styling from before */
    background-color: #f2f4f7;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    padding: 20px;
}

/* 3. ORDER: INFO SECOND (BOTTOM) */
.ast-comment-info {
    order: 2;
    padding-left: 10px;     /* Slight indent to align with the arrow */
    display: flex;
    align-items: center;    /* Align avatar and text vertically */
}

/* ------------------------------------------------------- */
/* THE SPEECH BUBBLE ARROW (POINTING DOWN LEFT)            */
/* ------------------------------------------------------- */

/* The Grey Border Triangle */
.ast-comment-content.comment::before {
    content: "";
    position: absolute;
    bottom: -32px;             /* Move to BOTTOM */
    left: 20px;                /* Position on the left side */
    width: 0; 
    height: 0; 
    border-style: solid;
    border-width: 16px;
    /* Transparent sides, Grey Top (Points DOWN) */
    border-color: #dcdcdc transparent transparent transparent; 
    display: block;
    z-index: 0;
    top: auto; /* Reset top if previously set */
}

/* The Color Overlay Triangle */
.ast-comment-content.comment::after {
    content: "";
    position: absolute;
    bottom: -30px;             /* 2px higher to cover the border */
    left: 21px;                /* Centered */
    width: 0; 
    height: 0; 
    border-style: solid;
    border-width: 15px;
    /* Transparent sides, Background Color Top (Points DOWN) */
    border-color: #f2f4f7 transparent transparent transparent; 
    display: block;
    z-index: 1;
    top: auto; /* Reset top if previously set */
}

/* Remove Avatar */
.ast-comment-avatar-wrap {
    display: none;
}

.ast-comment-meta {
    padding: 1em 3.4em 1.60em 1em;
}

/* Remove website from non-uswer comments */
p.comment-form-url {
    display: none;
}

/* GRAVITY FORMS */

span.dashicons.dashicons-trash {
    color: #000;
}