/*
Theme Name: Amy Abel SQL
Theme URI: https://amyabelsql.com
Author: Amy Abel
Author URI: https://amyabelsql.com
Description: A modern WordPress block theme for AmyAbelSQL.com -- database reliability, automation, and community.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amy-abel-sql
Tags: block-patterns, blog, custom-colors, custom-logo, editor-style, full-site-editing, one-column, two-columns, wide-blocks
*/

/* ============================================
   MOBILE FIRST RESET - Override WordPress styles
   ============================================ */

/* Force proper mobile viewport */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
}

/* Reset WordPress block layout constraints */
.wp-block-container, 
.wp-block-group, 
.wp-block-post-content,
.entry-content {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Fix WordPress theme.json layout overrides */
.wp-site-blocks, 
.wp-block-post-template,
.wp-block-query {
    max-width: 100% !important;
}

/* ============================================
   GLOBAL BASE STYLES
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
    color: var(--color-text-main);
    background-color: var(--color-bg-light);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Keyboard focus outline -- visible only for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Remove default focus ring for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Smooth color transitions for dark mode toggle on key elements */
.navbar,
.site-footer,
.widget-header,
.post-card,
.tool-card,
.hero-section,
main.container,
.sidebar .widget,
.tile {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

a {
    transition: color 0.2s ease;
}

/* ============================================
   TYPOGRAPHY - HEADINGS
   All headings use consistent sizing from theme.css
   ============================================ */

h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--color-text-heading);
    margin-bottom: var(--space-md);
    margin-top: var(--space-md);
}

/* Consistent h3 base styles */
h3 {
    font-size: var(--h3-size);
    font-weight: 600;
    line-height: var(--line-height-base);
    margin: 0 0 var(--space-sm);
    color: var(--color-text-heading);
}

/* ============================================
   LAYOUT CONTAINERS
   ============================================ */

.container {
    max-width: var(--max-width-main);
    margin: 0 auto;
}

main.container {
    background: var(--color-bg-card);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    margin-top: var(--space-md);
    /*margin-bottom: 0;*/
}

/* ============================================
   DEPRECATED - NAVIGATION DROPDOWNS (Moved to main navbar section)
   ============================================ */

/* Shared Dropdown Styles */
.github-dropdown,
.nav-links .categories-dropdown {
    position: relative;
    display: inline-block;
    padding-bottom: var(--space-sm);
    margin-bottom: calc(-1 * var(--space-sm));
}

.github-toggle,
.nav-links .categories-toggle {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s;
    font-size: var(--font-size-md);
    font-weight: 500;
    margin-left: var(--space-md);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    display: inline-block;
    padding-bottom: var(--space-sm);
}

.github-toggle:hover,
.nav-links .categories-toggle:hover {
    opacity: 0.8;
}

.github-menu,
.nav-links .categories-menu {
    position: absolute;
    top: calc(100% - var(--space-sm));
    left: 0;
    background-color: var(--color-secondary);
    min-width: var(--dropdown-min-width);
    box-shadow: var(--shadow-lg);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-links .categories-menu {
    min-width: var(--dropdown-min-width-categories);
    z-index: 1001;
}

.github-dropdown:hover .github-menu,
.github-menu:hover,
.nav-links .categories-dropdown:hover .categories-menu,
.nav-links .categories-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.github-menu li,
.nav-links .categories-menu li {
    border-bottom: 1px solid var(--overlay-white-10);
}

.github-menu li:last-child,
.nav-links .categories-menu li:last-child {
    border-bottom: none;
}

.github-menu li a,
.nav-links .categories-menu li a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-size: var(--font-size-md);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    margin: 0;
}

.github-menu li a:hover,
.nav-links .categories-menu li a:hover {
    background-color: var(--overlay-white-10);
}

/* ============================================
   NAVIGATION - TABLET RESPONSIVE (1024px)
   ============================================ */

@media (max-width: 1024px) {
    .navbar nav a,
    .nav-links .categories-toggle,
    .github-toggle {
        font-size: var(--font-size-sm);
        margin-left: var(--space-sm);
        letter-spacing: var(--letter-spacing-wide);
    }

    .social-icons {
        gap: var(--space-xs);
    }

    .social-icons a {
        width: var(--social-icon-size-tablet);
        height: var(--social-icon-size-tablet);
    }

    .social-icons svg {
        width: var(--social-icon-size-tiny);
        height: var(--social-icon-size-tiny);
    }

    .logo-section {
        gap: var(--space-sm);
    }
}

/* ============================================
   NAVIGATION - MAIN NAVBAR
   ============================================ */

.navbar {
    background-color: var(--color-secondary);
    color: #ffffff;
    padding: var(--space-lg) 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-md);
}

.nav-content {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Ensures the logo and links stay aligned as you grow the height */
    max-width: var(--max-width-main);
    padding: 0 var(--space-md);
}

.navbar nav a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s;
    font-size: var(--font-size-md);
    font-weight: 500;
    margin-left: var(--space-md);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    white-space: nowrap;
}

/* Hide mobile menu toggle on desktop */
.menu-toggle {
    display: none;
}

.hamburger {
    display: none;
}

/* Dark Mode Toggle */
.dark-mode-toggle {
    background: none;
    border: 2px solid var(--overlay-white-30);
    color: #ffffff;
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
    flex-shrink: 0;
}

.dark-mode-toggle:hover {
    border-color: var(--color-primary);
    background: var(--focus-ring-primary-medium);
}

/* Nav Brand Logo (right corner) */
.nav-brand-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.nav-brand-img {
    height: 36px;
    width: auto;
    border-radius: var(--radius-sm);
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.nav-brand-img:hover {
    opacity: 1;
}

/* Logo */
.logo {
    font-size: var(--h2-size);
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: var(--letter-spacing-tight);
    white-space: nowrap;
}

/* Logo Section with Social Icons */
.logo-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
}

/* Social Media Icons in Header */
.social-icons {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.social-icons a {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--social-icon-size);
    height: var(--social-icon-size);
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    margin-left: 0;
    text-transform: none;
}

.social-icons a:hover {
    background-color: var(--overlay-white-15);
    transform: translateY(-2px);
}

.social-icons svg {
    width: var(--social-icon-size-small);
    height: var(--social-icon-size-small);
    fill: currentColor;
}

.hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 3;
    gap: var(--space-sm);
    text-align: left;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: flex-start;
    margin-top: var(--space-md);
}

.hero-cta .btn-primary,
.hero-cta .btn-secondary {
    min-width: var(--btn-min-width);
    text-align: center;
    white-space: nowrap;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero-section {
    background: var(--color-bg-card);
    padding: var(--space-lg) var(--space-lg);
    max-width: var(--max-width-main);
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* About Page Hero -- clean white background */
.about-hero {
    background: var(--color-bg-card);
    color: var(--color-text-main);
    padding: var(--space-md) var(--space-lg);
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--color-border);
}

.about-hero .hero-container {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.about-hero .hero-left {
    align-items: center;
    width: 100%;
    max-width: 44rem;
}

.about-hero h1 {
    color: var(--color-text-heading);
    text-align: center;
    font-size: var(--h1-size);
}

.about-hero .hero-subtext {
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0;
    max-width: min(36rem, 100%);
    font-size: var(--font-size-lg);
}

.hero-eyebrow {
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-eyebrow);
    text-transform: uppercase;
    margin: 0 0 var(--space-xs);
    color: var(--color-primary);
}

/* ============================================
   ABOUT PAGE - CONTENT LAYOUT
   ============================================ */

.about-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    background: var(--color-bg-light);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border-top: 3px solid var(--color-primary);
}

/* Profile Card -- photo + bio side by side */
.about-profile-card {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
}

.about-photo-wrap {
    flex-shrink: 0;
    width: var(--about-photo-size);
    height: calc(var(--about-photo-size) * 1.3);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.about-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.about-bio {
    flex: 1;
    min-width: 0;
}

.about-bio h2 {
    font-size: var(--h2-size);
    color: var(--color-text-heading);
    margin: 0 0 var(--space-xs);
}

.about-role {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: 600;
    margin: 0 0 var(--space-md);
    letter-spacing: var(--letter-spacing-normal);
}

.about-bio p {
    /*color: var(--color-text-secondary);*/
    line-height: var(--line-height-base);
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-md);
}

