/*
Theme Name: ilBorzi
Theme URI: https://ilborzi.com
Author: Digital Strategy di Antonio Borzì
Author URI: https://digitalstrategyborzi.com
Description: Tema a blocchi (Full Site Editing) per ilborzi.com — personal brand di Antonio Borzì, consulente di digital marketing a Catania. Stile "pop mossa": Google Sans, navy + terracotta + sabbia, elementi ruotati, ombre piene, evidenziatore terracotta e la mascotte Puntino. Ogni pagina è modificabile in Gutenberg.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ilborzi
Tags: full-site-editing, block-styles, blog, portfolio, one-column, custom-colors, custom-logo, editor-style
*/

/* ============================================================
   ilBorzi — utility / block styles "POP MOSSA"
   Caricato sia sul front-end sia nell'editor (vedi functions.php).
   ============================================================ */

:root{
  --ib-navy:#21343E; --ib-navy-deep:#132137;
  --ib-terra:#C8674B; --ib-terra-lt:#D98B70;
  --ib-sand-50:#FBF8F3; --ib-sand-100:#EFE8DC; --ib-sand-200:#EDE7DC;
  --ib-ink:#21343E; --ib-ink-muted:#3E5260; --ib-ink-subtle:#5A6B7E;
  --ib-green:#3CA569; --ib-green-dark:#002D2D;
}

/* ---- Rotazioni (firma "mossa") ------------------------------ */
.is-tilt-l   { transform: rotate(-1.5deg); }
.is-tilt-r   { transform: rotate(1.5deg); }
.is-tilt-sl  { transform: rotate(-0.6deg); }
.is-tilt-sr  { transform: rotate(0.6deg); }
.is-tilt-xl  { transform: rotate(-2deg); }

/* ---- Ombre piene "hard" (niente blur) ----------------------- */
.shadow-hard-terra   { box-shadow: 5px 5px 0 var(--ib-terra); }
.shadow-hard-terra-lg{ box-shadow: 6px 6px 0 var(--ib-terra); }
.shadow-hard-navy    { box-shadow: 5px 5px 0 var(--ib-navy); }
.shadow-hard-navy-lg { box-shadow: 6px 6px 0 var(--ib-navy); }
.shadow-hard-green   { box-shadow: 6px 6px 0 var(--ib-green); }
.shadow-hard-sand    { box-shadow: 4px 4px 0 var(--ib-sand-50); }

/* ---- Card con bordo netto ----------------------------------- */
.card-outline{
  background:#fff; border:2px solid var(--ib-navy); border-radius:16px;
}

/* ---- Evidenziatore (highlighter) ---------------------------- */
mark.mark-terra, .mark-terra{
  background:var(--ib-terra); color:var(--ib-sand-50);
  padding:0 12px; border-radius:10px; display:inline-block;
  transform:rotate(-1.2deg);
}
.mark-navy{ background:var(--ib-navy); color:var(--ib-sand-50);
  padding:0 12px; border-radius:10px; display:inline-block; transform:rotate(-1deg); }

/* ---- Eyebrow / tag ------------------------------------------ */
.eyebrow{ font-size:13px; letter-spacing:0.12em; font-weight:800;
  color:var(--ib-terra); text-transform:uppercase; }

/* ---- Pill (tag categorie, chip) ----------------------------- */
.pill{ border-radius:999px; padding:6px 16px; font-size:13px; font-weight:800; display:inline-block; }
.pill-navy { background:var(--ib-navy); color:var(--ib-sand-50); }
.pill-terra{ background:var(--ib-terra); color:var(--ib-sand-50); }
.pill-line { border:2px solid var(--ib-navy); color:var(--ib-navy); }
.pill-sand { background:var(--ib-sand-100); color:var(--ib-navy); }

