/*
Theme Name: Nook
Author: gpiczora
Version: 1.0
Description: Lekki motyw biznesowy oparty na zmiennych CSS.

      "sm": 573,    // 35.8125rem
      "md": 768 ,   // 48rem
      "lg": 1024,   // 64rem
      "xl": 1320    //  82.5rem
*/
@charset "UTF-8";

@font-face {
  font-family: 'nook-theme-font';
  font-style: normal;
  font-weight: 400;
  font-display: swap; 
  src: url('css/fonts/nook-theme-regular.woff2') format('woff2'), 
       url('css/fonts/nook-theme-regular.woff') format('woff'); 
}

@font-face {
    font-family: 'nook-theme-font';
    font-style: normal;
    font-weight: 500;
    font-display: swap; 
    src: url('css/fonts/nook-theme-medium.woff2') format('woff2'), 
         url('css/fonts/nook-theme-medium.woff') format('woff'); 
  }

@font-face {
    font-family: 'nook-theme-font';
    font-style: normal;
    font-weight: 600;
    font-display: swap; 
    src: url('css/fonts/nook-theme-bold.woff2') format('woff2'), 
         url('css/fonts/nook-theme-bold.woff') format('woff'); 
  }


:root {
  --base-font-family: 'nook-theme-regular';
  --border-bottom: 1px solid #eee;
}

/* ==========================================================================
   1. DESIGN TOKENS (Centrum Dowodzenia)
   ========================================================================== */
   :root {
    /* TYPOGRAFIA (Major Third Scale) */
    --nook-fs-base: 16px;
    --nook-fs-card: 14px;
    --nook-fs-footer: 15px;
    --nook-ratio: 1.125;
    --nook-fs-h1: calc(var(--nook-fs-base) * var(--nook-ratio) * var(--nook-ratio) * var(--nook-ratio));
    --nook-fs-h2: calc(var(--nook-fs-base) * var(--nook-ratio) * var(--nook-ratio));
    --nook-fs-h3: calc(var(--nook-fs-base) * var(--nook-ratio));
    --nook-fs-small: 0.85rem;

    --nook-lh-base: 1.6;

    /* ODSTĘPY (8px Base) */
    --nook-unit: 8px;
    --nook-gap: calc(var(--nook-unit) * 4); /* 32px */
    --nook-gap-l: calc(var(--nook-unit) * 8); /* 64px */
    --nook-col-gap: 24px;

    /* LAYOUT */
    --nook-max-width: 1240px;
    --nook-col-main: 65%;
    --nook-col-side: 35%;

    /* SKÓRA DOMYŚLNA (Neutral) */
    --nook-primary: #F34D4F;
    --nook-link: #F34D4F;
    --nook-text: #0F1228;
    --nook-bg: #ffffff;
    --nook-blue: #F34D4F;
    --nook-widget-bg: #F6F6F6;
    --nook-footer-bg: #F5F8FF;
    --nook-border: #e2e8f0;
    --nook-radius-lg: 30px;
    --nook-radius: 12px;
    --nook-radius-sm: 8px;
    --nook-font: 'nook-theme-font', system-ui, -apple-system, sans-serif;

    --nook-button-color: #FFF;
    --nook-button-border: 1px solid var(--nook-primary);

    --nook-bg-30: #fafafa;
    --nook-bg-50: #eee;
    --nook-bg-100: #dbdbdb;

    --nook-border-50: 1px solid #eee;
    --nook-border-100: 1px solid #dbdbdb;

    --nook-disabled-bg: #f5f5f5;;
    --nook-disabled-color: #999;

    --nook-button-transition: filter 0.2s;
    --nook-transition: all 0.2s ease;
    --nook-transition-menu: all 0.4s ease-in-out;
}

    /* SKÓRA: Serious (B2B / Warszawa) */
    body.skin-serious {
        --nook-primary: #101820;
        --nook-text: #000000;
        --nook-bg: #fdfdfd;
        --nook-footer-bg: #111111;
        --nook-border: #000000;
        --nook-radius: 0px;
        --nook-font: 'Playfair Display', serif;
        --nook-gap: calc(var(--nook-unit) * 6); /* 48px */
    }

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--nook-fs-base); scroll-behavior: smooth; }
body { 
    margin: 0; 
    font-family: var(--nook-font); 
    background: var(--nook-bg); 
    color: var(--nook-text); 
    line-height: var(--nook-lh-base);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}