.about-quote {
    border-left: 3px solid var(--color-accent-alt);
    padding: var(--space-xs) var(--space-md);
    margin: var(--space-sm) 0 0;
    font-style: italic;
    font-weight: 600;
    color: var(--color-text-heading);
    line-height: var(--line-height-base);
    background: var(--color-bg-alt);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--font-size-sm);
}

/* Social Buttons Row */
.about-social-row {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-md);
}

.about-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    min-height: var(--button-min-height);
}

.about-social-btn:hover {
    transform: translateY(-1px);
}

/* About Image Banner */
.about-image-banner {
    border-radius: var(--radius-md);
    overflow: hidden;
    max-height: var(--about-image-banner-height);
}

.about-image-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

/* About Section Cards */
.about-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.about-section-card {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
    padding: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.about-section-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.about-section-icon {
    flex-shrink: 0;
    width: var(--section-icon-size);
    height: var(--section-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--focus-ring-primary);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
}

.about-section-icon svg {
    width: var(--section-icon-svg-size);
    height: var(--section-icon-svg-size);
}

.about-section-text {
    flex: 1;
    min-width: 0;
}

.about-section-text h3 {
    margin-top: 0;
    margin-bottom: var(--space-sm);
    color: var(--color-text-heading);
    font-weight: 600;
}

.about-section-text p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    margin: 0;
    font-size: var(--font-size-md);
}

.hero-container {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xl);
    background: none;
    border: none;
    box-shadow: none;
}


.tool-header {
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-widest);
}

/* Hide mobile-only nav links on desktop */
.mobile-nav-only {
    display: none;
}

/* Unified Video Cards - Simple & Consistent */
.tool-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.25s ease;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.tool-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primary);
}

.tool-card .video-container,
.tool-card .social-media-container,
.tool-card .podcast-image-container,
.tool-card .instagram-feed-container {
    position: relative;
    width: 100%;
    height: var(--post-thumbnail-height);
    background: var(--color-bg-dark);
    overflow: hidden;
    display: block;
}

.podcast-fallback {
    display: block;
    width: 100%;
    height: 100%;
}

.podcast-fallback img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tool-card .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.tool-card .social-media-container svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--icon-size-featured);
    height: var(--icon-size-featured);
    fill: #ffffff;
}

/* Instagram feed container base -- tool-card scoped rule above handles aspect ratio */

.instagram-feed-card .zoom-instagram {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
}

.instagram-feed-card .zoom-instagram-widget__header,
.instagram-feed-card .zoom-instagram-widget__follow-me {
    display: none;
}

.instagram-feed-card .zoom-instagram-widget__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2px;
    height: 100%;
}

.instagram-feed-card .zoom-instagram-widget__items .zoom-instagram-link {
    position: relative;
    overflow: hidden;
}

.instagram-feed-card .zoom-instagram-widget__items img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instagram-feed-card video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    background: var(--color-secondary);
}

.instagram-feed-card .zoom-instagram-widget__footer {
    visibility: hidden;
}

.instagram-feed-container ul,
.instagram-feed-container li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.instagram-feed-container > ul > li > img,
.instagram-feed-container img:not(.zoom-instagram-link img) {
    display: none;
}

.instagram-feed-container .zoom-instagram-widget__items img {
    display: block;
}

.instagram-feed-card {
    cursor: pointer;
}

.instagram-feed-card .zoom-instagram-widget__overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.instagram-feed-card:hover .zoom-instagram-widget__overlay {
    opacity: 1;
}

.instagram-feed-card .zoom-instagram-date {
    display: none;
}

.instagram-feed-card .svg-icon {
    width: var(--space-lg);
    height: var(--space-lg);
}

.instagram-feed-card .metadata a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.instagram-feed-card .metadata a:hover {
    color: var(--color-primary);
}

.podcast-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tool-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    padding: var(--space-lg) var(--space-lg) var(--space-sm);
    color: var(--color-text-heading);
    letter-spacing: -0.01em;
}

.tool-card .metadata {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0 var(--space-lg) var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: auto;
}

.tool-card:hover h3 {
    color: var(--color-primary);
}

.hero-container h1 {
    margin: 0;
    text-align: left;
    font-size: var(--h1-size);
}

.hero-subtext {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-base);
    color: var(--color-text-secondary);
    margin: var(--space-sm) 0 var(--space-md) 0;
}

.hero-right { flex: 3; }

.hero-left p {
    margin: 0;
    line-height: var(--line-height-base);
    /*color: var(--color-text-secondary);*/
}

.hero-left ul {
    margin: 0;
    padding-left: var(--space-lg);
    list-style-type: disc;
}

.hero-left li {
    margin-bottom: var(--space-xs);
    line-height: var(--line-height-base);
    color: var(--color-text-main);
}

.hero-left em {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.hero-left a:not(.btn-primary):not(.btn-secondary) {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.hero-left a:not(.btn-primary):not(.btn-secondary):hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.hero-image {
    width: 100%;
    max-height: var(--hero-image-max-height);
    object-fit: cover;
    /*object-position: center bottom;*/
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    margin-left: auto;
}

/* ============================================
   CONTENT LAYOUT - MAIN SECTIONS
   ============================================ */

/* Home Page Layout */
.home-layout {
    max-width: var(--max-width-main);
    margin: 0 auto;
}

/* Home page sidebar -- compact version */
.home-layout .sidebar {
    gap: var(--space-sm);
}

.home-layout .sidebar .widget-header {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
}

.home-layout .sidebar .widget-body {
    padding: var(--space-sm);
}

.home-layout .sidebar .about-me-logo {
    max-width: 120px;
    margin-bottom: var(--space-sm);
}

.home-layout .sidebar .about-name {
    font-size: var(--h3-size);
}

.home-layout .sidebar .about-title {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-xs);
}

.home-layout .sidebar .about-link {
    font-size: var(--font-size-xs);
    padding: var(--space-xs) var(--space-sm);
}

.monthly-tools {
    padding: 0;
    border-radius: 0;
    border-top: none;
    margin-bottom: var(--space-xl);
}

.monthly-tools .section-header {
    margin: 0 0 var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.main-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
}

.monthly-tools .section-header h2 {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
    display: block;
    font-size: var(--h2-size);
    font-weight: 700;
    color: var(--color-text-heading);
    letter-spacing: -0.02em;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    width: 100%;
    align-items: stretch;
}

/* Shared Components */
.card, .widget, .post-card, .tool-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Content & Sidebar */
.content-wrapper {
    max-width: var(--max-width-main);
    margin: 0 auto var(--section-spacing);
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(200px, 1fr);
    gap: var(--content-gap);
    padding: 0 var(--space-md);
    align-items: start;
}

.content-wrapper > * {
    min-width: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--content-gap);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.section-header h2,
.section-title {
    font-weight: 700;
    margin-bottom: var(--content-gap);
    letter-spacing: var(--letter-spacing-tight);
}

/* Blog Feed Section */
.blog-feed {
    width: 100%;
    /*background: var(--color-bg-main);*/
    padding: 0;
    border-radius: 0;
    border-top: none;
}

.blog-header {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.blog-feed .section-title {
    margin: 0 0 var(--space-sm) 0;
    padding-bottom: 0;
    border-bottom: none;
    display: block;
    font-size: var(--h2-size);
    font-weight: 700;
    color: var(--color-text-heading);
    letter-spacing: -0.02em;
}

.blog-subtitle {
    margin: var(--space-xs) 0 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: var(--line-height-base);
}

/* Blog page -- hide redundant sidebar search (blog has its own filter bar) */
.blog-page-layout .search-widget {
    display: none;
}

/* Blog listing -- compact horizontal post cards (image left, content right) */
.blog-feed .post-card {
    flex-direction: row;
    align-items: stretch;
}

.blog-feed .post-card .post-thumbnail {
    flex-shrink: 0;
    width: 180px;
    max-height: none;
}

.blog-feed .post-card .post-thumbnail:empty,
.blog-feed .post-card .post-thumbnail:not(:has(img)) {
    display: none;
}

.blog-feed .post-card .wp-block-post-featured-image {
    max-height: none;
    height: 100%;
}

.blog-feed .post-card .wp-block-post-featured-image a {
    height: 100%;
}

.blog-feed .post-card .wp-block-post-featured-image img,
.blog-feed .post-card .post-thumbnail img {
    height: 100%;
    width: 180px;
    object-fit: cover;
}

.blog-feed .post-card .post-content {
    flex: 1;
    min-width: 0;
    padding: var(--space-md);
    gap: var(--space-xs);
}

.blog-page-layout .post-card .wp-block-post-title,
.blog-page-layout .post-card .post-content h3 {
    font-size: var(--font-size-md);
}

.blog-page-layout .post-card .wp-block-post-excerpt {
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.blog-page-layout .post-card .wp-block-post-excerpt__more-link {
    font-size: var(--font-size-xs);
    padding: var(--space-xs) var(--space-sm);
    min-height: auto;
}

/* Blog toolbar -- search + sort row */
.blog-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: flex-end;
    margin-bottom: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* Category pill buttons */
.blog-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    padding: var(--space-sm) 0;
}

.category-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.category-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--focus-ring-primary);
}

