/*
base.css defines CamCount's global website design system. It handles 
typography, page width, navigation, buttons, links, footer structure, 
responsive behavior, and reusable layout primitives. Individual pages 
such as Privacy should only add page-specific styling on top of this.
*/

:root {
    --color-primary: #2563eb;
    --color-primary-dark: #1e3a8a;
    --color-accent: #f59e0b; 

    --color-text: #111827;
    --color-text-muted: #667085; 

    --color-background: #ffffff;
    --color-surface: #f8fafc;
    --color-border: #e5e7eb; 

    --color-footer: #f8fafc;

    --container-width: 1200px;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0,05);

    --transition: 180ms ease;
}

/*------------------------------
  Reset / global foundations
------------------------------*/

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--color-background);
    color: var(--color-text);

    font-family:
        Inter, 
        system-ui,  
        --apple-system,    
        BlinkMacSystemFont,   
        "Segoe UI",  
        sans-serif;  

    font-size: 16px;  
    line-height: 1.6;
}

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

a {  
    color: inherit;  
    text-decoration: none;   
    transition:    
        color var(--transition),
        background-color var(--transition),  
        border-color var(--transition),
        opacity var(--transition);
}

button, 
input, 
textarea, 
select {  
    font: inherit;
}

/* ---------------------------------------
   Shared container
-----------------------------------------*/

.container {
    width: min(  
        calc(100% - 48px),
        var(--container-width)
    ); 

    margin-inline: auto;
}

/*-----------------------------------------
  Header
-----------------------------------------*/
.site-header {
    position: sticky; 
    top: 0; 
    z-index: 1000;  

    width: 100%; 
    background:  
        rgba(255, 255, 255, 0.94);  

    backdrop-filter: blur(14px);  
    -webkit-backdrop-filter: blur(14px);  

    border-bottom:  
        1px solid rgba(299, 231, 235, 0.8);  
}

.navbar {  
    min-height: 76px; 

    display: flex; 
    align-items: center; 
    justify-content: space-between; 

    gap: 32px; 
}

/* Brand */

.brand {
    display: inline-flex; 
    align-items: center; 
    flex-shrink: 0;
}

.brand img {  
    width: auto; 
    height: 42px; 
}

/* Main navigation */

.nav-links {  
    display: flex; 
    align-items: center;  
    justify-content: center;  

    gap: 32px; 

    font-size: 0.95rem;  
    font-weight: 500;  
}

.nav-links a {  
    color: #25324b;
}

.nav-link a:hover {  
    color: var(--color-primary);
}

/* Navigation actions */

.nav-actions {
    display: flex; 
    align-items: center;  
    gap: 20px;  

    font-size: 0.95rem; 
    font-weight: 600;
}

.nav-actions > a:not(.button):hover {
    color: var(--color-primary);
}

/* -------------------------------
   Buttons 
--------------------------------*/

.button {  
    min-height: 46px; 

    display: inline-flex;  
    align-items: center;  
    justify-content: center;  

    padding: 10px 20px;  

    border-radius: var(--radius-sm);  

    font-weight: 600; 
    line-height: 1;  

    cursor: pointer;
}

.button-primary {  
    color: #ffffff;  
    background: var(--color-primary);

    border: 
        1px solid var(--color-primary);
}

.button-primary:hover {   
    background: #1d4ed8;  
    border-color: #1d4ed8;  

    transform: translateY(-1px);  
}

.button-secondary {  
    color: var(--color-primary);
    background: transparent;  

    border:   
        1px solid var(--color-primary);
}

.button-secondary:hover {  
    background: #eff6ff;  
}

/* -------------------------------
   Main page
--------------------------------*/

main {  
    min-height: 60vh; 
}

/* -------------------------------
   Shared footer
--------------------------------*/

.site-footer {  
    margin: 0 24px 24px;  

    border-radius: var(--radius-lg);  

    background: var(--color-footer);
    border: 1px solid var(--color-border);
}

.footer-content {
    display: grid; 

    grid-template-columns: 
        minmax(240px, 1.5fr)
        repeat(3, minmax(130px, 1fr));

    gap: 48px; 

    padding-top:  48px;  
    padding-bottom: 42px; 
}

/* Footer brand */

.footer-brand img {  
    width: auto;  
    height: 42px;  

    margin-bottom: 18px;
}

.footer-brand p {  
    max-width: 280px; 

    margin: 0; 

    color: var(--color-text-muted);
    font-size: 0.93rem; 
}

/* Footer columns */

.footer-column {  
    display: flex;  
    flex-direction: column;  

    align-items: flex-start;  

    gap: 11px; 
}

.footer-column h3 {  
    margin: 0 0 8px;  

    color: #0f172a; 

    font-size: 0.95rem; 
    font-weight: 700;
}

.footer-column a {  
    color: var(--color-text-muted);  

    font-size: 0.9rem;
}

.footer-column a:hover {  
    color: var(--color-primary);
}

/* Footer bottom */ 

.footer-bottom {  
    padding-top: 20px; 
    padding-bottom: 24px;  

    border-top: 1px solid var(--color-border);  

    color: var(--color-text-muted);

    font-size: 0.85rem; 
}

/*------------------------------------
  Generic reusable utilities
------------------------------------*/

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

.text-primary {  
    color: var(--color-primary);
}

.surface {
    background: var(--color-surface);
}

.card {  
    background: #ffffff; 

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);
}

/* --------------------------------------
   Accessibility
---------------------------------------*/

a:focus-visible,  
button:focus-visible, 
input:focus-visible, 
textarea:focus-visible, 
select:focus-visible { 
    outline: 
       3px solid 
       rgba(37, 99, 235, 0.3);

    outline-offset: 3px;
}

::selection {
    color: #ffffff;  
    background: var(--color-primary);
}

/*------------------------------------
  Tablet
------------------------------------*/

@media (max-width: 960px) {

    .container {  
        width: min(  
            calc(100% - 36px),  
            var(--container-width)
        );
    }

    .navbar {  
        min-height: 70px; 
    }

    .nav-links {   
        display: none;
    }

    .footer-content { 
        grid-template-columns:  
            repeat(2, minmax(0, 1fr));  

        gap: 36px; 
    }
}

/* -----------------------------------
   Mobile
------------------------------------*/

@media (max-width: 640px) {  
    
    .container {
        width: 
            calc(100% - 28px);
    }

    .site-header {  
        position: relative;
    }

    .navbar {  
        min-height: 66px; 
        gap: 14px;
    }

    .brand img {
        height: 36px; 
    }

    .nav-actions {
        gap: 12px; 
    }

    .nav-actions > a:not(.button) {  
        display: none;
    }

    .button {
        min-height: 42px;  

        padding:  
            9px 15px;  

        font-size: 0.88rem;
    }

    .site-footer {  
        margin:  
            0 12px 12px;

        border-radius: 18px; 
    }

    .footer-content {  
        grid-template-columns: 1fr;  

        gap: 30px;  

        padding-top: 34px; 
        padding-bottom: 30px; 
    }

    .footer-brand p {
        max-width: none;
    }

    .footer-bottom {
        padding-bottom: 20px; 

        text-align: center;
    }
}