/*
Theme Name: Rams Minimal
Theme URI: https://example.com/rams-minimal
Author: Gabriele + ChatGPT
Description: Tema WordPress superveloce, mobile-first, un solo CSS, senza Customizer, con pattern-blocchi per comporre pagine (1 o 2 colonne, testo/immagine). Ispirato a Dieter Rams.
Version: 1.0.0
Text Domain: rams-minimal
License: MIT
*/

/* =====================
   Design tokens
====================== */
:root{
  --black: #373539;
  --orange: #EE6C29;
  --ciano: #708090;
  --white: #fcfcfc;

  --container-max: 1600px;
  --content-pad: clamp(16px, 3vw, 32px);
  --radius: 0;

  --menu-ease: cubic-bezier(.22,.61,.36,1);
  --menu-dur: .28s;
}

/* Reset leggero e base tipografica */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--black);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width: 100%; display: block; height: auto; }
a{ color: var(--orange); text-decoration: none; }
a:hover{ text-decoration: underline; }
p{ margin: 0 0 1rem 0; }
h1,h2,h3{ margin: 0 0 .6rem 0; font-weight: 700; line-height: 1.3em}
h1{ font-size: clamp(1.6rem, 4.5vw, 3rem); }
h2{ font-size: clamp(1.3rem, 3.2vw, 2.2rem); }
h3{ font-size: clamp(1.1rem, 2.4vw, 1.4rem); }

/* Contenitore centrale del body */
.site{ max-width: var(--container-max); margin-inline: auto; padding-inline: var(--content-pad); }

/* =====================
   Header + hamburger menu
====================== */
.site-header{ position: relative; z-index: 10; }
.site-header__bar{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: clamp(12px, 2.5vw, 20px) var(--content-pad);
}
.logo{ display: inline-flex; align-items: center; gap: 10px; }
.logo__mark{ width: 32px; height: 32px; background: var(--orange); border-radius: 0; }
.logo__text{ font-weight: 700; letter-spacing: .3px; }

.hamburger{
  appearance: none; border: 0; background: transparent; cursor: pointer; padding: 10px; margin: -10px;
}
.hamburger__box{ width: 22px; height: 16px; position: relative; display: inline-block; }
.hamburger__line{ position: absolute; left: 0; right: 0; height: 2px; background: var(--black); border-radius: 0; }
.hamburger__line:nth-child(1){ top: 0; }
.hamburger__line:nth-child(2){ top: 7px; }
.hamburger__line:nth-child(3){ bottom: 0; }

/* Nascondi hamburger quando menu è aperto */
body[data-menu-open="true"] .hamburger{ visibility: hidden; }

/* =====================
   Overlay menu
====================== */
.menu-overlay{
  position: fixed; inset: 0; background: var(--ciano); color: var(--white);
  z-index: 9999;
  opacity: 0; transform: translateY(-12px); pointer-events: none; visibility: hidden;
  transition: opacity var(--menu-dur) var(--menu-ease), transform var(--menu-dur) var(--menu-ease), visibility 0s linear var(--menu-dur);
  will-change: opacity, transform;
}
body[data-menu-open="true"] .menu-overlay{
  opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; transition-delay: 0s, 0s, 0s;
}
body[data-menu-open="true"]{ overflow: hidden; }

.menu-overlay__inner{ height: 100%; display: grid; grid-template-rows: auto 1fr; padding: var(--content-pad); }
.menu-overlay__top{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.menu-title{ font-weight: 700; }
.menu-close{ appearance: none; border: 0; background: transparent; cursor: pointer; padding: 10px; margin: -10px; font-size: 24px; line-height: 1; font-weight: 700; color: var(--white); }
.menu-overlay__content{ display: grid; place-items: start center; padding-top: clamp(10px, 5vh, 40px); }
.menu-list{ width: 100%; max-width: 360px; list-style: none; padding: 0; margin: 0; }
.menu-list li{ border-bottom: 1px solid rgba(238,238,232,.25); }
.menu-list a{ display: block; padding: 16px 0; font-size: clamp(1.2rem, 3.5vw, 2rem); font-weight: 700; color: var(--white); transition: opacity .15s ease; }
.menu-list a:hover{ opacity: .8; }

@media (prefers-reduced-motion: reduce){
  .menu-overlay{ transition: none; }
  .menu-list a{ transition: none; }
}

/* =====================
   Sezioni del body
====================== */
.section{ padding-block: 20px; }
.section--full .section__body{ max-width: 800px; }

/* Variante: sezione a due colonne */
.split{ display: grid; gap: clamp(16px, 4vw, 40px); align-items: center; }
.split__media img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; border-radius: 0; }
@media (min-width: 768px){ .split{ grid-template-columns: 1fr 1fr; } }
.kicker{ text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--orange); margin-bottom: .4rem; }
.lead{ font-size: clamp(1rem, 2.6vw, 1.25rem); max-width: 65ch; }

.bg-light{ background: var(--white); color: var(--black); }
.bg-ciano{ background: var(--ciano); color: var(--white); }
.bg-dark{ background: var(--black); color: var(--white); }
.chip{ display: inline-block; background: var(--orange); color: white; padding: .25rem .5rem; border-radius: 0; font-size: .8rem; font-weight: 700; }

.cards{ display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .cards{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .cards{ grid-template-columns: repeat(3, 1fr); } }
.card{ background: white; border: 1px solid rgba(55,53,57,.12); border-radius: 0; padding: 16px; }
.card h3{ margin-bottom: .25rem; }
.card p{ margin-bottom: .5rem; }

.btn{ display: inline-block; padding: .7rem 1rem; background: var(--orange); color: white; border-radius: 0; font-weight: 700; border: 0; }
.btn--ghost{ background: transparent; color: var(--orange); border: 2px solid var(--orange); border-radius: 0; }

.site-footer{ padding: 24px var(--content-pad) 48px; border-top: 1px solid rgba(55,53,57,.1); font-size: .9rem; }
.footer-grid{ display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 768px){ .footer-grid{ grid-template-columns: 2fr 1fr; } }
.muted{ opacity: .7; }

/* Gutenberg front-end light normalizer (disabilitiamo wp-block-library in PHP, ma teniamo alcuni reset minimi) */
.wp-site-blocks, .entry-content{ font-size: inherit; line-height: inherit; }
.alignwide{ max-width: min(1200px, 100%); margin-inline: auto; }
.alignfull{ width: 100vw; margin-left: 50%; transform: translateX(-50%); }

.page-id-12 .bg-light {background:#454545!important}

.page-id-12 .bg-light h1 {color:#ffffff!important}