/*
Theme Name: unodinove
Author: Cline
Description: Un tema WordPress classico, performante e mobile-first per un sito sull'Enneagramma.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: unodinove
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables
  ## Colors
  ## Typography
  ## Spacing & Layout
  ## Buttons
  ## Breakpoints
# Fonts
--------------------------------------------------------------*/

:root {
  --wp--style--block-gap: 1rem;
  --wp--style--layout--content-size: 800px;
  --wp--style--layout--wide-size: 1200px;

  /* ## Colors */
  --color-primary: #67a3f1;
  --color-primary-light: #dae5fa;
  --color-primary-dark: #2a7ae4;
  --color-primary-darker: #1a4e93;
  --color-underline: #b5d6ff;
  --color-text: #111111;
  --color-heading: #222222;
  --color-background: #eef3fe;
  --color-white: #ffffff;
  
  /* Background Highlights */
  --color-bg-tint: #f5f9ff;      /* Very light primary tint for soft sections */
  --color-bg-muted: #f8f8f8;     /* Light grey for neutral sections */
  --color-bg-highlight: #e3f2fd; /* Slightly stronger primary tint for emphasis */

  /* Enneatype Colors */
  --color-type-1-primary: #ffadae;
  --color-type-1-bg: #fbdfe3;
  --color-type-2-primary: #ffd7a6;
  --color-type-2-bg: #fcece0;
  --color-type-3-primary: #fdf5b7;
  --color-type-3-bg: #fcf7e7;
  --color-type-4-primary: #cbffc0;
  --color-type-4-bg: #ebf9ea;
  --color-type-5-primary: #9bf7ff;
  --color-type-5-bg: #daf8fe;
  --color-type-6-primary: #a0c4ff;
  --color-type-6-bg: #dde6ff;
  --color-type-7-primary: #beb2ff;
  --color-type-7-bg: #e5e0fd;
  --color-type-8-primary: #ffc6ff;
  --color-type-8-bg: #fae7ff;
  --color-type-9-primary: #e9e9e9;
  --color-type-9-bg: #f4f3f8;

  /* ## Spacing & Layout */
  --layout-width: 1200px;
  --space-unit: 1rem;
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.5 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
  --mobile-padding: 1rem;


  /* ## Buttons */
  --button-bg: #57A4F6;
  --button-hover-bg: #57A4F6; /* Placeholder, can be changed */

  /* Typography */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --line-height-base: 1.6;
  
  /* Font sizes - Mobile first with desktop overrides via media queries */
  --font-size-smaller: 0.75rem;  /* 12px */
  --font-size-small: 0.875rem;   /* 14px */
  --font-size-base: 1rem;        /* 16px */
  --font-size-lg: 1.125rem;      /* 18px */
  --font-size-h1: 2rem;          /* 32px mobile */
  --font-size-h2: 1.75rem;       /* 28px mobile */
  --font-size-h3: 1.5rem;        /* 24px mobile */
  --font-size-h4: 1.25rem;       /* 20px mobile */
}
/*--------------------------------------------------------------
# Fallback layout Gutenberg
--------------------------------------------------------------*/

.is-nowrap{ flex-wrap: nowrap !important; }
.is-layout-flex { display: flex; flex-wrap: wrap; gap: var(--wp--style--block-gap); align-items: normal; }
.wp-block-group.is-layout-flex, .wp-block-columns.is-layout-flex { display: flex; flex-wrap: wrap; gap: var(--wp--style--block-gap); }
.is-layout-constrained > * { margin-block: calc(var(--wp--style--block-gap) / 2); }
.is-layout-constrained .alignwide { max-width: var(--wp--style--layout--wide-size); margin-inline: auto; }
.is-layout-constrained .alignfull { width: 100%; max-width: none; margin-inline: 0; }

/*--------------------------------------------------------------
# Color Utility Classes
--------------------------------------------------------------*/
.primary-color { background-color: var(--color-primary); }
.primary-color-dark { background-color: var(--color-primary-dark); }

.type-1-color   { background-color: var(--color-type-1-primary); }
.type-1-bg-color { background-color: var(--color-type-1-bg); }

.type-2-color   { background-color: var(--color-type-2-primary); }
.type-2-bg-color { background-color: var(--color-type-2-bg); }

.type-3-color   { background-color: var(--color-type-3-primary); }
.type-3-bg-color { background-color: var(--color-type-3-bg); }

.type-4-color   { background-color: var(--color-type-4-primary); }
.type-4-bg-color { background-color: var(--color-type-4-bg); }

.type-5-color   { background-color: var(--color-type-5-primary); }
.type-5-bg-color { background-color: var(--color-type-5-bg); }

.type-6-color   { background-color: var(--color-type-6-primary); }
.type-6-bg-color { background-color: var(--color-type-6-bg); }

.type-7-color   { background-color: var(--color-type-7-primary); }
.type-7-bg-color { background-color: var(--color-type-7-bg); }

.type-8-color   { background-color: var(--color-type-8-primary); }
.type-8-bg-color { background-color: var(--color-type-8-bg); }

.type-9-color   { background-color: var(--color-type-9-primary); }
.type-9-bg-color { background-color: var(--color-type-9-bg); }


/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/

/* poppins-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/poppins-v23-latin-regular.woff2') format('woff2');
}
/* poppins-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('./assets/fonts/poppins-v23-latin-italic.woff2') format('woff2');
}
/* poppins-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('./assets/fonts/poppins-v23-latin-500.woff2') format('woff2');
}
/* poppins-600italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('./assets/fonts/poppins-v23-latin-500italic.woff2') format('woff2');
}


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

/* Reset Margins */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Responsive Images and Embeds */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make sure forms use correct font */
input,
button,
textarea,
select {
  font: inherit;
}

/*--------------------------------------------------------------
# Responsive Typography (Desktop)
--------------------------------------------------------------*/
@media (min-width: 769px) {
  :root {
    --font-size-smaller: 0.875rem;  /* 14px */
    --font-size-small: 1rem;        /* 16px */
    --font-size-base: 1.125rem;     /* 18px */
    --font-size-lg: 1.25rem;        /* 20px */
    --font-size-h1: 3rem;           /* 48px desktop */
    --font-size-h2: 2.25rem;        /* 36px desktop */
    --font-size-h3: 1.75rem;        /* 28px desktop */
    --font-size-h4: 1.5rem;         /* 24px desktop */
  }
}