/**
 * RM_A Theme Custom Styles
 *
 * TYPOGRAPHY ARCHITECTURE:
 * All text formatting (font-family, font-size, color, line-height, etc.) is
 * defined ONLY in this file. Patterns and plugins should use CSS classes
 * without inline styles or WordPress block attributes for typography.
 *
 * SECTION OVERVIEW:
 * 1. Typography (Central definitions for all text elements)
 * 2. Base Styles
 * 3. Header Styles
 * 4. Footer Styles
 * 5. Project Grid (Home Page)
 * 6. Project Page Styles
 * 7. Image Gallery Styles
 * 8. Related Projects
 * 9. Page Styles
 * 10. Accessibility
 */

/* ==========================================================================
   1. TYPOGRAPHY - Central text formatting definitions
   All font-family, font-size, color, and text-transform rules are defined here.
   ========================================================================== */

/* Prevent browser faux bold/italic rendering */
* {
    font-synthesis: none;
}

/* --- Section Titles (Gallery, Related Projects, etc.) --- */
.rma-section-title,
.rma-gallery-title,
.rma-related-projects-title {
    font-family: 'NudicaMono_Bold', monospace;
    font-weight: 700;
    font-size: 14px;
    color: #343434;
    margin: 30px 0 15px 0;
    padding: 0;
}

.rma-related-projects-title {
    margin: 0 0 20px 0; /* Override for related projects context */
}

/* --- Navigation Typography --- */
.rma-nav-language {
    font-family: 'InterV', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #545454;
}

.rma-nav-footer {
    font-family: 'InterV', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #545454;
}

/* --- Search & Filter Typography --- */
.rma-search-container input[type="text"],
.rma-search-container input[type="search"] {
    font-family: 'NudicaMono_Regular', monospace;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    color: #343434;
}

/* Active/focused search field - white text on black background */
.rma-search-container input[type="text"]:focus,
.rma-search-container input[type="search"]:focus {
    color: #ffffff;
    background-color: #343434;
}

.rma-search-container input::placeholder {
    color: #949494;
    text-transform: uppercase;
}

/* --- Project Grid Typography (Home Page) --- */
.rma-project-type {
    font-family: 'NudicaMono_Regular', monospace;
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase;
    color: #747474;
}

.rma-project-title {
    font-family: 'NudicaMono_Light', monospace;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.4;
    color: #545454;
}

/* --- Project Page Header Typography --- */
.rma-project-header-title {
    font-family: 'NudicaMono_Medium', monospace;
    font-weight: 500;
    font-size: 20px;
    color: #343434;
}

.rma-project-header-location {
    font-family: 'NudicaMono_Medium', monospace;
    font-weight: 500;
    font-size: 20px;
    color: #747474;
}

.rma-project-header-data {
    font-family: 'NudicaMono_Regular', monospace;
    font-weight: 400;
    font-size: 15px;
    color: #747474;
    white-space: pre-line;
}

/* --- Project Text Typography --- */
.rma-project-text,
.rma-project-text p {
    font-family: 'NudicaMono_Regular', monospace;
    font-weight: 400;
    font-size: 15px;
    color: #343434;
    line-height: 1.5;
}

.rma-project-text a {
    color: #343434;
    text-decoration: underline;
}

.rma-project-text a:hover {
    color: #545454;
}

/* --- Expand Toggle Typography --- */
.rma-expand-toggle {
    font-family: 'NudicaMono_Medium', monospace;
    font-weight: 500;
    font-size: 36px;
    color: #343434;
}

/* --- Image Caption Typography --- */
.rma-image-caption {
    font-family: 'NudicaMono_Regular', monospace;
    font-weight: 400;
    font-size: 8px;
    color: #747474;
}

.rma-image-title {
    text-align: left;
}

.rma-image-copyright {
    text-align: right;
}

/* --- Page Content Typography --- */
.rma-page-content h1 {
    font-family: 'NudicaMono_Medium', monospace;
    font-weight: 500;
    font-size: 20px;
    color: #343434;
}

.rma-page-content p {
    font-family: 'NudicaMono_Regular', monospace;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: #343434;
}

/* ==========================================================================
   2. BASE STYLES
   ========================================================================== */

/* CSS variable for dynamic header height (set by JavaScript) */
:root {
    --rma-header-height: 150px;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Hide empty paragraph tags (often created by wpautop) */
p:empty {
    display: none;
}

/* Sticky footer: main content grows to push footer down */
/* min-height uses calc to account for header, ensuring footer stays in viewport */
.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--rma-header-height));
    margin-top: var(--rma-header-height);
    transition: margin-top 0.3s ease;
}

.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group[class*="content"],
.rma-front-page-content {
    flex: 1 0 auto;
}

.wp-site-blocks > footer,
.rma-footer {
    flex-shrink: 0;
}

/* ==========================================================================
   Header Styles
   ========================================================================== */

.rma-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.8);
    max-height: 150px;
    transition: all 0.3s ease;
}

.rma-header-inner {
    width: 100%;
}

.rma-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.rma-logo {
    transition: transform 0.3s ease;
}

