/* =============================================================================
   UNIFIED STYLESHEET FOR SNDNSS.DK
   =============================================================================
   
   This unified stylesheet serves all page types:
   - Main site (index.html) - uses .main-site body class
   - Article pages - uses .article-page body class  
   - Legal pages - uses .legal-page body class
   
   Structure:
   1. CSS Variables & Reset
   2. Base Typography & Layout
   3. Header & Navigation (shared)
   4. Footer (shared)
   5. Main Site Specific Styles
   6. Article/Legal Page Specific Styles
   7. Responsive Design
   8. Utility Classes
   ============================================================================= */

/* =============================================================================
   1. CSS VARIABLES & RESET
   ============================================================================= */

:root {
    --bg-primary: #121212;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --text-primary: #d3d3d3;
    --text-secondary: #a9a9a9;
    --accent: #575757;
    --font-stack: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --radius: 8px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --header-height: 68px;
}

/* Reset and base styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + 1px);
    /* Prevent over-scroll and bouncing effects */
    overscroll-behavior: none;
}

/* =============================================================================
   2. BASE TYPOGRAPHY & LAYOUT
   ============================================================================= */

/* Main site body styling */
body.main-site {
    font-family: var(--font-stack);
    font-size: clamp(0.69rem, 2.75vw, 0.77rem);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    overflow-x: hidden;
    padding-bottom: 46px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    position: relative;
    /* Prevent over-scroll effects */
    overscroll-behavior: none;
}

/* Article/Legal pages body styling */
body.article-page,
body.legal-page {
    font-family: var(--font-stack);
    font-size: clamp(0.69rem, 2.75vw, 0.77rem);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    overflow-x: hidden;
    padding: calc(var(--header-height) + 2rem) 0 46px 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* Typography for main site */
body.main-site h1, 
body.main-site h2, 
body.main-site h3 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

body.main-site h1 {
    font-size: clamp(1.7rem, 5.51vw, 2.43rem);
}

body.main-site h2 {
    font-size: clamp(1.38rem, 4.13vw, 1.86rem);
}

body.main-site h3 {
    font-size: clamp(1.05rem, 3.45vw, 1.38rem);
}

body.main-site p {
    margin-bottom: 0.85rem;
    max-width: 65ch;
    font-size: clamp(0.69rem, 2.75vw, 0.77rem);
}

body.main-site a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

body.main-site a:hover, 
body.main-site a:focus {
    text-decoration: underline;
    outline: none;
}

/* Navigation links should never have underlines */
.nav-links a,
.nav-links a:hover,
.nav-links a:focus,
.nav-links a:active,
.nav-links a:visited {
    text-decoration: none !important;
}

body.main-site a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Typography for article/legal pages */
body.article-page h1,
body.legal-page h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-align: left;
}

body.article-page h2,
body.legal-page h2 {
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 2rem 0 1rem 0;
    color: var(--text-primary);
}

body.article-page h3,
body.legal-page h3 {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-weight: 700;
    line-height: 1.4;
    margin: 1.5rem 0 0.75rem 0;
    color: var(--text-primary);
}

body.article-page p,
body.legal-page p {
    margin-bottom: 1.25rem;
    color: var(--text-primary);
}

body.article-page ul,
body.article-page ol,
body.legal-page ul,
body.legal-page ol {
    margin: 1rem 0 1.5rem 2rem;
    color: var(--text-primary);
}

body.article-page ul ul,
body.article-page ol ol,
body.legal-page ul ul,
body.legal-page ol ol {
    margin: 0.5rem 0 0.5rem 1.5rem;
}

body.article-page li,
body.legal-page li {
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

body.article-page strong,
body.legal-page strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* =============================================================================
   3. HEADER & NAVIGATION (SHARED)
   ============================================================================= */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bg-tertiary);
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.topbar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(0.85rem, 3.4vw, 1.7rem);
    width: 100%;
    height: 100%;
    gap: clamp(1.7rem, 4.25vw, 3.4rem);
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.64rem;
    height: 100%;
}

.topbar-logo {
    width: clamp(45px, 9.35vw, 53px);
    height: clamp(45px, 9.35vw, 53px);
    border-radius: 5px;
    object-fit: contain;
}