.category-pill.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.category-pill.is-active .pill-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.pill-count {
    font-size: var(--font-size-xs);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    padding: 0.1em 0.5em;
    border-radius: var(--radius-full);
    font-weight: 700;
    line-height: 1.4;
}

/* Category badges on post cards */
.post-category-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.category-badge {
    display: inline-block;
    padding: 0.15em 0.6em;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-primary);
    background: var(--focus-ring-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1.6;
}

.category-badge:hover {
    background: var(--color-primary);
    color: #ffffff;
}

.search-bar {
    position: relative;
    flex: 1 1 300px;
    min-width: 250px;
}

.search-bar input {
    width: 100%;
    padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    background: var(--color-bg-card);
    color: var(--color-text-main);
    transition: all 0.2s ease;
    font-weight: 400;
}

.search-bar input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

.search-bar input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-card);
    box-shadow: 0 0 0 4px var(--focus-ring-primary);
}

.search-bar .search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
    opacity: 0.6;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 1 auto;
}

.filter-group label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.filter-group select {
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    background: var(--color-bg-card);
    color: var(--color-text-main);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 180px;
    font-weight: 500;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.filter-group select:hover {
    border-color: var(--color-primary);
    background-color: var(--color-bg-card);
}

.filter-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-bg-card);
    box-shadow: 0 0 0 4px var(--focus-ring-primary);
}

.blog-results-info {
    margin-bottom: var(--space-lg);
    padding: var(--space-sm) var(--space-xs);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-results-info span {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Blog Search Results -- API-driven cards */
.blog-search-results {
    display: flex;
    flex-direction: column;
}

.no-results-message {
    padding: var(--space-xl);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

/* Comments Section */
.comments-section {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.comments-title {
    font-size: var(--h2-size);
    font-weight: 700;
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

.wp-block-comment {
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
}

.comment-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.comment-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.wp-block-comment-author-name {
    font-weight: 600;
    font-size: var(--font-size-md);
    color: var(--color-text-heading);
}

.wp-block-comment-date {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.wp-block-comment-content {
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    font-size: var(--font-size-md);
}

.wp-block-comment-reply-link a {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.wp-block-comment-reply-link a:hover {
    color: var(--color-primary-dark);
}

/* Contact Page Layout */
.contact-page-layout {
    max-width: var(--max-width-main);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-hero {
    border-bottom: 1px solid var(--color-border-light);
}

.contact-reasons {
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border-light);
}

.contact-reasons h2 {
    margin-top: 0;
    margin-bottom: var(--space-md);
    font-size: var(--h2-size);
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
    color: var(--color-text-main);
    font-weight: 500;
    line-height: var(--line-height-base);
    transition: background-color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.contact-list li:hover {
    background: var(--focus-ring-primary);
    border-color: var(--color-primary);
}

.contact-list li.active {
    background: var(--focus-ring-primary);
    border-color: var(--color-primary);
}

.contact-list li svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary);
}

.contact-notice {
    background: var(--color-bg-alt);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: var(--space-sm) var(--space-md);
}

.contact-notice p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
}

.contact-notice a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-notice a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.contact-form-section {
    padding: var(--space-lg) 0;
}

.contact-form-section .section-title {
    text-align: center;
    margin-bottom: var(--space-xl);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
}

.contact-form-section .wpcf7 {
    max-width: var(--form-max-width);
    margin: 0 auto;
}

.content-filter {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.filter-btn {
    background-color: var(--color-bg-card);
    color: var(--color-text-main);
    border: 2px solid var(--color-border);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-sm);
    font-weight: 600;
    min-height: var(--button-min-height);
}

.filter-btn.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 2px 8px var(--focus-ring-primary-strong);
}

.filter-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--focus-ring-primary-medium);
}

.filter-btn.active:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #ffffff;
}

/* ============================================
   SHARED COMPONENTS - CARDS
   ============================================ */

.post-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    /*margin-bottom: var(--space-lg);*/
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: all 0.25s ease;
    padding: 0;
}

.post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primary);
}

/* Featured image -- full width banner at top of card */
.post-card .post-thumbnail {
    margin: 0;
    overflow: hidden;
    max-height: var(--post-thumbnail-height);
    background: var(--color-bg-light);
}

.post-card .post-thumbnail:empty,
.post-card .post-thumbnail:not(:has(img)) {
    display: none;
}

body .post-card .wp-block-post-featured-image {
    margin: 0;
    padding: 0;
    line-height: 0;
    max-height: var(--post-thumbnail-height);
    overflow: hidden;
}

.post-card .wp-block-post-featured-image a {
    display: block;
    line-height: 0;
}

body .post-card .wp-block-post-featured-image img,
body .post-card .post-thumbnail img {
    width: 100%;
    height: var(--post-thumbnail-height);
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
    border-radius: 0;
}

.post-card:hover .wp-block-post-featured-image img,
.post-card:hover .post-thumbnail img {
    transform: scale(1.08);
    opacity: 0.95;
}

/* Card content area */
.post-card .post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    gap: var(--space-sm);
}

/* Post title -- WordPress renders as .wp-block-post-title */
.post-card .wp-block-post-title,
.post-card .post-content h3 {
    margin: 0;
    color: var(--color-text-heading);
    line-height: 1.3;
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
}

body .post-card .wp-block-post-title a,
body .post-card .post-content h3 a {
    color: var(--color-text-heading);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline;
    background-image: linear-gradient(transparent calc(100% - 2px), var(--color-primary) 2px);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 0.3s ease;
}

body .post-card .wp-block-post-title a:hover,
body .post-card .post-content h3 a:hover {
    color: var(--color-primary);
    background-size: 100% 100%;
}

/* Date meta */
.post-card .meta,
.post-card .wp-block-post-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    order: -1;
}

/* Single Post Content -- responsive containment */
.blog-feed {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.blog-feed pre,
.blog-feed code {
    overflow-x: auto;
    max-width: 100%;
}

.blog-feed pre {
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    -webkit-overflow-scrolling: touch;
}

.blog-feed table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
    border-collapse: collapse;
}

.blog-feed iframe,
.blog-feed video,
.blog-feed embed,
.blog-feed object {
    max-width: 100%;
}

.blog-feed figure {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.blog-feed figure img {
    max-width: 100%;
    height: auto;
}

.blog-feed .wp-block-image {
    max-width: 100%;
}

.blog-feed .wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* Single Post Featured Image */
.blog-feed > .wp-block-post-featured-image {
    margin: var(--space-lg) 0;
}

.blog-feed > .wp-block-post-featured-image img {
    max-height: var(--single-post-image-max-height);
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* Social Share Buttons */
.social-share {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: var(--space-md) 0;
    padding: var(--space-sm) 0;
}

.social-share-top {
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-lg);
}

.share-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-right: var(--space-sm);
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.share-btn:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
}