/* ---- Placeholder immagini (striped) ------------------------- */
.img-ph{
  background:
    repeating-linear-gradient(45deg,#e7ddcc 0 10px,#efe8dc 10px 20px);
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  color:#9a8f7d; font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:0.08em; text-transform:uppercase; min-height:180px;
}

/* ---- Header ------------------------------------------------- */
.ib-header{ background:var(--ib-sand-50); }
.ib-nav a{ font-weight:600; }
.ib-cta-wa{
  background:var(--ib-terra)!important; color:var(--ib-sand-50)!important;
  border-radius:999px!important; font-weight:700!important;
  transform:rotate(-1.5deg); box-shadow:3px 3px 0 var(--ib-navy);
}
.ib-cta-wa:hover{ background:var(--ib-navy)!important; }

/* ---- Ticker / marquee --------------------------------------- */
.ib-ticker{
  background:var(--ib-navy); color:var(--ib-sand-50);
  overflow:hidden; transform:rotate(-1deg); padding:14px 0;
}
.ib-ticker__track{
  display:flex; width:max-content; gap:32px; white-space:nowrap;
  font-size:15px; font-weight:700; letter-spacing:0.06em;
  animation:ib-marquee 22s linear infinite;
}
.ib-ticker__track span.sep{ color:var(--ib-terra); }
@keyframes ib-marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---- Puntino ------------------------------------------------ */
.ib-puntino img, img.ib-puntino{ display:block; }
.ib-bob{ animation:ib-bob 3.5s ease-in-out infinite; }
@keyframes ib-bob{ 0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-8px) rotate(2deg);} }

/* ---- Box "Puntino ti spiega" -------------------------------- */
.puntino-box{
  background:#fff; border:2px solid var(--ib-navy); border-radius:16px;
  padding:22px 24px; box-shadow:4px 4px 0 var(--ib-terra); transform:rotate(-0.4deg);
}

/* ---- Blog card ---------------------------------------------- */
.ib-card{ background:#fff; border:2px solid var(--ib-navy); border-radius:16px; overflow:hidden; transition:transform .18s ease; }
.ib-card:hover{ transform:rotate(0deg) translateY(-4px); }
.ib-card .wp-block-post-featured-image img{ border-bottom:2px solid var(--ib-navy); }

/* ---- Hover generico bottoni pill ---------------------------- */
.wp-block-button__link{ box-shadow:3px 3px 0 var(--ib-navy); }

/* ---- Prosa articolo ---------------------------------------- */
.ib-prose{ max-width:680px; margin-inline:auto; }
.ib-prose p{ font-size:17px; line-height:1.75; color:#33475A; }
.ib-prose h2{ font-size:28px; letter-spacing:-0.02em; color:var(--ib-navy); margin-top:8px; }
.ib-quote{ border-left:4px solid var(--ib-terra); padding:6px 0 6px 22px;
  font-size:22px; font-weight:700; line-height:1.4; color:var(--ib-navy); }

/* ---- Responsive -------------------------------------------- */
@media (max-width:781px){
  .is-tilt-l,.is-tilt-r,.is-tilt-sl,.is-tilt-sr,.is-tilt-xl{ transform:none; }
  .ib-ticker{ transform:none; }
}

/* ---- Ticker bleed ------------------------------------------ */
.ib-ticker{ margin-inline:-14px; }
.pill.pill-line{ border:2px solid var(--ib-navy); }

/* ---- Form contatti ----------------------------------------- */
.ib-form{ display:flex; flex-direction:column; gap:16px; }
.ib-form label{ display:flex; flex-direction:column; gap:6px;
  font-size:13px; font-weight:700; color:var(--ib-ink-subtle); }
.ib-form input[type=text],.ib-form input[type=email],.ib-form textarea{
  border:2px solid var(--ib-navy); border-radius:10px; padding:13px 16px;
  font-size:15px; font-family:inherit; color:var(--ib-ink); background:#fff; }
.ib-form input::placeholder,.ib-form textarea::placeholder{ color:#8B9AA8; }
.ib-form .ib-check{ flex-direction:row; align-items:flex-start; gap:10px;
  font-weight:400; color:var(--ib-ink-subtle); }
.ib-form .ib-check input{ margin-top:3px; width:18px; height:18px; accent-color:var(--ib-terra); }
.ib-form button{
  background:var(--ib-terra); color:var(--ib-sand-50); border:0; cursor:pointer;
  border-radius:12px; padding:15px; font-size:16px; font-weight:800; font-family:inherit;
  box-shadow:4px 4px 0 var(--ib-navy); }
.ib-form button:hover{ background:var(--ib-navy); }
.ib-form__note{ font-size:12px; color:#8B9AA8; text-align:center; margin:0; }

/* ---- Dropcap paragrafo articolo ---------------------------- */
.ib-prose p:first-of-type{ font-size:20px; line-height:1.6; color:var(--ib-navy); font-weight:500; }

/* ---- Credo list -------------------------------------------- */
.ib-credo{ line-height:1.7; }
.ib-credo li{ margin-bottom:6px; }