.nav-links {
    display: flex;
    gap: clamp(0.21rem, 1.7vw, 0.85rem);
    list-style: none;
    align-items: center;
    height: 100%;
}

.nav-links a {
    padding: clamp(0.64rem, 2.55vw, 0.85rem) clamp(0.85rem, 3.4vw, 1.3rem);
    border-radius: 5px;
    font-size: clamp(0.69rem, 2.75vw, 0.77rem);
    font-weight: 500;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
    min-height: 41px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: var(--text-primary);
    text-decoration: none;
    position: relative;
}

.nav-links a:hover, .nav-links a:focus {
    background: #4a4a4a;
    color: #ffffff;
    text-decoration: none;
}

.nav-links a:active {
    background: #4a4a4a;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(1px);
}

.nav-links a:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

.nav-links a:focus:not(:focus-visible) {
    background: transparent;
    color: inherit;
    outline: none;
}

/* Enhanced mobile touch handling - prevent sticky hover states */
@media (hover: none) and (pointer: coarse) {
    .nav-links a:hover {
        background: transparent;
        color: inherit;
        transform: none;
        box-shadow: none;
    }
    
    .nav-links a:focus {
        background: transparent;
        color: inherit;
        outline: none;
    }
    
    .nav-links a:active {
        background: #4a4a4a;
        color: #ffffff;
        transform: translateY(1px);
    }
    
    /* Reset to default state immediately after touch */
    .nav-links a:not(:active) {
        background: transparent;
        color: var(--text-primary);
        transform: none;
    }
}

/* Additional mobile focus state handling for coarse pointers */
@media (pointer: coarse) {
    .nav-links a:focus {
        background: transparent;
        color: inherit;
        outline: none;
    }
}

.nav-links a.active {
    background: #3a3a3a;
    color: #ffffff;
}

/* Mobile navigation fixes */
@media (max-width: 768px) {
    .nav-links a:hover {
        background: transparent !important;
        color: var(--text-primary) !important;
        text-decoration: none !important;
    }
    
    .nav-links a:active {
        background: #4a4a4a !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }
}

/* =============================================================================
   4. FOOTER (SHARED)
   ============================================================================= */

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    backdrop-filter: blur(10px);
    text-align: center;
    padding: 0.39rem;
    font-size: clamp(0.51rem, 1.46vw, 0.64rem);
    z-index: 1000;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    line-height: 1.4;
}

.footer-links > * {
    padding: 0 clamp(0.5rem, 1.2vw, 0.75rem);
}

.footer-links a {
    color: var(--text-primary);
    white-space: nowrap;
    transition: var(--transition);
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
    color: var(--text-primary);
}

/* =============================================================================
   5. MAIN SITE SPECIFIC STYLES
   ============================================================================= */

/* Layout components */
body.main-site .section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(1.7rem, 4.25vw, 3.4rem);
    width: 100%;
}

/* First section should account for header */
body.main-site .section:first-of-type {
    padding-top: calc(var(--header-height) + clamp(1.7rem, 4.25vw, 3.4rem));
}

body.main-site .container {
    width: 100%;
    max-width: min(90vw, 1200px);
    margin: 0 auto;
    padding: clamp(1.3rem, 3.4vw, 2.55rem);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Container variations */
body.main-site #about .container {
    max-width: min(60vw, 800px);
}

body.main-site #contact .container {
    max-width: min(76.5vw, 1020px);
}

body.main-site #home .container {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

body.main-site #services .container, 
body.main-site #about .container, 
body.main-site #contact .container {
    background: transparent;
    box-shadow: none;
}

/* Section backgrounds */
body.main-site #home {
    text-align: center;
    background: var(--bg-secondary);
    padding-top: calc(var(--header-height) + 2rem);
}

body.main-site #about {
    background: var(--bg-tertiary);
}

body.main-site #services {
    background: var(--bg-secondary);
}

body.main-site #contact {
    background: var(--bg-tertiary);
}

body.main-site #home img {
    width: clamp(128px, 25.5vw, 255px);
    height: clamp(128px, 25.5vw, 255px);
    border-radius: var(--radius);
    margin-bottom: 1.7rem;
    box-shadow: var(--shadow);
}

/* Grid layouts */
body.main-site .columns {
    display: grid;
    gap: clamp(1.3rem, 3.4vw, 2.1rem);
    width: 100%;
    margin-top: 1.7rem;
}