.share-btn:active {
    transform: scale(0.95);
}

.share-btn svg {
    width: 18px;
    height: 18px;
}

.share-twitter:hover {
    background: rgba(29, 161, 242, 0.1);
    color: #1DA1F2;
}

.share-linkedin:hover {
    background: rgba(0, 119, 181, 0.1);
    color: var(--color-linkedin);
}

.share-facebook:hover {
    background: rgba(24, 119, 242, 0.1);
    color: #1877F2;
}

.share-email:hover {
    background: rgba(99, 110, 114, 0.1);
    color: var(--color-text-secondary);
}

.share-copy:hover {
    background: var(--focus-ring-primary);
    color: var(--color-primary);
}

.share-btn.copied {
    background: var(--color-success-bg);
    color: var(--color-success);
}

@media (max-width: 768px) {
    .social-share {
        gap: var(--space-xs);
    }
    
    .share-btn {
        width: 32px;
        height: 32px;
    }
    
    .share-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Excerpt text */
.post-card .wp-block-post-excerpt {
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-size: var(--font-size-md);
    margin: var(--space-xs) 0 0 0;
}

.post-card .wp-block-post-excerpt p {
    margin: 0;
    line-height: 1.6;
}

/* Read More button */
body .post-card .wp-block-post-excerpt__more-link,
body .post-card a.wp-block-post-excerpt__more-link,
body article.post-card .wp-block-post-excerpt__more-link {
    display: inline-flex;
    align-items: center;
    margin-top: var(--space-md);
    padding: var(--space-xs) var(--space-lg);
    background-color: var(--color-primary);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    font-size: var(--font-size-sm);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    text-align: center;
    min-height: var(--button-min-height);
}

body .post-card .wp-block-post-excerpt__more-link:hover,
body .post-card a.wp-block-post-excerpt__more-link:hover,
body article.post-card .wp-block-post-excerpt__more-link:hover {
    background-color: var(--color-primary-dark);
    color: #ffffff;
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--focus-ring-primary-strong);
}


/* ============================================
   PAGINATION
   ============================================ */

.wp-block-post-template {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wp-block-query-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--color-border);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--button-min-height);
    min-height: var(--button-min-height);
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-bg-card);
    color: var(--color-text-main);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-md);
    transition: all 0.2s ease;
}

.wp-block-query-pagination a:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--focus-ring-primary-medium);
}

.wp-block-query-pagination .current,
.wp-block-query-pagination .page-numbers.current {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    font-weight: 700;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    font-weight: 700;
    padding: var(--space-xs) var(--space-lg);
}

/* ============================================
   SIDEBAR
   ============================================ */

/* Mobile sidebar toggle & close -- hidden on desktop */
.sidebar-toggle,
.sidebar-close,
.sidebar-overlay {
    display: none;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.sidebar .widget {
    transition: box-shadow 0.3s ease;
}

.sidebar .widget:hover {
    box-shadow: var(--shadow-md);
}

.widget-header, .tool-header {
    background: var(--color-secondary);
    color: #ffffff;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.widget-icon {
    flex-shrink: 0;
    opacity: 0.9;
}

.widget-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.6s ease;
}

.widget:hover .widget-header::after {
    left: 100%;
}

.widget-body, .tool-body {
    padding: var(--space-md);
    background: var(--color-bg-card);
}

/* Sessionize Event Widget */
.sessionize-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Sidebar Video List */
.video-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sidebar-video {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Straight Path Links */
.straight-path-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-linkedin);
    color: #ffffff;
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease, transform 0.2s ease;
    min-height: var(--button-min-height);
}

.sp-btn:hover {
    background: #005a8c;
    transform: translateY(-1px);
}

.video-thumb-link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    text-decoration: none;
    color: var(--color-text-main);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
    transition: all 0.3s ease;
}

.video-thumb-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--color-text-main);
}

.video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.video-thumbnail {
    width: var(--video-thumb-width);
    height: var(--video-thumb-height);
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.social-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.social-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.social-media-container {
    width: 100%;
    height: var(--social-media-height);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.social-instagram {
    background: var(--color-instagram-gradient);
}

.social-youtube {
    background: var(--color-youtube);
}

.tool-card .social-youtube {
    background: var(--color-youtube);
}

.tool-card .instagram-feed-container {
    background: var(--color-instagram-gradient);
}

.video-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: var(--line-height-compact);
    color: #ffffff;
}

/* Sidebar Trending Articles */
.widget-body .wp-block-latest-posts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    counter-reset: trending-counter;
}

.widget-body .wp-block-latest-posts li {
    counter-increment: trending-counter;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 var(--space-xs);
    padding: var(--space-sm);
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-border-light);
    transition: background 0.2s ease;
    position: relative;
    border-radius: var(--radius-sm);
}



.widget-body .wp-block-latest-posts li::before {
    content: counter(trending-counter, decimal-leading-zero);
    font-size: var(--font-size-md);
    font-weight: 800;
    color: var(--color-primary);
    line-height: var(--line-height-compact);
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
    opacity: 0.3;
}

.widget-body .wp-block-latest-posts li:last-child {
    border-bottom: none;
}

.widget-body .wp-block-latest-posts li:hover {
    background: var(--color-bg-alt);
}

.widget-body .wp-block-latest-posts a {
    color: var(--color-text-main);
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: var(--line-height-compact);
    display: block;
    flex: 1;
}

.widget-body .wp-block-latest-posts a:hover {
    color: var(--color-primary);
}

.widget-body .wp-block-latest-posts__post-date {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 0;
    letter-spacing: var(--letter-spacing-normal);
}

/* Professional Search Widget */
.search-widget {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.search-widget .widget-body {
    padding: var(--space-md);
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    padding-right: var(--search-input-padding-right);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    font-family: inherit;
    background-color: var(--color-bg-light);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--focus-ring-primary);
}

.search-input::placeholder {
    color: var(--color-text-muted);
}

.search-button {
    position: absolute;
    right: var(--search-button-right);
    background: var(--color-primary);
    border: none;
    color: #ffffff;
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    min-height: 2rem;
}

.search-button:hover {
    background-color: var(--color-primary-dark);
}

/* WordPress Search Block Styling */
.wp-block-search {
    width: 100%;
}

.wp-block-search .wp-block-search__input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    font-family: inherit;
    background-color: var(--color-bg-light);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-search .wp-block-search__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--focus-ring-primary);
}

.wp-block-search .wp-block-search__button {
    background: var(--color-primary);
    border: none;
    color: #ffffff;
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    min-height: 2rem;
}

.wp-block-search .wp-block-search__button:hover {
    background-color: var(--color-primary-dark);
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-light);
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
    border: none;
    background: transparent;
    padding-right: var(--space-2xl);
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__input:focus {
    box-shadow: none;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--focus-ring-primary);
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    position: absolute;
    right: var(--space-xs);
}


/* Sidebar Elements */
.category-list, .recent-posts, .sidebar-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* WordPress categories widget styling */
.category-list li,
.widget_categories ul li,
.widget li.cat-item,
.wp-block-categories li,
.sidebar-category-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
    transition: all 0.2s ease;
}

.category-list li:last-child,
.widget_categories ul li:last-child,
.widget li.cat-item:last-child,
.wp-block-categories li:last-child,
.sidebar-category-list li:last-child {
    border-bottom: none;
}

.category-list li:hover,
.widget_categories ul li:hover,
.widget li.cat-item:hover,
.wp-block-categories li:hover,
.sidebar-category-list li:hover {
    background-color: var(--color-bg-alt);
    padding-left: var(--space-md);
}

.category-list a,
.widget_categories a,
.widget li.cat-item a,
.wp-block-categories a,
.sidebar-category-list a {
    color: var(--color-text-main);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-sm);
    flex: 1;
    transition: color 0.2s ease;
}

.category-list a:hover,
.widget_categories a:hover,
.widget li.cat-item a:hover,
.wp-block-categories a:hover,
.sidebar-category-list a:hover {
    color: var(--color-primary);
}

