/* #############################################################################
/* ####### AU Elements [Post]
/* #############################################################################
/*
--------------------------------------------------------------------------------
0 - Comon rules for heading and subheading throughout this file
--------------------------------------------------------------------------------
*/

.post-details__heading,
.popular-stories__heading,
.post-intro__heading,
.dest-intro__heading {
    font-size: 28px !important;
    font-weight: 300 !important; /* text-thin */
    color: #455a64 !important; /* text-slate */
    margin-bottom: 25px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-transform: none !important; /* Prevents all-caps */
    letter-spacing: normal !important;
}

/* Unified Icon Styling */
.post-details__heading i,
.popular-stories__icon,
.post-intro__heading i,
.dest-intro__heading i {
    color: #00bcd4 !important; /* Brand Teal */
    font-size: 24px !important;
    width: 30px;
    text-align: center;
}

/* --- Synchronized Body Indentation --- */

/* 1. The specific rule for Intro (Keep the Brand Teal line) */
.post-intro__content {
    padding-left: 35px;
    border-left: 2px solid #00bcd4;
    margin-bottom: 30px;
}

/* 2. Rules for Details, Dest Intro, and Contact (Remove ALL lines) */
.post-details__body,
.dest-intro__content,
.post-contact__body {
    padding-left: 35px; /* Keeps text aligned under heading text */
    border-left: none !important; 
    margin-bottom: 30px;
}

/* 3. Remove the light grey line rule entirely */
.post-details__body--no-title {
    border-left: none !important;
}

/* Responsive Scaling */
@media screen and (max-width: 768px) {
    .post-details__body,
    .post-intro__content,
    .dest-intro__content,
    .post-contact__body {
        padding-left: 20px;
    }
}

/*
--------------------------------------------------------------------------------
1 - Visual anchor, aUElm-post-featured-image.php
--------------------------------------------------------------------------------
*/
/*
--------------------------------------------------------------------------------
2 - Main article content, aUElm-post-body.php
--------------------------------------------------------------------------------
*/
/*
--------------------------------------------------------------------------------
3 - Table of contents, aUElm-post-toc.php
--------------------------------------------------------------------------------
*/
/*
--------------------------------------------------------------------------------
4 - Author, date, read time, aUElm-post-meta.php
--------------------------------------------------------------------------------
*/
/*
--------------------------------------------------------------------------------
5 - Topic discovery, aUElm-post-tags.php
--------------------------------------------------------------------------------
*/
/*
--------------------------------------------------------------------------------
6 - Image storytelling, aUElm-post-gallery.php
--------------------------------------------------------------------------------
*/
/*
--------------------------------------------------------------------------------
7 - Keep users reading, aUElm-post-related.php
--------------------------------------------------------------------------------
*/
/*
--------------------------------------------------------------------------------
8 - Social sharing, aUElm-post-share.php
--------------------------------------------------------------------------------
*/
/*
--------------------------------------------------------------------------------
9 - Trust & credibility, aUElm-author-box.php
--------------------------------------------------------------------------------
*/

/*
--------------------------------------------------------------------------------
10 - Introduction, aUElm-post-intro.php
--------------------------------------------------------------------------------
*/

/* Base Blocks */
.post-intro, 
.post-details {
    width: 100%;
    margin-bottom: 40px;
}

/* Content & Body Indentation - Responsive */
.post-intro__content,
.post-details__body {
    padding-left: 35px; /* Default Desktop */
    border-left: 2px solid #00bcd4;
    transition: padding 0.3s ease;
}

.post-details__body {
    border-left: 1px solid #eee; /* Subtle for details */
}

/* Mobile Breakpoint (768px and below) */
@media screen and (max-width: 768px) {
    .post-intro__heading {
        font-size: 22px; /* Smaller title for mobile */
    }

    .post-intro__content,
    .post-details__body {
        padding-left: 20px; /* Reduced padding so text has more room */
    }
    
    .text-size-17 {
        font-size: 16px !important; /* Slightly smaller text for readability */
    }
}

/* Small Mobile (480px and below) */
@media screen and (max-width: 480px) {
    .post-intro__content,
    .post-details__body {
        padding-left: 15px;
        border-left-width: 3px; /* Slightly thicker line for visual impact on small screens */
    }
}

/*
--------------------------------------------------------------------------------
11 - Post Details, aUElm-post-details.php
--------------------------------------------------------------------------------
*/

/* --- Post Details (Width & Mobile Responsive) --- */

/* Block: Full width container */
.post-details {
    width: 100%;
    margin-bottom: 40px;
    box-sizing: border-box;
}

/* Vertical Guide: Synchronized with Post Intro at 35px */
.post-details__body {
    padding-left: 35px; /* Matches post-intro padding */
    border-left: 2px solid #00bcd4; /* Brand Teal */
    margin-left: 0;
    transition: padding 0.3s ease;
}

/* Muted guide for sections without a title */
.post-details__body--no-title {
    border-left-color: #eee;
    padding-top: 5px;
}

.post-details__content {
    color: #555;
    font-weight: 400;
    word-wrap: break-word; /* Important for long email addresses on mobile */
    overflow-wrap: break-word;
}

/* --- Responsive Adjustments --- */

@media screen and (max-width: 768px) {
    .post-details__body {
        padding-left: 20px; /* Tablet: narrower padding */
    }
    
    .post-details__heading {
        font-size: 12px;
        letter-spacing: 1.2px;
    }
}

@media screen and (max-width: 480px) {
    .post-details__body {
        padding-left: 15px; /* Mobile: maximum space for text */
    }
    
    .text-size-16 {
        font-size: 15px !important; /* Slight downscale for small screens */
    }
}

/*
--------------------------------------------------------------------------------
12 - Post Details, aUElm-post-contact-form.php
--------------------------------------------------------------------------------
*/

/* --- Post Contact Form Styling --- */

.au-form {
    margin-top: 20px;
}

.au-form__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1b3a4b; /* Dark Slate from your Hero */
    margin-bottom: 8px;
}

.au-form__input, 
.au-form__textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #333;
    background: #fcfcfc;
    transition: all 0.3s ease;
}

.au-form__textarea {
    min-height: 120px;
    resize: vertical;
}

.au-form__input:focus, 
.au-form__textarea:focus {
    border-color: #00bcd4; /* Brand Teal Focus */
    background: #fff;
    outline: none;
    box-shadow: 0 0 8px rgba(0, 188, 212, 0.1);
}

.au-form__button {
    background: #1b3a4b; /* Dark Slate */
    color: #fff;
    border: none;
    padding: 15px 35px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.au-form__button:hover {
    background: #00bcd4; /* Brand Teal Hover */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 188, 212, 0.3);
}

/* Mobile Responsive adjustment for form padding */
@media screen and (max-width: 768px) {
    .au-form__button {
        width: 100%;
        justify-content: center;
    }
}