body.main-site #services .columns {
    grid-template-columns: repeat(2, 1fr);
}

body.main-site #contact .columns {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 213px), 1fr));
    gap: clamp(2rem, 5vw, 3rem);
}

body.main-site .column {
    background: var(--bg-secondary);
    padding: clamp(1.3rem, 3.4vw, 2.1rem);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
}

body.main-site .column h3 {
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 1rem;
}

body.main-site .column p {
    color: var(--text-secondary);
    text-align: center;
    margin: 0 auto;
}

/* Social and contact links */
body.main-site .social-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    align-items: center;
    justify-content: center;
}

body.main-site .social-links a,
body.main-site .phone-link, 
body.main-site .email-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.64rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 5px;
    transition: var(--transition);
    min-height: 41px;
    font-size: clamp(0.69rem, 1.89vw, 0.77rem);
    text-align: center;
    font-weight: 500;
    box-sizing: border-box;
    width: 80%;
    max-width: 300px;
    margin: 0 auto;
    color: var(--text-primary);
    border: 1px solid transparent;
    text-decoration: none;
}

body.main-site .social-links a:hover,
body.main-site .social-links a:focus,
body.main-site .phone-link:hover,
body.main-site .phone-link:focus, 
body.main-site .email-link:hover,
body.main-site .email-link:focus {
    background: #787878;
    color: #ffffff;
    text-decoration: none;
    border-color: #8a8a8a;
}

body.main-site .social-links a:focus-visible,
body.main-site .phone-link:focus-visible,
body.main-site .email-link:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

body.main-site .social-icon {
    width: clamp(17px, 3.4vw, 20px);
    height: clamp(17px, 3.4vw, 20px);
    flex-shrink: 0;
}

/* Contact column centering */
body.main-site #contact .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

body.main-site #contact .column > * {
    margin-bottom: 0.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.main-site #contact .column > *:last-child {
    margin-bottom: 0;
}

body.main-site #contact .column .phone-link:last-child,
body.main-site #contact .column .email-link:last-child {
    margin-bottom: 0;
}

/* Quote styling */
body.main-site blockquote {
    font-style: italic;
    border-left: 4px solid var(--accent);
    padding-left: 1rem;
    margin: 0;
    font-size: clamp(0.77rem, 2.07vw, 0.86rem);
    width: 100%;
    max-width: 100%;
}

body.main-site blockquote p {
    max-width: 100%;
    margin-bottom: 0.85rem;
}

body.main-site blockquote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.81em;
    color: var(--text-secondary);
    text-align: right;
    font-style: normal;
}

/* Ensure proper spacing and prevent over-scroll on main site */
body.main-site .section:last-of-type {
    margin-bottom: 0;
    /* Simple padding to account for footer */
    padding-bottom: 60px;
}

/* =============================================================================
   6. ARTICLE/LEGAL PAGE SPECIFIC STYLES
   ============================================================================= */

.article-container {
    max-width: clamp(320px, 90vw, 800px);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    position: relative;
}

.logo-container {
    text-align: left;
    margin-bottom: 2rem;
}

.logo {
    width: clamp(64px, 12vw, 128px);
    height: clamp(64px, 12vw, 128px);
    border-radius: var(--radius);
    margin: 0;
    box-shadow: var(--shadow);
    object-fit: contain;
}

/* Link styling for article and legal pages */
body.article-page a,
body.legal-page a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

body.article-page a:hover,
body.article-page a:focus,
body.legal-page a:hover,
body.legal-page a:focus {
    text-decoration: underline;
    color: var(--text-primary);
}

body.article-page a:focus-visible,
body.legal-page a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* =============================================================================
   7. RESPONSIVE DESIGN
   ============================================================================= */

