/*
Theme Name: Sessionale Portfolio
Theme URI: https://github.com/Sessionale/sessionale-portfolio
GitHub Theme URI: Sessionale/sessionale-portfolio
Primary Branch: main
Author: Sessionale
Author URI: https://www.sessionale.de
Description: Migrate from Adobe Portfolio to WordPress. Import all your projects, images, and videos with one click. Perfect for creatives and artists who want to own their portfolio website. Features responsive grid layout, dark/light mode, and contact form with spam protection. Includes GDPR/DSGVO compliance recommendations with suggested plugins for cookie consent and local font hosting.
Version: 1.1.2
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sessionale-portfolio
Tags: portfolio, photography, one-column, two-columns, custom-menu, featured-images, theme-options, translation-ready, blog
*/

/* ==========================================================================
   CSS Custom Properties (Light/Dark Theme)
   ========================================================================== */

:root {
    /* Light Theme (Default) */
    --color-bg: #ffffff;
    --color-bg-secondary: #fafafa;
    --color-bg-tertiary: #f5f5f5;
    --color-text: #333333;
    --color-text-secondary: #666666;
    --color-text-muted: #999999;
    --color-border: #e0e0e0;
    --color-border-light: #f0f0f0;
    --color-link: #333333;
    --color-link-hover: #000000;
    --color-accent: #2271b1;
    --color-success: #28a745;
    --color-error: #dc3545;
    --color-overlay: rgba(255, 255, 255, 0.98);
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-shadow-strong: rgba(0, 0, 0, 0.15);
    --color-input-bg: #fafafa;
    --color-button-bg: #1a1a1a;
    --color-button-text: #ffffff;
    --color-button-hover: #333333;

    /* Transitions */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark Theme */
[data-theme="dark"] {
    --color-bg: #121212;
    --color-bg-secondary: #1e1e1e;
    --color-bg-tertiary: #2a2a2a;
    --color-text: #e4e4e4;
    --color-text-secondary: #b0b0b0;
    --color-text-muted: #808080;
    --color-border: #3a3a3a;
    --color-border-light: #2a2a2a;
    --color-link: #e4e4e4;
    --color-link-hover: #ffffff;
    --color-accent: #5fa8d3;
    --color-success: #4caf50;
    --color-error: #f44336;
    --color-overlay: rgba(18, 18, 18, 0.98);
    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-shadow-strong: rgba(0, 0, 0, 0.5);
    --color-input-bg: #2a2a2a;
    --color-button-bg: #e4e4e4;
    --color-button-text: #121212;
    --color-button-hover: #ffffff;
}

/* CSS Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    transition: var(--theme-transition);
}

body.menu-open {
    overflow: hidden;
}

/* WordPress Admin Bar Adjustments */
.admin-bar .main-navigation .primary-menu {
    top: 32px;
    height: calc(100vh - 32px);
}

.admin-bar .menu-toggle.is-active {
    top: 42px; /* 32px admin bar + 10px padding */
}

@media screen and (max-width: 782px) {
    .admin-bar .main-navigation .primary-menu {
        top: 46px;
        height: calc(100vh - 46px);
    }

    .admin-bar .menu-toggle.is-active {
        top: 56px; /* 46px admin bar + 10px padding */
    }
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
    color: var(--color-link-hover);
    opacity: 0.8;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Header Styles */
.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    padding: 10px 20px;
    text-align: center;
    background-color: var(--color-bg);
    transition: background-color 0.3s ease;
}

/* Header background change on scroll */
.site-header.scrolled {
    background-color: var(--color-bg-tertiary);
}

/* Sticky header adjustment for WordPress admin bar */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* Navigation */
.main-navigation {
    margin: 0;
    position: relative;
}

.main-navigation ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.main-navigation a {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* Burger Menu Button */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.burger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
}

.burger-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    transition: all 0.3s ease;
}