h1 { font-size: var(--nook-fs-h1); line-height: 1.2; margin-bottom: calc(0.5 * var(--nook-gap)); font-weight: 600;}
h2 { font-size: var(--nook-fs-h2); line-height: 1.2; margin-bottom: calc(0.5 * var(--nook-gap)); font-weight: 600;}
h3 { font-size: var(--nook-fs-h3); line-height: 1.3; margin-bottom: calc(0.125 * var(--nook-gap)); font-weight: 600;}
a { color: var(--nook-text); text-decoration: none;  }
a:hover { color: var(--nook-link);}


.m-1 { margin:4px;}
.m-2 { margin: 8px;}
.m-3 { margin: 12px;}

.bg-30 { background: var(--nook-bg-30); }
.bg-50 { background: var(--nook-bg-50); }
.bg-100 { background: var(--nook-bg-100); }
/* ==========================================================================
   3. LAYOUT ENGINE
   ========================================================================== */
.nook-container {
     max-width: var(--nook-max-width); 
     margin: 0 auto; 
     padding: 0 var(--nook-gap); 
}

.nook-main-grid {
    display: grid;
    gap: var(--nook-gap);
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .nook-main-grid {
        grid-template-columns: var(--nook-col-main) var(--nook-col-side);
    }
}

.row-full { 
    margin-left: 0;
    margin-right: 0;

}

.nook-section { padding-bottom: var(--nook-gap-l); }

/* ==========================================================================
   4. KOMPONENTY (UI)
   ========================================================================== */

/* Przycisk Akcji */
.nook-btn, button[type="submit"], .btn-submit {
    display: inline-block;
    background: var(--nook-primary);
    color: var(--nook-button-color);
    padding: 14px 28px;
    border-radius: var(--nook-radius);
    font-weight: 700;
    border: var(--nook-button-border);
    cursor: pointer;
    text-align: center;
    transition: var(--nook-button-transition);

}
.nook-btn:hover,  button[type="submit"]:hover:not(:disabled), .btn-submit:hover { filter: brightness(1.2); }
.nook-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; }

/* Formularze i Selecty */
.nook-select, .nook-input, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select {
    width: 100%;
    padding: 14px !important;
    border: var(--nook-border-50);
    border-radius: var(--nook-radius);
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    
}

/* ==========================================================================
   3. HEDER & LOGO
   ========================================================================== */
.nook-site-header {
    height: 80px;
}
.custom-logo { 
    max-width: 60px;
}
@media(min-width: 1024px) {
    .custom-logo { 
        max-width: 80px;
    }    
}
.nook-site-header .custom-logo { 
    display: block; 
}
/* ==========================================================================
   6. STOPKA
   ========================================================================== */
.nook-site-footer {
    font-size: var(--nook-fs-footer);
    background: var(--nook-footer-bg);
    border-top: 1px solid var(--nook-border);
    padding: var(--nook-gap-l) 0;
    margin-top: var(--nook-gap-l);
}

.nook-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--nook-gap);
}

/* ==========================================================================
   7. GALERIA 1+6
   ========================================================================== */
.nook-gallery-layout { display: flex; flex-direction: column; gap: 15px; }
.nook-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.nook-gallery-featured img, .nook-gallery-grid img {
    width: 100%;
    height: auto;
    border-radius: var(--nook-radius);
    object-fit: cover;
}


/* ----------------------------------------------------------------------------
/* Card
/* --------------------------------------------------------------------------*/
.nook-card {
    padding-bottom: var(--nook-col-gap);
    overflow: hidden;
    font-size: var(--nook-fs-card);
    border: var(--nook-border-100);
    border-radius: var(--nook-radius-sm);
}
.nook-card h3 {
    font-size: var(--nook-fs-card);
}

.card-body {
    padding-top: calc( 0.75 * var(--nook-col-gap));
    padding-left: calc( 0.5 * var(--nook-col-gap));
    padding-right: calc( 0.5 * var(--nook-col-gap));
}

.nook-offer-link:hover {
    color: var(--nook-text);
}






/* 

.row-full::after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.4);
  z-index:0;
}

 */