/* Category count styling */
.category-list .post-count,
.widget_categories .post-count,
.widget li.cat-item .count,
.wp-block-categories .count,
.sidebar-category-list .category-count {
    background-color: var(--color-bg-alt);
    color: var(--color-text-secondary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    min-width: 28px;
    text-align: center;
}

/* Remove any default WordPress list styles */
.widget_categories ul,
.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Widget body lists (for dynamically generated content like speaking events) */
.widget-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-body ul li {
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

.widget-body ul li:last-child {
    margin-bottom: 0;
}

/* Speaking Events Styling */
.sessionize-event {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.sessionize-event:first-child {
    padding-top: 0;
}

.sessionize-event:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sessionize-event .event-title {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    line-height: var(--line-height-compact);
}

.sessionize-event .event-title a {
    color: var(--color-primary);
    text-decoration: none;
}

.sessionize-event .event-title a:hover {
    text-decoration: underline;
}

.sessionize-event .event-date {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
}

.sessionize-event .event-location {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
}

.sessionize-event .sessions-label {
    margin: var(--space-xs) 0 var(--space-xs) 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-style: italic;
}

.sessionize-event .sessions-list {
    list-style: none;
    padding: 0;
    margin: var(--space-xs) 0 0;
}

.sessionize-event .sessions-list li {
    margin-bottom: var(--space-sm);
    padding-left: 0;
    position: relative;
}

.sessionize-event .sessions-list li:last-child {
    margin-bottom: 0;
}

.sessionize-event .sessions-list a {
    color: var(--color-primary-dark);
    text-decoration: none;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-compact);
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.sessionize-event .sessions-list a:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

.sessionize-event .session-arrow {
    display: none;
}

.recent-posts li {
    margin-bottom: var(--space-sm);
}

.recent-posts a {
    color: var(--color-primary);
    text-decoration: none;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: var(--space-md) 0;
    align-items: center;
}

.tag {
    background: linear-gradient(135deg, var(--color-bg-card) 0%, var(--color-bg-light) 100%);
    color: var(--color-text-main);
    padding: var(--space-xs) var(--space-sm);
    /*border-radius: var(--radius-full);*/
    font-size: var(--font-size-sm);
    font-weight: 600;
    display: inline-block;
    line-height: var(--line-height-heading);
    white-space: nowrap;
    text-transform: capitalize;
    letter-spacing: var(--letter-spacing-normal);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--overlay-white-10), transparent);
    transition: left 0.5s ease;
}

.tag:hover::before {
    left: 100%;
}

.tag:hover {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
    color: #ffffff;
    border-color: var(--color-secondary);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* WordPress tag cloud -- reuse .tag base styles */
.wp-tag-cloud,
.widget_tag_cloud .tagcloud,
.wp-block-tag-cloud,
.widget-body .wp-block-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    /*padding: var(--space-md) 0;*/
}

body .wp-tag-cloud a,
body .widget_tag_cloud .tagcloud a,
body .wp-block-tag-cloud a,
body .widget-body a[class*="tag-link"],
body .sidebar a[class*="tag-link"] {
    background: var(--color-bg-light);
    color: var(--color-text-secondary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    display: inline-block;
    line-height: var(--line-height-heading);
    white-space: nowrap;
    text-transform: capitalize;
    letter-spacing: var(--letter-spacing-normal);
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

body .wp-tag-cloud a::before,
body .widget_tag_cloud .tagcloud a::before,
body .wp-block-tag-cloud a::before,
body .widget-body a[class*="tag-link"]::before,
body .sidebar a[class*="tag-link"]::before {
    display: none;
}

body .wp-tag-cloud a:hover,
body .widget_tag_cloud .tagcloud a:hover,
body .wp-block-tag-cloud a:hover,
body .widget-body a[class*="tag-link"]:hover,
body .sidebar a[class*="tag-link"]:hover {
    background: var(--color-secondary);
    color: #ffffff;
    border-color: var(--color-secondary);
    text-decoration: none;
}

/* ============================================
   BUTTONS & FORM INPUTS
   All buttons use consistent theme colors
   ============================================ */

.btn-primary,
.btn-secondary,
.btn-submit,
.btn,
.filter-btn,
.search-button,
.wp-block-post-excerpt__more-link {
    font-family: var(--font-body);
    font-size: var(--font-size-btn);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    line-height: 1.2;
}

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    font-size: var(--font-size-btn);
    min-height: var(--button-min-height);
    letter-spacing: var(--letter-spacing-normal);
}

.btn-primary {
    background-color: var(--color-primary);
    color: #ffffff;
    border: 2px solid var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--focus-ring-primary-strong);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--focus-ring-primary-strong);
}

.btn-secondary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ============================================
   ABOUT PAGE
   ============================================ */

.about-card {
    background: var(--color-bg-card);
    padding: var(--tile-padding);
    margin-top: var(--space-lg);
    border-top: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.about-card h2 {
    color: var(--color-text-accent);
    margin-top: 0;
}

.about-card .lead {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-primary);
}


.about-me-container {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
}

.about-me-logo {
    max-width: 120px;
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    margin: 0 auto var(--space-md);
    border: 3px solid var(--color-primary);
    display: block;
    object-fit: cover;
    object-position: top;
    box-shadow: 0 0 0 4px var(--color-bg-card), 0 0 0 5px var(--color-border);
}

.about-name {
    font-size: var(--h3-size);
    margin: 0 0 var(--space-xs) 0;
    color: var(--color-text-heading);
}

.about-title {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.about-blurb {
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.about-link {
    display: inline-block;
    font-weight: 600;
    background: transparent;
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-primary);
    margin-top: var(--space-xs);
    transition: all 0.2s ease;
    letter-spacing: var(--letter-spacing-normal);
}

.about-link:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    text-decoration: none;
}

.bio-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.bio-image-col {
    flex-shrink: 0;
}

.profile-img {
    max-width: var(--profile-img-max-width);
    width: 100%;
    max-height: var(--profile-img-max-height);
    object-fit: cover;
    border: 3px solid var(--color-border-light);
    box-shadow: var(--shadow-md);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

/* Contact Page */
.location-box {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
}

/* ============================================
   CONTACT FORM 7 STYLES
   ============================================ */

.wpcf7 {
    background: var(--color-bg-card);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    margin: var(--space-md) 0;
}

.wpcf7-form {
    display: flex;
    flex-direction: column;
}

.wpcf7-form p {
    margin-bottom: var(--space-sm);
    margin-top: 0;
}

.wpcf7-form-control {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-card);
    color: var(--color-text-main);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.wpcf7-form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--focus-ring-primary);
}

.wpcf7-text,
.wpcf7-email,
.wpcf7-tel,
.wpcf7-url,
.wpcf7-number,
.wpcf7-date,
.wpcf7-textarea {
    max-width: 100%;
}

.wpcf7-textarea {
    /*!*min-height: 120px;*!*/
    /*resize: vertical;*/
}

.wpcf7-select {
    cursor: pointer;
}

.wpcf7-checkbox,
.wpcf7-radio {
    display: flex;
    align-items: center;
    /* gap: var(--space-sm); */
    margin: var(--space-xs) 0;
}

.wpcf7-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.wpcf7-list-item input[type="checkbox"],
.wpcf7-list-item input[type="radio"] {
    width: auto;
    margin: 0;
}

.wpcf7-submit {
    background-color: var(--color-primary);
    color: #ffffff;
    border: 2px solid var(--color-primary);
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--font-size-btn);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    min-height: var(--button-min-height);
}

.wpcf7-submit:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--focus-ring-primary-strong);
}

.wpcf7-submit:active {
    transform: translateY(0);
    box-shadow: none;
}

.wpcf7-submit:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.wpcf7-form label {
    display: block;
    font-weight: 600;
    color: var(--color-text-heading);
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-sm);
}

.wpcf7-form .wpcf7-form-control-wrap {
    position: relative;
}

.wpcf7-not-valid-tip {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-top: var(--space-xs);
    display: block;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ok {
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-sm);
}