/* Burger icon animation when open */
.menu-toggle.is-active .burger-icon span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.is-active .burger-icon span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active .burger-icon span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile and Tablet: Show burger, hide menu by default */
@media (max-width: 1024px) {
    .menu-toggle {
        display: block;
        margin: 0 0 0 auto;
        position: relative;
        z-index: 1001;
    }

    .main-navigation .primary-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        background: var(--color-overlay);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding: 0;
        z-index: 1000;
        transition: var(--theme-transition);
    }

    .main-navigation .primary-menu.is-open {
        display: flex;
    }

    .main-navigation .primary-menu li {
        text-align: center;
    }

    .main-navigation .primary-menu a {
        display: block;
        padding: 20px 40px;
        font-size: 24px;
        font-weight: 400;
        letter-spacing: 2px;
    }

    .main-navigation .primary-menu a:hover {
        opacity: 0.6;
    }

    /* Keep burger visible above fullscreen menu */
    .menu-toggle.is-active {
        position: fixed;
        top: 10px;
        right: 20px;
        left: auto;
        margin: 0;
    }
}

/* Desktop: Hide burger, show menu */
@media (min-width: 1025px) {
    .menu-toggle {
        display: none !important;
    }

    .main-navigation .primary-menu {
        display: flex !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 30px !important;
        padding: 0 !important;
    }

    .main-navigation .primary-menu a {
        padding: 0 !important;
        font-size: 14px !important;
    }
}

/* Main Content */
.site-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Remove padding on mobile and tablet */
@media (max-width: 1024px) {
    .site-content {
        padding: 0;
    }
}

/* Portfolio Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 6px;
    margin-bottom: 60px;
}

/* Column variations for shortcode */
.portfolio-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.portfolio-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.portfolio-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.portfolio-item {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg-tertiary);
    transition: transform 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-5px);
}

.portfolio-item a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.portfolio-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-border);
}

.portfolio-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-item:hover .portfolio-thumbnail img {
    transform: scale(1.05);
}

.portfolio-placeholder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Portfolio Overlay - shows on hover */
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    color: #1a1a1a;
}

.portfolio-year {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
    margin-top: 8px;
}

/* Dark mode overlay */
[data-theme="dark"] .portfolio-overlay {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .portfolio-title {
    color: #ffffff;
}

[data-theme="dark"] .portfolio-year {
    color: rgba(255, 255, 255, 0.8);
}

.portfolio-item-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.portfolio-item-content {
    padding: 20px;
}

.portfolio-item-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}

.portfolio-item-year {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.portfolio-item-category {
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

/* Active menu item styling */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: var(--color-link-hover);
    font-weight: 600;
}

/* Single Portfolio Project */
.single-portfolio-content {
    max-width: 100%;
    padding: 0;
}

.single-portfolio {
    width: 100%;
}

/* Project Header */
.single-portfolio .project-header {
    max-width: 900px;
    margin: 60px auto 50px;
    padding: 0 40px;
    text-align: center;
}

.project-title {
    font-size: 42px;
    font-weight: 300;
    letter-spacing: -0.5px;
    margin-bottom: 15px;
    color: var(--color-text);
}

.project-meta {
    font-size: 13px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.project-meta span {
    display: inline-block;
}

/* Project Gallery / Content Area */
.project-gallery {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

.project-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Credits Block */
.project-content .portfolio-credits {
    max-width: 700px;
    margin: 0 auto 40px;
    padding: 30px 40px;
    background: var(--color-bg-secondary);
    border-radius: 4px;
    text-align: center;
    transition: var(--theme-transition);
}

.project-content .portfolio-credits p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin-bottom: 5px;
}

.project-content .portfolio-credits p:last-child {
    margin-bottom: 0;
}

/* Images in Project Content */
.project-gallery figure.wp-block-image {
    margin: 0;
    width: 100%;
}

.project-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

/* Videos in Project Content */
.project-gallery figure.wp-block-video {
    margin: 0;
    width: 100%;
}

.project-gallery video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
    background: #000;
}

/* YouTube/Vimeo Embeds */
.project-gallery .wp-block-embed,
.project-gallery iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 2px;
}