@media (max-width: 768px) {
    :root {
        --header-height: 70px;
    }
    
    body.main-site {
        padding-bottom: 65px;
    }
    
    body.article-page,
    body.legal-page {
        padding-bottom: 65px;
    }
    
    .nav-links {
        gap: 0.5rem;
    }
    
    .nav-links a {
        font-size: clamp(0.81rem, 3.6vw, 0.9rem);
        padding: 0.6rem 0.8rem;
        min-height: 48px;
    }
    
    .topbar-logo {
        width: clamp(48px, 9.9vw, 57px);
        height: clamp(48px, 9.9vw, 57px);
    }
    
    body.main-site #home {
        padding-top: calc(var(--header-height) + 1rem);
    }
    
    body.main-site .section {
        min-height: 100vh;
        padding: 2rem 1rem;
    }
    
    body.main-site .section:first-of-type {
        padding-top: calc(var(--header-height) + 2rem);
    }
    
    body.main-site .container {
        padding: 2rem 1.5rem;
    }
    
    body.main-site .columns {
        gap: 1.5rem;
    }
    
    body.main-site #services .columns,
    body.main-site #contact .columns {
        grid-template-columns: 1fr;
    }
    
    body.main-site .social-links {
        gap: 0.75rem;
    }
    
    body.main-site .section:last-of-type {
        padding-bottom: 80px;
    }
    
    .article-container {
        max-width: 95vw;
        padding: clamp(1.5rem, 4vw, 2.5rem);
        border-radius: 5px;
    }
    
    footer {
        padding: 0.95rem 0.5rem;
    }
    
    .footer-links > * {
        padding: 0 clamp(0.3rem, 1vw, 0.5rem);
    }
}

@media (max-width: 480px) {
    :root {
        --header-height: 65px;
    }
    
    .topbar-content {
        padding: 0 1rem;
    }
    
    .nav-links a {
        font-size: clamp(0.77rem, 3.6vw, 0.86rem);
        padding: 0.5rem 0.7rem;
        min-height: 46px;
    }
    
    .topbar-logo {
        width: clamp(44px, 8.8vw, 53px);
        height: clamp(44px, 8.8vw, 53px);
    }
    
    body.main-site .section {
        min-height: 100vh;
        padding: 1.5rem 0.75rem;
    }
    
    body.main-site .section:first-of-type {
        padding-top: calc(var(--header-height) + 1.5rem);
    }
    
    body.main-site .container {
        padding: 1.5rem 1rem;
    }
    
    body.main-site .column {
        padding: 1.5rem 1rem;
    }
    
    body.main-site .section:last-of-type {
        padding-bottom: 80px;
    }
    
    .article-container {
        padding: clamp(1rem, 3vw, 1.5rem);
        max-width: 98vw;
    }
    
    .logo {
        width: clamp(48px, 10vw, 80px);
        height: clamp(48px, 10vw, 80px);
    }
    
    .footer-links {
        font-size: 0.49rem;
    }
    
    .footer-links > * {
        padding: 0 clamp(0.2rem, 0.8vw, 0.4rem);
    }
}

/* Medium screens */
@media (max-width: 1024px) and (min-width: 769px) {
    body.main-site #services .columns {
        grid-template-columns: repeat(2, 1fr);
    }
    
    body.main-site #contact .columns {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
    body.main-site {
        -webkit-text-size-adjust: none;
        font-size: clamp(0.99rem, 4.05vw, 1.13rem);
    }
    
    body.article-page,
    body.legal-page {
        -webkit-text-size-adjust: none;
        font-size: clamp(0.99rem, 4.05vw, 1.13rem);
    }
    
    .nav-links a {
        font-size: clamp(0.99rem, 4.05vw, 1.13rem);
        padding: clamp(0.8rem, 3.5vw, 1.1rem) clamp(1.1rem, 4.5vw, 1.6rem);
        min-height: 52px;
    }
    
    .topbar-logo {
        width: clamp(57px, 12.1vw, 66px);
        height: clamp(57px, 12.1vw, 66px);
    }
    
    body.main-site h1 { font-size: clamp(2.52rem, 8.1vw, 3.42rem); }
    body.main-site h2 { font-size: clamp(1.98rem, 6.3vw, 2.7rem); }
    body.main-site h3 { font-size: clamp(1.53rem, 5.4vw, 1.98rem); }
}

/* =============================================================================
   8. UTILITY CLASSES
   ============================================================================= */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Print styles */
@media print {
    .topbar, footer, .social-links {
        display: none;
    }
    
    body {
        background: white !important;
        color: black !important;
        padding-bottom: 0 !important;
    }
    
    .section {
        break-inside: avoid;
        min-height: auto !important;
    }
    
    .container {
        box-shadow: none !important;
        border: 1px solid #ccc;
    }
    
    .article-container {
        box-shadow: none !important;
        background: white !important;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}