.wpcf7-validation-errors {
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error);
    color: var(--color-error-dark);
}

.wpcf7-mail-sent-ok {
    background-color: var(--color-success-bg);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.wpcf7-spinner {
    margin-left: var(--space-sm);
}

.wpcf7 form .ajax-loader {
    display: none;
    width: 20px;
    height: 20px;
    margin-left: var(--space-sm);
    vertical-align: middle;
}

.wpcf7 form.submitting .ajax-loader {
    display: inline-block;
}

/* Form field groups */
.wpcf7-form-field-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.form-field {
    display: flex;
    flex-direction: column;
}

.contact-form {
    background: var(--color-bg-card);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    margin: var(--space-md) 0;
}

@media (max-width: 768px) {
    .wpcf7-form-field-group {
        grid-template-columns: 1fr;
    }

    .wpcf7 {
        padding: var(--space-md);
    }

    .contact-form {
        padding: var(--space-md);
    }
}

/* ============================================
   BENTO GRID
   ============================================ */

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: var(--space-lg);
    font-family: var(--font-body);
    margin-bottom: var(--space-xl);
}

.title {
    text-align: center;
    max-width: var(--max-width-main);
    margin: 0 auto var(--space-xl);
    padding: 0 var(--space-md);
    color: var(--color-text-heading);
    font-weight: 700;
}

.tile {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-lg);
}

.tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.profile-photo {
    grid-column: span 1;
    padding: 0;
    min-height: var(--bento-min-height);
    background: none;
    border: none;
    box-shadow: none;
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    border-radius: var(--radius-lg);
}

.intro-greeting strong {
    color: var(--color-primary);

}

.profile-intro {
    grid-column: span 2;
    background-color: var(--color-bg-card);
}

.profile-intro h3 {
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.profile-intro p {
    margin-bottom: var(--space-md);
    line-height: var(--line-height-base);
    color: var(--color-text-secondary);
}

.profile-intro .philosophical-statement {
    font-weight: 600;
    color: var(--color-text-heading);
    font-style: italic;
    border-left: 3px solid var(--color-primary);
    padding-left: var(--space-md);
    margin-top: var(--space-md);
    margin-bottom: 0;
}

.education {
    grid-column: span 1;
    background-color: var(--color-bg-card);
    min-height: 0;
    overflow: visible;
}

.education h3 {
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.education p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
}

.off-road {
    grid-column: span 2;
    padding: 0;
    position: relative;
    background-image: url('./images/road.jpg');
    background-size: cover;
    background-position: center;
    min-height: var(--bento-min-height-tablet);
    border: none;
    box-shadow: none;
}

.off-road .overlay-content,
.community-bg .overlay-content {
    background: linear-gradient(to top, var(--overlay-dark-65) 0%, transparent 55%);
    width: 100%;
    height: 100%;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.community-bg {
    grid-column: span 2;
    padding: 0;
    position: relative;
    background-image: url('./images/presenting3.jpg');
    background-size: cover;
    background-position: left center;
    min-height: var(--bento-min-height-tablet);
    border: none;
    box-shadow: none;
}

.community-bg .overlay-content {
    align-items: flex-start;
}

.bento-grid .tile.community-bg h3,
.bento-grid .tile.community-bg p {
    max-width: 100%;
}

.social-links {
    grid-column: span 1;
    background-color: var(--color-bg-card);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-lg);
}

.social-links h3 {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.social-links p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.bento-grid h1 {
    margin-bottom: var(--space-md);
}

.bento-grid h3 {
    /* Inherits consistent h3 base styles */
    margin-bottom: var(--space-sm);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bento-grid p {
    line-height: var(--line-height-base);
    font-size: var(--font-size-md);
    margin: 0;
}

.off-road h3, .off-road p,
.community-bg h3, .community-bg p {
    color: #ffffff;
    text-shadow: 1px 1px 3px var(--overlay-dark-80);
}

.link-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--space-sm);
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-align: center;
    background-color: var(--color-primary);
    color: #ffffff;
    min-height: var(--button-min-height);
    border: 2px solid transparent;
}
.btn:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--focus-ring-primary-strong);
}
.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-linkedin {
    background-color: var(--color-linkedin);
}

.btn-linkedin:hover {
    background-color: var(--color-primary-dark);
}

.btn-github {
    background-color: var(--color-github);
}

.btn-github:hover {
    background-color: var(--color-secondary);
}

.btn-sessionize {
    background-color: var(--color-sessionize);
}

.btn-sessionize:hover {
    background-color: var(--color-sessionize-dark);
}

/* ============================================
   RESPONSIVE LAYOUTS
   ============================================ */

/* ============================================
   RESPONSIVE - TABLET (1024px)
   Content-wrapper stacks to single column so
   sidebar is not squeezed on iPads/tablets
   ============================================ */

@media (max-width: 1024px) {
    .content-wrapper {
        grid-template-columns: 1fr;
    }

    .sidebar-toggle {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        padding: var(--space-sm) var(--space-md);
        background: var(--color-secondary);
        color: #ffffff;
        border: none;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-sm);
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s ease;
        margin-bottom: var(--space-md);
    }

    .sidebar-toggle:hover {
        background: var(--color-primary);
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--overlay-dark-65);
        z-index: 998;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sidebar-overlay.is-active {
        display: block;
        opacity: 1;
    }

    .sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 85vw);
        height: 100vh;
        height: 100dvh;
        z-index: 999;
        background: var(--color-bg-card);
        padding: var(--space-md);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        box-shadow: var(--shadow-lg);
    }

    .about-sidebar {
        position: static;
        width: 100%;
        height: auto;
        transform: none;
        z-index: auto;
        overflow-y: visible;
        box-shadow: none;
        padding: 0;
        margin-top: var(--space-lg);
    }

    .sidebar > * {
        flex-shrink: 0;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        flex-shrink: 0;
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        color: var(--color-text-main);
        cursor: pointer;
        padding: var(--space-xs);
        margin-bottom: var(--space-sm);
        transition: background-color 0.2s ease, color 0.2s ease;
        z-index: 1;
    }

    .sidebar-close:hover {
        background: var(--color-bg-alt);
        color: var(--color-primary);
    }

    /* Fluid spacing handles responsive gaps automatically */

    main.container {
        padding: var(--space-md);
    }

    .about-photo-wrap {
        width: var(--about-photo-size-tablet);
        height: calc(var(--about-photo-size-tablet) * 1.3);
    }

    .monthly-tools .section-header {
        padding: 0;
    }

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

/* ============================================
   RESPONSIVE - BENTO TABLET (900px)
   2-column intermediate before 1-column mobile
   ============================================ */

@media (max-width: 900px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-photo {
        grid-column: span 1;
        order: 1;
    }

    .profile-intro {
        grid-column: span 1;
        order: 2;
    }

    .community-bg {
        grid-column: span 2;
        order: 3;
    }

    .education {
        grid-column: span 1;
        order: 4;
    }

    .social-links {
        grid-column: span 1;
        order: 5;
    }

    .off-road {
        grid-column: span 2;
        order: 6;
    }
}

/* ============================================
   RESPONSIVE - SMALL TABLET (700px)
   ============================================ */

@media (max-width: 700px) {
    .bento-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    /* Reset all spans to single column */
    .profile-intro, .off-road, .community-bg, .social-links, .education {
        grid-column: span 1;
    }

    /* Control the order of tiles on mobile */
    .profile-photo { order: 1; min-height: var(--bento-min-height-tablet); }
    .profile-intro { order: 2; }
    .community-bg { order: 3; min-height: var(--bento-min-height-mobile); }
    .education { order: 4; }
    .off-road { order: 5; min-height: var(--bento-min-height-mobile); }
    .social-links { order: 6; }

    /* Tile spacing on mobile */
    .tile {
        padding: var(--space-md);
        border-radius: var(--radius-md);
    }

    /* Image tile overlays for mobile */
    .off-road .overlay-content,
    .community-bg .overlay-content {
        background: linear-gradient(to top, var(--overlay-dark-75) 0%, var(--overlay-dark-30) 100%);
        padding: var(--space-md);
    }

    /* Social links tile buttons */
    .link-buttons {
        width: 100%;
    }

    .link-buttons .btn {
        width: 100%;
    }

    /* Section title mobile */
    .title {
        margin: 0 0 var(--space-md);
        font-size: var(--h2-size);
    }
}