.project-gallery .wp-block-embed iframe {
    width: 100%;
    height: 100%;
}

/* Button Links */
.project-content .wp-block-buttons {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.project-content .wp-block-button__link {
    background: var(--color-button-bg);
    color: var(--color-button-text);
    padding: 14px 32px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 3px;
    transition: background 0.3s ease;
}

.project-content .wp-block-button__link:hover {
    background: var(--color-button-hover);
    opacity: 1;
}

/* Project Navigation */
.project-navigation {
    max-width: 1000px;
    margin: 80px auto 0;
    padding: 40px 60px;
    border-top: 1px solid var(--color-border);
}

.project-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-navigation .nav-previous,
.project-navigation .nav-next {
    flex: 1;
}

.project-navigation .nav-next {
    text-align: right;
}

.project-navigation .nav-home {
    flex: 0 0 auto;
}

.project-navigation .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-secondary);
    padding: 10px 0;
    transition: color 0.3s ease;
}

.project-navigation .nav-link:hover {
    color: var(--color-text);
    opacity: 1;
}

.project-navigation .nav-link-home {
    background: var(--color-button-bg);
    color: var(--color-button-text);
    padding: 12px 24px;
    border-radius: 3px;
}

.project-navigation .nav-link-home:hover {
    background: var(--color-button-hover);
    color: var(--color-button-text);
}

.project-navigation .nav-arrow {
    font-size: 18px;
}

/* ==========================================================================
   Layout Modes
   ========================================================================== */

/* Auto Layout - True Masonry using CSS Columns */
.layout-auto .project-content {
    display: block;
    column-count: 3;
    column-gap: 20px;
}

/* All items in masonry */
.layout-auto .project-content > * {
    break-inside: avoid;
    margin-bottom: 20px;
}

/* Landscape items span full width - break out of columns */
.layout-auto .project-content .media-landscape {
    column-span: all;
}

/* Ensure landscape videos are full width */
.layout-auto .project-content figure.wp-block-video.media-landscape,
.layout-auto .project-content figure.wp-block-image.media-landscape {
    column-span: all;
    width: 100%;
    max-width: 100%;
}

/* When ALL content is landscape, single column behavior */
.layout-auto .project-content.all-landscape {
    column-count: 1;
}

/* Portrait items flow naturally in columns */
.layout-auto .project-content .media-portrait {
    width: 100%;
}

/* Credits block always full width */
.layout-auto .project-content .portfolio-credits {
    column-span: all;
}

/* Buttons always full width */
.layout-auto .project-content .wp-block-buttons {
    column-span: all;
}

/* YouTube/Vimeo embeds - full width by default */
.layout-auto .project-content .wp-block-embed {
    column-span: all;
}

.layout-auto .project-content .wp-block-embed.media-portrait {
    column-span: none;
}

/* Full Width Layout - Single column */
.layout-full-width .project-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.layout-full-width .project-content figure,
.layout-full-width .project-content .wp-block-embed {
    width: 100%;
}

/* Grid Layout - Always 3 columns masonry */
.layout-grid .project-content {
    display: block;
    column-count: 3;
    column-gap: 20px;
}

.layout-grid .project-content > * {
    break-inside: avoid;
    margin-bottom: 20px;
}

.layout-grid .project-content .portfolio-credits,
.layout-grid .project-content .wp-block-buttons {
    column-span: all;
}

