/**
 * AtlasReach - Additional Theme Styles
 *
 * Supplementary styles for components not in the main stylesheet.
 *
 * @package AtlasReach
 * @since   1.0.0
 */

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.ar-breadcrumbs {
    padding: var(--ar-spacing-lg) 0;
    font-size: 0.8125rem;
}

.ar-breadcrumbs__list {
    display: flex;
    align-items: center;
    gap: var(--ar-spacing-sm);
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.ar-breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: var(--ar-spacing-sm);
}

.ar-breadcrumbs__item::after {
    content: '/';
    color: var(--ar-medium-gray);
    font-size: 0.75rem;
}

.ar-breadcrumbs__item:last-child::after {
    content: none;
}

.ar-breadcrumbs__item a {
    color: var(--ar-gold-dark);
}

.ar-breadcrumbs__item a:hover {
    color: var(--ar-gold);
}

.ar-breadcrumbs__item--current {
    color: var(--ar-medium-gray);
    font-weight: 500;
}

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */

.ar-page-header {
    margin-bottom: var(--ar-spacing-2xl);
    padding-bottom: var(--ar-spacing-lg);
    border-bottom: 2px solid var(--ar-gold);
}

.ar-page-header__title {
    margin-bottom: 0;
}

.ar-page-header__description {
    color: var(--ar-medium-gray);
    margin-top: var(--ar-spacing-sm);
}

/* ==========================================================================
   HEADER SCROLLED STATE
   ========================================================================== */

.ar-header--scrolled {
    box-shadow: var(--ar-shadow-lg);
    height: 64px;
}

.ar-header--scrolled .ar-header__logo {
    height: 36px;
}

/* ==========================================================================
   COMMENTS
   ========================================================================== */

.comments-area {
    margin-top: var(--ar-spacing-3xl);
    padding: var(--ar-spacing-2xl);
    background: var(--ar-white);
    border: 1px solid var(--ar-light-gray);
    border-radius: var(--ar-radius-lg);
}

.comments-title {
    font-size: 1.5rem;
    margin-bottom: var(--ar-spacing-xl);
    padding-bottom: var(--ar-spacing-md);
    border-bottom: 2px solid var(--ar-gold);
}

.comment-list {
    list-style: none;
    padding: 0;
}

.comment-list .comment {
    padding: var(--ar-spacing-lg) 0;
    border-bottom: 1px solid var(--ar-light-gray);
}

.comment-list .comment:last-child {
    border-bottom: none;
}

.comment-author {
    display: flex;
    align-items: center;
    gap: var(--ar-spacing-md);
    margin-bottom: var(--ar-spacing-sm);
}

.comment-author .avatar {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.comment-author .fn {
    font-weight: 600;
    color: var(--ar-dark);
}

.comment-metadata {
    font-size: 0.8125rem;
    color: var(--ar-medium-gray);
    margin-bottom: var(--ar-spacing-md);
}

.comment-content {
    line-height: 1.7;
}

.comment-reply-link {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ar-gold-dark);
}

/* Comment form */
.comment-form label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: var(--ar-spacing-xs);
    color: var(--ar-dark);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem var(--ar-spacing-md);
    border: 2px solid var(--ar-light-gray);
    border-radius: var(--ar-radius-sm);
    font-family: var(--ar-font-primary);
    font-size: 0.9375rem;
    transition: border-color var(--ar-transition-fast);
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--ar-gold);
    box-shadow: 0 0 0 3px rgba(200, 169, 78, 0.15);
}

.comment-form .form-submit .submit {
    background: linear-gradient(135deg, var(--ar-gold), var(--ar-gold-dark));
    color: var(--ar-black);
    border: 2px solid var(--ar-gold);
    padding: 0.75rem 2rem;
    font-family: var(--ar-font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--ar-radius-sm);
    cursor: pointer;
    transition: all var(--ar-transition-fast);
}

.comment-form .form-submit .submit:hover {
    background: linear-gradient(135deg, var(--ar-gold-light), var(--ar-gold));
    box-shadow: var(--ar-shadow-gold);
}

/* ==========================================================================
   POST NAVIGATION
   ========================================================================== */

.post-navigation {
    margin-top: var(--ar-spacing-2xl);
    padding: var(--ar-spacing-xl);
    background: var(--ar-white);
    border: 1px solid var(--ar-light-gray);
    border-radius: var(--ar-radius-lg);
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: var(--ar-spacing-xl);
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ar-medium-gray);
    margin-bottom: var(--ar-spacing-xs);
}

.post-navigation .nav-title {
    font-weight: 600;
    color: var(--ar-dark);
}

/* ==========================================================================
   SEARCH FORM
   ========================================================================== */

.search-form {
    display: flex;
    gap: var(--ar-spacing-sm);
}

.search-form .search-field {
    flex: 1;
    padding: 0.75rem var(--ar-spacing-lg);
    border: 2px solid var(--ar-light-gray);
    border-radius: var(--ar-radius-sm);
    font-family: var(--ar-font-primary);
    font-size: 0.9375rem;
    transition: border-color var(--ar-transition-fast);
}

.search-form .search-field:focus {
    outline: none;
    border-color: var(--ar-gold);
    box-shadow: 0 0 0 3px rgba(200, 169, 78, 0.15);
}

.search-form .search-submit {
    background: linear-gradient(135deg, var(--ar-gold), var(--ar-gold-dark));
    color: var(--ar-black);
    border: 2px solid var(--ar-gold);
    padding: 0.75rem 1.5rem;
    font-family: var(--ar-font-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--ar-radius-sm);
    cursor: pointer;
    transition: all var(--ar-transition-fast);
}

.search-form .search-submit:hover {
    background: linear-gradient(135deg, var(--ar-gold-light), var(--ar-gold));
}

/* ==========================================================================
   MENU OPEN STATE
   ========================================================================== */

body.menu-open {
    overflow: hidden;
}

.ar-menu-toggle.is-active .ar-menu-toggle__bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.ar-menu-toggle.is-active .ar-menu-toggle__bar:nth-child(2) {
    opacity: 0;
}

.ar-menu-toggle.is-active .ar-menu-toggle__bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}