/* ============================================
   RESPONSIVE - MOBILE (768px)
   ============================================ */

@media (max-width: 768px) {
    /* 1. Global & Spacing Reset */
    body { padding: 0; }

    /* Fluid spacing handles responsive padding automatically */

    .contact-page-layout {
        max-width: 100%;
    }

    .contact-hero-inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }

    .contact-hero-text {
        align-items: center;
    }

    .contact-hero-image img {
        height: auto;
    }

    .contact-list li {
        font-size: var(--font-size-sm);
    }

    .contact-form-section .section-title {
        font-size: var(--font-size-xl);
        margin-bottom: var(--space-lg);
    }

    .contact-form-section .wpcf7 {
        max-width: 100%;
    }

    .about-hero h1 {
        font-size: clamp(1.25rem, 5vw, var(--font-size-page-title));
    }

    .about-profile-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .about-photo-wrap {
        width: var(--about-photo-size-mobile);
        height: calc(var(--about-photo-size-mobile) * 1.3);
    }

    .about-bio h2 {
        font-size: var(--h3-size);
    }

    .about-quote {
        text-align: left;
    }

    .about-social-row {
        flex-direction: column;
        width: 100%;
    }

    .about-social-btn {
        width: 100%;
        min-height: var(--button-min-height);
        font-size: var(--font-size-md);
    }

    .about-image-banner {
        max-height: var(--about-image-banner-height-mobile);
        border-radius: var(--radius-sm);
    }

    /* Fluid spacing handles gaps automatically */

    .about-section-icon {
        width: var(--section-icon-size-mobile);
        height: var(--section-icon-size-mobile);
    }

    .about-section-icon svg {
        width: var(--section-icon-svg-size-mobile);
        height: var(--section-icon-svg-size-mobile);
    }

    .about-section-text h3 {
        font-size: var(--font-size-md);
    }

    .about-section-text p {
        font-size: var(--font-size-sm);
    }

    main.container {
        border-radius: var(--radius-md);
        overflow-x: hidden;
    }

    /* Hide navbar brand logo on mobile */
    .nav-brand-logo {
        display: none;
    }

    .content-wrapper {
        padding: 0;
    }

    /* Single post content -- prevent cutoff on mobile */
    .blog-feed {
        overflow-x: hidden;
        max-width: 100%;
    }

    .blog-feed .wp-block-post-content,
    .blog-feed .entry-content {
        max-width: 100%;
        overflow-x: hidden;
    }

    .blog-feed .wp-block-post-content > *,
    .blog-feed .entry-content > * {
        max-width: 100%;
    }

    .blog-feed .wp-block-post-content pre,
    .blog-feed .wp-block-post-content table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .blog-feed .wp-block-post-content img {
        max-width: 100%;
        height: auto;
    }

    .blog-feed .wp-block-post-content .wp-block-embed,
    .blog-feed .wp-block-post-content .wp-block-video {
        max-width: 100%;
        overflow: hidden;
    }

    .blog-feed .wp-block-post-content .wp-block-embed iframe {
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .hero-container, .post-card, .bio-wrapper, .about-grid, .contact-layout {
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    h1, h2, h3 { line-height: 1.2; }
    h1 { font-size: clamp(1.5rem, 5vw, var(--font-size-page-title)); }

    .title {
        text-align: center;
        line-height: 1.2;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 1001;
        min-width: 44px;
        min-height: 44px;
        padding: var(--space-xs);
        background: none;
        border: none;
        color: inherit;
    }

    .hamburger span {
        display: block;
        width: 28px;
        height: 3px;
        background-color: #ffffff;
        border-radius: 2px;
        transition: all 0.3s;
        margin: 3px 0;
    }

    /* 3. Navigation Menu */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-secondary);
        flex-direction: column;
        display: none;
        box-shadow: var(--shadow-md);
        z-index: 1001;
    }

    .nav-links a {
        width: 100%;
        text-align: center;
        border-top: 1px solid var(--overlay-white-10);
        padding: var(--space-sm) var(--space-md);
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Show Blog & Subscribe in mobile nav */
    .mobile-nav-only {
        display: block;
    }

    .nav-links.is-open {
        display: flex;
    }

    /* 4. Hero & Branding */
    .hero-brand-logo { height: 70px; width: 70px; }
    .hero-image { margin-top: var(--space-xs); height: auto; }

    /* Hide hero CTA on mobile -- links are now in nav */
    .hero-cta {
        display: none;
    }

    /* Show hero CTA on 404 page even on mobile */
    body.error404 .hero-cta {
        display: flex;
    }

    /* Home page hero -- show CTA under the photo */
    .home-hero .hero-left {
        display: contents;
    }

    .home-hero .hero-eyebrow {
        order: 1;
    }

    .home-hero .hero-left h1 {
        order: 2;
    }

    .home-hero .hero-subtext {
        order: 3;
    }

    .home-hero .hero-right {
        order: 4;
    }

    .home-hero .hero-cta {
        display: flex;
        justify-content: center;
        order: 5;
        width: 100%;
    }

    /* Contact page hero -- show CTA under the photo */
    .contact-hero .hero-left {
        display: contents;
    }

    .contact-hero .hero-eyebrow {
        order: 1;
    }

    .contact-hero .hero-left h1 {
        order: 2;
    }

    .contact-hero .hero-subtext {
        order: 3;
    }

    .contact-hero .hero-right {
        order: 4;
    }

    .contact-hero .hero-cta {
        display: flex;
        justify-content: center;
        order: 5;
        width: 100%;
    }

    /* 404 page hero -- show CTA under the photo */
    body.error404 .hero-left {
        display: contents;
    }

    body.error404 .hero-left h1 {
        order: 1;
    }

    body.error404 .hero-subtext {
        order: 2;
    }

    body.error404 .hero-right {
        order: 3;
    }

    body.error404 .hero-cta {
        order: 4;
        justify-content: center;
        width: 100%;
    }

    /* Hero layout stacking */
    .hero-container {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }

    .hero-subtext {
        font-size: var(--font-size-md);
        margin: var(--space-sm) 0;
        text-align: center;
    }

    .hero-left {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        text-align: left;
    }

    .hero-right {
        width: 100%;
    }

    .hero-left h1 {
        white-space: normal;
        text-align: center;
        width: 100%;
        margin-bottom: var(--space-sm);
    }

    .hero-right img {
        width: 100%;
        height: auto;
        border-radius: var(--radius-md);
        margin-bottom: var(--space-md);
    }

    .hero-left p {
        text-align: left;
        width: 100%;
    }

    .hero-left ul {
        padding-left: var(--space-md);
    }

    .blog-header {
        padding-bottom: var(--space-md);
    }

    .blog-feed .section-title {
        font-size: var(--font-size-xl);
    }

    .blog-feed .post-card {
        flex-direction: column;
    }

    .blog-feed .post-card .post-thumbnail {
        width: 100%;
        max-height: var(--post-thumbnail-height);
    }

    .blog-feed .post-card .wp-block-post-featured-image img,
    .blog-feed .post-card .post-thumbnail img {
        width: 100%;
        height: var(--post-thumbnail-height);
    }

    .blog-subtitle {
        font-size: var(--font-size-md);
    }

    .blog-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
        padding: var(--space-md);
    }

    .blog-category-pills {
        gap: var(--space-xs);
    }

    .category-pill {
        font-size: var(--font-size-xs);
        padding: var(--space-xs) var(--space-sm);
    }

    .search-bar {
        min-width: 100%;
        flex: 1 1 100%;
    }

    .filter-group {
        width: 100%;
    }

    .filter-group select {
        width: 100%;
        min-width: 100%;
    }

    .post-card .wp-block-post-title,
    .post-card .post-content h3 {
        font-size: var(--font-size-lg);
    }

    .post-card .post-content {
        padding: var(--space-md);
    }

    .hero-left li {
        text-align: left;
    }

    .newsletter-form {
        order: 4;
        width: 100%;
    }

    .subscription-wrapper {
        order: 4;
        width: 100%;
    }

    /* 5. Subscription Form */
    .subscription-wrapper, .subscribe {
        flex-direction: column;
        width: 100%;
        gap: var(--space-sm);
    }

    input[type="email"], .subscribe button {
        border-radius: var(--radius-sm);
    }

    /* 6. Index page -- Tool grid & sections */
    .monthly-tools .section-header {
        padding: 0;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .content-filter {
        width: 100%;
    }

    .filter-btn {
        flex: 1;
        text-align: center;
        font-size: var(--font-size-sm);
    }

    .tool-grid {
        grid-template-columns: 1fr;
    }

    .tool-card:hover {
        transform: none;
    }

    /* Blog feed on mobile -- compact list like trending articles */
    .section-title {
        font-size: var(--h3-size);
    }

    .post-card {
        border-radius: 0;
        box-shadow: none;
        border: none;
        border-top: none;
        border-bottom: 1px solid var(--color-border-light);
        overflow: visible;
        margin-bottom: 0;

    }

    .post-card:hover {
        transform: none;
        box-shadow: none;
        background: var(--color-bg-alt);
    }

    body .post-thumbnail,
    body .post-card .wp-block-post-featured-image {
        display: none;
    }

    .post-card .post-content {
        /* Fluid spacing handles padding and gap */
    }

    .post-card .wp-block-post-excerpt {
        display: none;
    }

    body .post-card .wp-block-post-excerpt__more-link {
        display: none;
    }

    .post-card .wp-block-post-title,
    .post-card .post-content h3 {
        font-size: var(--font-size-md);
        font-weight: 600;
    }

    .post-card .meta,
    .post-card .wp-block-post-date {
        font-size: var(--font-size-sm);
        opacity: 0.7;
    }

    .post-content {
        gap: var(--space-xs);
    }

    /* Responsive cards for mobile */
    .tool-card {
        border-radius: var(--radius-sm);
    }

    .tool-card h3 {
        padding: var(--space-sm) var(--space-sm) var(--space-xs);
        font-size: var(--font-size-md);
    }

    .tool-card .metadata {
        padding: 0 var(--space-sm) var(--space-sm);
    }

}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    background: var(--color-bg-card);
    color: var(--color-text-heading);
    padding: var(--space-lg) 0;
    margin-top: 0;
    /*border-top: 1px solid var(--color-border);*/
}