/* Portrait media items styling */
.media-portrait img,
.media-portrait video {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Ensure proper aspect ratios are maintained */
.layout-auto .project-content figure.media-portrait,
.layout-grid .project-content figure {
    aspect-ratio: auto;
    overflow: hidden;
}

/* Video containers */
.layout-auto .project-content figure.wp-block-video.media-portrait video,
.layout-grid .project-content figure.wp-block-video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Masonry layout stays 3 columns on all devices (same as source) */

/* ==========================================================================
   Gallery Row Layout (JavaScript-based smart masonry)
   ========================================================================== */

.gallery-row {
    display: flex;
    gap: 20px;
    width: 100%;
    align-items: stretch;
}

.gallery-row figure {
    margin: 0;
    overflow: hidden;
}

.gallery-row figure img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 2px;
    object-fit: cover;
}

/* Compact row - 4 items (L+P+L+P pattern) with equal widths */
.gallery-row-compact {
    height: 25vw; /* Height relative to viewport width for consistent aspect */
    max-height: 350px;
    min-height: 180px;
    align-items: stretch;
}

.gallery-row-compact figure {
    overflow: hidden;
    flex: 1 1 0;
    min-width: 0;
}

.gallery-row-compact figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* ==========================================================================
   Portfolio Lightbox
   ========================================================================== */

.portfolio-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.portfolio-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.portfolio-lightbox .lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-lightbox .lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-lightbox .lightbox-content img.loaded {
    opacity: 1;
}

.portfolio-lightbox .lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: transparent;
    border: none;
    color: white;
    font-size: 40px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    z-index: 10001;
}

.portfolio-lightbox .lightbox-close:hover {
    opacity: 1;
}

.portfolio-lightbox .lightbox-prev,
.portfolio-lightbox .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: transparent;
    border: none;
    color: white;
    font-size: 50px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    z-index: 10001;
}

.portfolio-lightbox .lightbox-prev {
    left: 20px;
}

.portfolio-lightbox .lightbox-next {
    right: 20px;
}

.portfolio-lightbox .lightbox-prev:hover,
.portfolio-lightbox .lightbox-next:hover {
    opacity: 1;
}

/* Mobile lightbox adjustments */
@media (max-width: 768px) {
    .portfolio-lightbox .lightbox-prev,
    .portfolio-lightbox .lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 30px;
    }

    .portfolio-lightbox .lightbox-close {
        width: 40px;
        height: 40px;
        font-size: 30px;
        top: 10px;
        right: 10px;
    }
}

/* Footer */
.site-footer {
    padding: 40px 20px;
    text-align: center;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg);
    transition: var(--theme-transition);
    margin-top: 0px;
}

.footer-text {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 20px;
}

/* Footer Menu */
.footer-menu {
    margin: 20px 0;
}

.footer-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-menu-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu-list a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-menu-list a:hover {
    color: var(--color-text);
}

/* Import Notice */
.import-notice {
    background-color: #f0f9ff;
    border-left: 4px solid #0ea5e9;
    padding: 20px;
    margin: 20px 0;
    border-radius: 4px;
}

.import-notice h3 {
    margin-bottom: 10px;
    color: #0369a1;
}

.import-notice a {
    color: #0ea5e9;
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .project-gallery {
        padding: 0 40px;
    }

    .project-navigation {
        padding: 40px;
    }
}

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .portfolio-grid.columns-2,
    .portfolio-grid.columns-3,
    .portfolio-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-header {
        padding: 10px 20px;
    }

    /* Single Portfolio Mobile */
    .single-portfolio .project-header {
        margin: 40px auto 30px;
        padding: 0 20px;
    }

    .project-title {
        font-size: 28px;
    }

    .project-meta {
        gap: 15px;
        font-size: 11px;
    }

    .project-gallery {
        padding: 0 20px;
    }

    .project-content {
        gap: 15px;
    }

    .project-content .portfolio-credits {
        padding: 20px;
        margin-bottom: 25px;
    }

    .project-navigation {
        margin-top: 50px;
        padding: 30px 20px;
    }

    .project-navigation .nav-link {
        font-size: 12px;
    }

    .project-navigation .nav-link-home {
        padding: 10px 18px;
    }
}