.rma-site-logo-link {
    display: block;
    text-decoration: none;
}

.rma-logo img,
.rma-site-logo {
    width: 200px;
    height: auto;
    transition: width 0.3s ease;
}

/* Header shrink state - applies to all pages on scroll */
.rma-header.is-scrolled {
    max-height: 90px;
}

.rma-header.is-scrolled .rma-logo img,
.rma-header.is-scrolled .rma-site-logo {
    width: 150px; /* 75% of 200px */
}

/* Hide entire main menu when scrolled */
.rma-header.is-scrolled .rma-main-menu {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Language Menu */
.rma-language-menu {
    text-align: right;
}

/* Typography for .rma-nav-language defined in Section 1 */

.rma-language-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 15px;
    justify-content: flex-end;
    align-items: center;
}

.rma-language-list li {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.rma-nav-language a {
    color: #545454;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rma-nav-language a:hover {
    color: #343434;
}

.rma-language-list .current-lang a {
    color: #343434;
    font-weight: 700;
}

.rma-lang-flag {
    width: 16px;
    height: auto;
    vertical-align: middle;
}

/* Main Menu - align to left edge of content block */
.rma-main-menu {
    margin-top: 12px;
    min-height: 44px;
    display: flex;
    flex-wrap: wrap !important; /* Override WordPress is-nowrap */
    align-items: flex-start;
    gap: 0; /* No Row gap only, column spacing via margins */
    justify-content: flex-start;
}

.rma-search-container {
    flex-shrink: 0; /* Keep search field width, let filter buttons wrap */
    margin-right: 12px; /* Space before first filter button */
    transition: opacity 0.3s ease, visibility 0.3s ease, height 0.3s ease;
}

/* Search Field Styling - Typography defined in Section 1 */
.rma-search-container input[type="text"],
.rma-search-container input[type="search"] {
    border: 1px solid #343434;
    padding: 8px 12px;
    background: #ffffff;
}

/* Filter Container - use display:contents so buttons become direct flex children */
.rma-filter-container,
.wp-block-group.rma-filter-container,
.rma-main-menu .rma-filter-container {
    display: contents !important;
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */

.rma-footer {
    margin-top: auto;
    border: none !important;
    border-top: none !important;
}

.rma-footer-inner {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

/* Typography for .rma-nav-footer defined in Section 1 */

.rma-footer-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 15px;
    align-items: center;
}

.rma-footer-menu-list li {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.rma-nav-footer a {
    color: #545454;
    text-decoration: none;
}

.rma-nav-footer a:hover {
    color: #343434;
}

/* ==========================================================================
   Project Grid (Home Page)
   ========================================================================== */

.rma-project-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: var(--rma-grid-align-items, flex-start);
    justify-content: var(--rma-grid-justify-content, flex-start);
}

.rma-project-item {
    display: inline-block;
    vertical-align: top;
    margin-right: var(--rma-grid-gap-h, 8px);
    margin-bottom: var(--rma-grid-gap-v, 8px);
    transition: opacity 0.2s ease;
}

/* Project links - all variants use block display */
.rma-project-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Thumbnail container (uses span for wpautop compatibility) */
.rma-project-thumbnail {
    display: block;
    overflow: hidden;
    background: #ffffff;
}

.rma-project-thumbnail img {
    width: calc(100% - var(--rma-thumbnail-padding, 0px) * 2);
    height: auto;
    display: block;
    transition: filter 0.3s ease, opacity 0.3s ease;
    margin: var(--rma-thumbnail-padding, 0px);
}

.rma-project-thumbnail.has-shadow img {
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 12px;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 12px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 12px;
}

/* Hover effect on thumbnail */
.rma-project-thumbnail-link:hover .rma-project-thumbnail img {
    filter: grayscale(100%);
    opacity: 0.7;
}

/* Video thumbnail styles */
.rma-project-thumbnail video {
    width: calc(100% - var(--rma-thumbnail-padding, 0px) * 2);
    height: auto;
    display: block;
    transition: filter 0.3s ease, opacity 0.3s ease;
    margin: var(--rma-thumbnail-padding, 0px);
    object-fit: cover;
}

.rma-project-thumbnail.has-shadow video {
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 12px;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 12px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 12px;
}

/* Hover effect on video thumbnail */
.rma-project-thumbnail-link:hover .rma-project-thumbnail video {
    filter: grayscale(100%);
    opacity: 0.7;
}

/* Project info container (uses span for wpautop compatibility) */
.rma-project-info {
    display: block;
    padding-top: 8px;
}

/* Typography for .rma-project-type and .rma-project-title defined in Section 1 */
.rma-project-type {
    display: block;
    margin-bottom: 2px;
}

.rma-project-title {
    display: block;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ==========================================================================
   Project Page Styles
   Note: .rma-project-single width is controlled by responsive.css breakpoints
   ========================================================================== */

/* Project Header - Typography defined in Section 1 */
.rma-project-header-title {
    margin: 0 0 5px 0;
}

.rma-project-header-location {
    margin: 0 0 15px 0;
}

.rma-project-header-data {
    margin: 0 0 20px 0;
}

/* Project Text Container - responsive width */
.rma-project-text-content {
    width: 100%;
}

/* Project Text - Typography defined in Section 1 */

/* Link Arrow */
.rma-link-arrow {
    display: inline;
    margin-right: 4px;
}

/* Expand/Collapse for Project Text 2 */
.rma-project-text-2-container {
    margin-top: 20px;
}

/* Typography for .rma-expand-toggle defined in Section 1 */
.rma-expand-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.3s ease, color 0.2s ease;
    margin-bottom: 15px;
    padding: 0;
}

.rma-expand-toggle:hover {
    color: #545454;
}

.rma-expand-toggle.is-expanded {
    transform: rotate(45deg);
}

.rma-project-text-2 {
    display: none;
    animation: fadeIn 0.3s ease;
}

.rma-project-text-2.is-visible {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   Image Gallery Styles
   Typography for .rma-gallery-title and .rma-image-caption defined in Section 1
   ========================================================================== */

/* Image Gallery Grid Layout
   Gap and margin values are set via CSS variables from backend settings.
   Responsive scaling is handled in responsive.css */
.rma-image-gallery {
    display: grid;
    grid-template-columns: repeat(var(--rma-gallery-columns, 4), 1fr);
    column-gap: calc(var(--rma-gallery-gap-h, 15px) * var(--rma-gallery-gap-scale, 1));
    row-gap: calc(var(--rma-gallery-gap-v, 15px) * var(--rma-gallery-gap-scale, 1));
    align-items: var(--rma-gallery-align, start);
    margin-bottom: calc(var(--rma-gallery-margin-bottom, 30px) * var(--rma-gallery-gap-scale, 1));
}

.rma-gallery-image,
.rma-main-image {
    position: relative;
    align-self: var(--rma-gallery-align, start); /* Uses align-items value from parent, defaults to start */
}

.rma-main-image {
    margin-bottom: 30px;
}

.rma-gallery-image img,
.rma-main-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Image Hover Captions - Typography in Section 1 */
.rma-image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: rgba(255, 255, 255, 0.9);
}

.rma-gallery-image:hover .rma-image-caption,
.rma-main-image:hover .rma-image-caption,
.rma-main-media:hover .rma-image-caption {
    opacity: 1;
}

/* ==========================================================================
   Main Media (Video & GIF)
   Shared styles for video and GIF main media elements
   ========================================================================== */

.rma-main-media {
    position: relative;
    margin-bottom: 30px;
    align-self: var(--rma-gallery-align, start);
}

.rma-main-media img,
.rma-main-media video {
    width: 100%;
    height: auto;
    display: block;
}

/* Video Player Container */
.rma-video-player {
    position: relative;
    background: #000;
}

.rma-video-element {
    display: block;
    cursor: pointer;
}

/* Video Controls Bar */
.rma-video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.rma-video-player:hover .rma-video-controls {
    opacity: 1;
}

/* Play/Pause Button */
.rma-video-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--wp--preset--color--rma-black, #343434);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.rma-video-play-btn:hover {
    color: var(--wp--preset--color--rma-gray-b, #747474);
}

.rma-video-play-btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--rma-black, #343434);
    outline-offset: 2px;
}

.rma-video-play-btn svg {
    display: block;
}

/* Timeline / Progress Bar */
.rma-video-timeline {
    flex: 1;
    height: 4px;
    background: var(--wp--preset--color--rma-gray-d, #aeaeae);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.rma-video-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--wp--preset--color--rma-black, #343434);
    border-radius: 2px;
    transition: width 0.1s linear;
}

.rma-video-timeline:hover {
    height: 6px;
}

.rma-video-timeline:hover .rma-video-progress {
    height: 100%;
}

/* ==========================================================================
   Related Projects
   Layout matches homepage project grid (flexbox with inline thumbnails).
   Uses CSS custom properties from backend settings via inline style.
   Typography for .rma-project-type and .rma-project-title defined in Section 1.
   ========================================================================== */

.rma-related-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: var(--rma-related-align, flex-start);
}

/* Related projects use the same .rma-project-item styles as homepage */
.rma-related-grid .rma-project-item {
    margin-right: var(--rma-related-gap-h, 8px);
    margin-bottom: var(--rma-related-gap-v, 8px);
}

/* ==========================================================================
   Scroll to Top
   ========================================================================== */

.rma-scroll-to-top-wrapper {
    text-align: center;
    padding: 40px 0;
}

.rma-scroll-to-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'NudicaMono_Light', monospace;
    font-weight: 300;
    font-size: 12px;
    color: #747474;
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

.rma-scroll-to-top:hover,
.rma-scroll-to-top:focus {
    color: #343434;
}

.rma-scroll-to-top-arrow {
    flex-shrink: 0;
}

/* ==========================================================================
   Page Styles
   Typography for .rma-page-content defined in Section 1
   ========================================================================== */

.rma-page-content h1 {
    margin-bottom: 30px;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus styles */
*:focus {
    outline: 2px solid #343434;
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 2px solid #343434;
    outline-offset: 2px;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #343434;
    color: #ffffff;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* Screen reader text */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}