/* ===== ROOT VARIABLES ===== */
:root {
    --bg-paper: #f9f8f4;
    --ink-black: #111111;
    --ink-subtle: rgba(17, 17, 17, 0.15);
    --accent-blue: #2563eb;
    --highlight-yellow: #fde047;
    --grid-border: 1px solid var(--ink-subtle);
}

/* ===== BASE STYLES ===== */
html {
    overflow-x: hidden;
}

body {
    font-family: "Inter Tight", sans-serif;
    background-color: var(--bg-paper);
    color: var(--ink-black);
    overflow-x: hidden;
    max-width: 100vw;
}

* {
    box-sizing: border-box;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
span {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.serif-accent {
    font-family: "Nato Serif", serif;
    font-style: italic;
    font-weight: 600;
}

/* Intro paragraph styling - used on hero and case study pages */
.intro-text {
    font-family: "Nato Serif", serif;
    font-style: italic;
    font-weight: 500;
    color: #4b5563;
    /* gray-600 */
}

.mono {
    font-family: "Space Mono", monospace;
}

/* ===== GRID SYSTEM ===== */
.grid-master {
    display: grid;
    grid-template-columns: 1fr;
    border-left: var(--grid-border);
    border-right: var(--grid-border);
    max-width: 1800px;
    margin: 0 auto;
    background-color: var(--bg-paper);
}

/* Index page: 3-column grid */
@media (min-width: 1024px) {
    .grid-master.grid-3-col {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Case study pages: 12-column grid */
@media (min-width: 1024px) {
    .grid-master.grid-12-col {
        grid-template-columns: repeat(12, 1fr);
    }
}

/* Grid Items - Index Page */
.grid-item {
    border-bottom: var(--grid-border);
    position: relative;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease;
}

@media (min-width: 768px) {
    .grid-item {
        padding: 3rem 2rem;
    }
}

@media (min-width: 1024px) {
    .grid-item {
        padding: 4rem 3rem;
    }

    .col-span-3 {
        grid-column: span 3;
    }

    .border-r-desktop {
        border-right: var(--grid-border);
    }
}

/* Grid Items - Case Study Pages */
@media (min-width: 1024px) {
    .grid-12-col .grid-item {
        border-right: var(--grid-border);
        padding: 4rem;
    }

    .grid-12-col .grid-item:last-child {
        border-right: none;
    }
}

/* ===== COMPONENTS ===== */

/* Hero Section */
.hero-section {
    min-height: 75vh;
    justify-content: center;
}

/* Project Cards */
.project-card {
    min-height: 60vh;
    justify-content: space-between;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

@media (hover: hover) {
    .project-card:hover {
        background-color: #ffffff;
    }
}

/* Sticky Sidebar */
.sticky-sidebar {
    position: sticky;
    top: 4rem;
}

/* ===== UTILITIES ===== */

/* Highlighter Effect - Hover (Index Page) */
.highlight-hover {
    background: linear-gradient(120deg, transparent 0%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: 0 88%;
    transition: background-size 0.4s ease-in;
}

@media (hover: hover) {

    .project-card:hover .highlight-hover,
    .hero-section:hover .highlight-hover {
        background: linear-gradient(120deg, var(--highlight-yellow) 0%, var(--highlight-yellow) 100%);
        background-repeat: no-repeat;
        background-size: 100% 40%;
        background-position: 0 88%;
    }
}

/* Highlighter Effect - Static (Case Study Pages) */
.highlight {
    background: linear-gradient(120deg, var(--highlight-yellow) 0%, var(--highlight-yellow) 100%);
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: 0 88%;
}

/* Arrow Interaction */
@media (hover: hover) {
    .arrow-trigger:hover .arrow-icon {
        transform: translateX(5px) translateY(-5px);
        color: var(--accent-blue);
    }
}

.arrow-icon {
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Touch Targets - Minimum 44px */
.touch-target {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Case study pages: all links/buttons get touch targets */
.grid-12-col a,
.grid-12-col button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ===== TICKER ANIMATION ===== */
@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-ticker {
    animation: ticker 60s linear infinite;
    /* Speed: increase number = slower, decrease = faster */
}

@media (hover: hover) {
    .ticker-track:hover .animate-ticker {
        animation-play-state: paused;
    }
}

/* ===== MOBILE RESPONSIVE ===== */

/* Force single column grid on mobile - CRITICAL FIX */
@media (max-width: 1023px) {
    .grid-master.grid-3-col {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }

    .grid-item {
        width: 100%;
        border-right: none !important;
    }

    .border-r-desktop {
        border-right: none !important;
    }

    .project-card {
        width: 100%;
        max-width: 100%;
        min-height: auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .col-span-3,
    .col-span-12,
    [class*="lg:col-span"] {
        grid-column: span 1;
    }

    .grid-12-col .grid-item {
        border-right: none;
    }
}

/* Force proper text wrapping on mobile */
@media (max-width: 767px) {
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    .grid-master {
        max-width: 100vw;
        overflow-x: hidden;
    }

    h1,
    h2,
    h3 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .hero-section h1 {
        font-size: 2rem;
        line-height: 1.2;
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .project-card h2 {
        font-size: 2rem;
        line-height: 1.1;
        font-weight: 700;
    }

    .project-card p {
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* Tablet (640px - 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
    .grid-item {
        padding: 2.5rem 2rem;
    }

    .hero-section h1 {
        font-size: 2.75rem;
        line-height: 1.1;
        font-weight: 900;
    }

    .project-card h2 {
        font-size: 2rem;
        line-height: 1.1;
        font-weight: 700;
    }

    h2.footer-cta {
        font-size: 4.5rem !important;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .grid-item {
        padding: 4rem 3rem;
    }
}

/* Mobile (max 639px) */
@media (max-width: 639px) {
    body {
        font-size: 16px;
        line-height: 1.6;
    }

    p {
        line-height: 1.6;
    }

    .grid-item {
        padding: 1.5rem 1rem;
    }

    .hero-section {
        min-height: 60vh;
    }

    .hero-section h1 {
        font-size: 2.25rem;
        line-height: 1.1;
        font-weight: 900;
    }

    .project-card h2 {
        font-size: 2rem;
        line-height: 1.1;
        font-weight: 700;
    }

    /* Case study page headings */
    .grid-item h1 {
        font-size: 2rem;
        line-height: 1.15;
    }

    .grid-item h2 {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    article p {
        font-size: 1rem;
    }

    /* Footer CTA - "Let's Talk." should be prominently large */
    h2.footer-cta {
        font-size: 3.5rem !important;
    }

    /* Footer Nav - stack vertically */
    .footer-nav {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .footer-nav a {
        font-size: 1rem;
        min-height: 44px;
    }
}

/* Extra small mobile (390px and below) */
@media (max-width: 390px) {
    .hero-section h1 {
        font-size: 2.25rem;
    }

    .project-card h2 {
        font-size: 2rem;
    }

    .grid-item h1 {
        font-size: 1.875rem;
    }

    .grid-item h2 {
        font-size: 1.5rem;
    }

    h2.footer-cta {
        font-size: 3.5rem !important;
    }
}

/* ===== SHARED NAVIGATION STYLES ===== */

/* Consistent header styling across all pages */
.site-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem 1rem 1.5rem !important;
    background-color: var(--bg-paper);
    border-bottom: var(--grid-border);
    position: sticky;
    top: 41px;
    z-index: 40;
}

@media (min-width: 540px) {
    .site-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        padding: 1.5rem !important;
    }
}

@media (min-width: 768px) {
    .site-header {
        padding: 1.5rem 2rem !important;
    }
}

@media (min-width: 1024px) {
    .site-header {
        padding: 1.5rem 3rem !important;
    }
}

/* Get in Touch button - consistent style */
.btn-contact {
    background-color: var(--ink-black);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.75rem;
    border: 1px solid var(--ink-black);
    transition: background-color 0.2s, color 0.2s;
    text-decoration: none;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .btn-contact {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
}

@media (hover: hover) {
    .btn-contact:hover {
        background-color: white;
        color: var(--ink-black);
    }
}

/* Name/logo link styling */
.site-name {
    font-size: 1.25rem;
    font-weight: 900;
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .site-name {
        font-size: 1.5rem;
    }
}

@media (hover: hover) {
    .site-name:hover {
        color: var(--accent-blue);
    }
}