@media (max-width: 480px) {
    .portfolio-grid,
    .portfolio-grid.columns-2,
    .portfolio-grid.columns-3,
    .portfolio-grid.columns-4 {
        grid-template-columns: 1fr;
    }

    .project-title {
        font-size: 24px;
    }

    .project-navigation .nav-links {
        flex-direction: column;
        gap: 20px;
    }

    .project-navigation .nav-previous,
    .project-navigation .nav-next {
        text-align: center;
    }
}

/* Loading Animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Contact Form Styles
   ========================================================================== */

.sessionale-contact-form {
    width: 100%;
    max-width: none;
}

.sessionale-contact-form .form-group {
    margin-bottom: 30px;
}

.sessionale-contact-form label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: var(--color-text);
}

.sessionale-contact-form input[type="text"],
.sessionale-contact-form input[type="email"],
.sessionale-contact-form textarea {
    width: 100%;
    padding: 18px 20px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
    background: var(--color-input-bg);
    color: var(--color-text);
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.sessionale-contact-form input[type="text"]:focus,
.sessionale-contact-form input[type="email"]:focus,
.sessionale-contact-form textarea:focus {
    outline: none;
    border-color: var(--color-text);
    background: var(--color-bg);
    box-shadow: 0 0 0 3px var(--color-shadow);
}

.sessionale-contact-form input[type="text"]::placeholder,
.sessionale-contact-form input[type="email"]::placeholder,
.sessionale-contact-form textarea::placeholder {
    color: var(--color-text-muted);
}

.sessionale-contact-form textarea {
    resize: vertical;
    min-height: 200px;
}

.sessionale-contact-form .submit-button {
    background: var(--color-button-bg);
    color: var(--color-button-text);
    border: none;
    padding: 18px 50px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    width: 100%;
}

.sessionale-contact-form .submit-button:hover {
    background: var(--color-button-hover);
    transform: translateY(-1px);
}

/* On larger screens, button doesn't need to be full width */
@media (min-width: 768px) {
    .sessionale-contact-form .submit-button {
        width: auto;
        min-width: 200px;
    }
}

.sessionale-contact-form .contact-success {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-success);
    color: var(--color-success);
    padding: 20px;
    border-radius: 4px;
    text-align: center;
}

.sessionale-contact-form .contact-error {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-error);
    color: var(--color-error);
    padding: 20px;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
}

/* Honeypot field — visually hidden but reachable so bots will fill it */
.sessionale-contact-form .contact-hp-field {
    position: absolute !important;
    left: -10000px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sessionale-contact-form .contact-recaptcha-notice {
    margin-top: 20px;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.sessionale-contact-form .contact-recaptcha-notice a {
    color: inherit;
    text-decoration: underline;
}

/* ==========================================================================
   Contact Page Layout
   ========================================================================== */

.contact-page-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Side by side on tablet and desktop - form gets more space */
@media (min-width: 768px) {
    .contact-page-layout {
        grid-template-columns: 200px 1fr;
        gap: 50px;
        align-items: start;
    }

    .contact-page-info {
        position: sticky;
        top: 40px;
    }

    .contact-page-form {
        min-width: 0;
    }
}

@media (min-width: 1024px) {
    .contact-page-layout {
        grid-template-columns: 240px 1fr;
        gap: 70px;
    }
}

@media (min-width: 1400px) {
    .contact-page-layout {
        grid-template-columns: 280px 1fr;
        gap: 100px;
    }
}

/* ==========================================================================
   Contact Info
   ========================================================================== */

.contact-info {
    text-align: left;
    margin-bottom: 0;
}

.contact-info p {
    margin: 0 0 8px 0;
    font-size: 15px;
    line-height: 1.5;
}

.contact-info .contact-name {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.3;
}

.contact-info .contact-phone,
.contact-info .contact-email {
    font-size: 14px;
}

.contact-info a {
    color: var(--color-text);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.contact-info a:hover {
    opacity: 0.7;
}

/* Mobile: center contact info */
@media (max-width: 767px) {
    .contact-info {
        text-align: center;
    }

    .contact-info .contact-name {
        font-size: 24px;
    }
}

/* ==========================================================================
   Social Links
   ========================================================================== */

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--color-text);
    color: var(--color-bg);
    opacity: 1;
}

.social-links svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ==========================================================================
   Page Styles
   ========================================================================== */

.page .site-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 0px;
}