.footer-logo {
    height: clamp(120px, 15vw, 180px);
    width: auto;
    border-radius: var(--radius-md);
    margin-left: var(--space-lg);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--max-width-main);
    margin: 0 auto;
    padding: 0 var(--space-md);
    gap: var(--space-md);
}

.footer-left p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-heading);
}

.footer-left .tagline {
    font-size: var(--font-size-sm);
    opacity: 0.8;
    margin-top: var(--space-xs);
}

.footer-right {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.footer-right a {
    color: var(--color-text-heading);
    text-decoration: none;
    font-size: var(--font-size-md);
    font-weight: 600;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.footer-right a:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
        padding: 0 var(--space-md);
    }

    .footer-left {
        order: 1;
    }

    .footer-right {
        order: 2;
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
        width: 100%;
    }

    .footer-right a {
        width: 100%;
        max-width: 320px;
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-md);
        text-align: center;
        justify-content: center;
    }

    .footer-logo {
        margin-left: 0;
        margin-top: var(--space-md);
        height: clamp(100px, 20vw, 140px);
    }

    .site-footer {
        padding: var(--space-md) 0;
    }
}

/* ============================================
   404 ERROR PAGE
   ============================================ */

.error-page .hero-container {
    margin-top: var(--space-lg);
    min-height: 60vh;
    text-align: center;
}

.error-content h1 {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.error-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
    justify-content: center;
}

/* Tablet & Mobile adjustment for 404 */
@media (max-width: 768px) {
    .error-actions {
        flex-direction: column;
        width: 100%;
    }

    .error-actions .read-more {
        width: 100%;
        text-align: center;
    }
}

/* --- Speaking Page Specifics --- */
.event-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.presentation-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-md);
}

.presentation-table th, .presentation-table td {
    text-align: left;
    padding: var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
}

.presentation-table th {
    color: var(--color-primary);
    text-transform: uppercase;
    font-size: var(--font-size-sm);
}

/* Tablet & Mobile fix for tables */
@media (max-width: 768px) {
    .presentation-table thead { display: none; }
    .presentation-table tr { display: block; margin-bottom: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-sm); }
    .presentation-table td { display: block; border: none; padding: var(--space-xs) 0; }
    .presentation-table td::before { content: attr(data-label); font-weight: bold; margin-right: var(--space-xs); color: var(--color-primary); }
}

/* ============================================
   SUBSCRIBE PAGE - Clean & Consolidated
   ============================================ */

/* Subscribe Page Hero */
.subscribe-page {
    border-top: 3px solid var(--color-primary);
}

/* Subscribe Section */
.subscribe-section {
    padding: var(--space-lg) 0;
}

.subscribe-section .section-title {
    text-align: center;
    font-size: var(--h2-size);
    color: var(--color-text-heading);
    margin-bottom: var(--space-xl);
    font-weight: 600;
}

/* Subscribe Grid - 4 Cards */
.subscribe-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
    gap: var(--space-md);
    max-width: var(--container-lg);
    margin: 0 auto;
}

.subscribe-tile {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.subscribe-tile:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.subscribe-tile h3 {
    margin: 0;
    /*font-size: var(--font-size-sm);*/
    /*font-weight: 600;*/
    color: var(--color-text-heading);
    line-height: 1.2;
}

/* Newsletter Form - Hero Section */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    max-width: var(--newsletter-max-width);
}

.newsletter-actions {
    display: flex;
    gap: var(--space-md);
}

.newsletter-feedback {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    border-radius: var(--radius-sm);
}

.newsletter-feedback.success {
    color: var(--color-success);
}

.newsletter-feedback.error {
    color: var(--color-error);
}

.newsletter-form input[type="email"] {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-lg);
    font-family: inherit;
    background: var(--color-bg-light);
    color: var(--color-text-main);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: var(--button-min-height);
}

.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--focus-ring-primary);
}

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

/* Newsletter Actions - Match hero-cta button pattern */
.newsletter-actions .btn-primary,
.newsletter-actions .btn-secondary {
    min-width: var(--btn-min-width);
    text-align: center;
    white-space: nowrap;
}

/* Mobile fix for subscribe page form */
@media (max-width: 768px) {
    .subscribe-page .hero-container {
        display: flex;
        flex-direction: column;
    }

    .subscribe-page .hero-left {
        display: contents;
    }

    .subscribe-page .hero-left h1 {
        order: 1;
    }

    .subscribe-page .hero-left .hero-subtext {
        order: 2;
    }

    .subscribe-page .hero-right {
        order: 3;
    }

    .subscribe-page .newsletter-form {
        order: 4;
        width: 100%;
    }

    .newsletter-actions {
        flex-direction: column;
        width: 100%;
    }

    .newsletter-actions .btn-primary,
    .newsletter-actions .btn-secondary {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   MOBILE NAV-CONTROLS LAYOUT
   ============================================ */
@media (max-width: 768px) {
    .nav-content {
        flex-wrap: wrap;
    }

    .logo-section {
        flex: 1;
        min-width: 0;
    }

    .social-icons {
        display: none;
    }

    .nav-controls {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        flex-shrink: 0;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .subscribe-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(90px, auto);
    }
}

@media (max-width: 768px) {
    .subscribe-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        grid-auto-rows: minmax(70px, auto);
    }

    .subscribe-tile h3 {
        font-size: var(--font-size-md);
    }

    .newsletter-form {
        max-width: 100%;
    }

    .newsletter-form input[type="email"] {
        width: 100%;
    }
}