.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page h6 {
    color: var(--color-text);
}

.page h1 {
    font-size: 36px;
    font-weight: 300;
    text-align: center;
    margin-bottom: 40px;
}

.page h2 {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 20px;
}

.page p {
    margin-bottom: 20px;
    line-height: 1.8;
    color: var(--color-text);
}

/* Entry content - ensure all text uses theme colors */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content span,
.entry-content div {
    color: var(--color-text);
}

.entry-content a {
    color: var(--color-link);
}

.entry-content a:hover {
    color: var(--color-link-hover);
}

@media (max-width: 768px) {
    .page .site-content {
        padding: 40px 20px;
    }

    .page h1 {
        font-size: 28px;
    }
}

/* ==========================================================================
   About Page Layout
   ========================================================================== */

/* Override default page width for About page */
.page-template-default .about-main-section,
.page-template-default .about-image-grid {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Main section: image + text side by side */
.about-main-section {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 50px;
}

.about-image {
    flex: 0 0 40%;
    max-width: 350px;
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
}

.about-text {
    flex: 1;
}

.about-text p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
    color: var(--color-text);
}

.about-text p:last-child {
    margin-bottom: 0;
}

/* About page image grid - Masonry style */
.about-image-grid {
    column-count: 3;
    column-gap: 15px;
    margin-top: 50px;
}

.about-grid-item {
    margin: 0 0 15px 0;
    overflow: hidden;
    break-inside: avoid;
    border-radius: 4px;
}

.about-grid-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.about-grid-item:hover img {
    transform: scale(1.02);
    filter: brightness(1.05);
}

/* Tablet: 2 columns for grid */
@media (max-width: 900px) {
    .about-main-section {
        gap: 30px;
    }

    .about-image {
        flex: 0 0 35%;
        max-width: 280px;
    }

    .about-image-grid {
        column-count: 2;
        column-gap: 12px;
    }

    .about-grid-item {
        margin-bottom: 12px;
    }
}

/* Mobile: single column */
@media (max-width: 600px) {
    .about-main-section {
        flex-direction: column;
        gap: 25px;
    }

    .about-image {
        flex: none;
        max-width: 250px;
        margin: 0 auto;
    }

    .about-text {
        text-align: center;
    }

    .about-image-grid {
        column-count: 2;
        column-gap: 10px;
    }

    .about-grid-item {
        margin-bottom: 10px;
    }
}

/* ==========================================================================
   Dark Mode Toggle
   ========================================================================== */

.theme-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 50px;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    box-shadow: 0 4px 15px var(--color-shadow);
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-shadow-strong);
}

.theme-toggle-icon {
    width: 20px;
    height: 20px;
    position: relative;
}

.theme-toggle-icon svg {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    fill: currentColor;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

.theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="dark"] .theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0) scale(1);
}

[data-theme="dark"] .theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

.theme-toggle-text {
    display: none;
}

@media (min-width: 768px) {
    .theme-toggle-text {
        display: inline;
    }
}

/* Mobile positioning */
@media (max-width: 767px) {
    .theme-toggle {
        bottom: 20px;
        right: 20px;
        padding: 10px 12px;
    }
}

/* Prevent FOUC (Flash of Unstyled Content) */
html:not([data-theme]) {
    visibility: hidden;
}

html[data-theme] {
    visibility: visible;
}