/**
 * Theme Base Styles
 * Core reusable styles for WordPress custom themes
 * 
 * File: theme-base.css
 * Author: Andrea Ricciotti
 * Version: 3.1.0 - Restructured
 * 
 * Contains:
 * - Typography system (modular scale with pow() - configurable via CSS variables)
 * - Navigation/Menu base styles
 * - Print styles
 * 
 * Load order:
 * 1. normalize.css
 * 2. wp-core.css (WordPress-specific)
 * 3. utilities.css (universal utilities)
 * 4. theme-base.css (this file)
 * 5. forms.css (optional)
 * 6. comments.css (optional)
 * 7. style.css (theme specific)
 * 
 * Note: This file contains reusable, configurable styles that can work
 * across different WordPress themes by adjusting CSS custom properties.
 */


/* ========================================
   ! TYPOGRAPHY SYSTEM
   ======================================== */

/* Base HTML typography */
html {
  font-size: var(--base-font-size);
  font-size: clamp(var(--min-font-size), calc(10.86px + 0.357vw), var(--max-font-size));
}

body {
  font-size: calc(var(--body-font-size) * var(--font-multi));
  font-family: var(--body-font-family), var(--body-font-type, sans-serif);
  font-weight: var(--body-font-weight, 400);
  font-style: var(--body-font-style, normal);
  line-height: var(--body-line-height);
  color: var(--over-bg, var(--text-color, #1a1a1a));
  font-optical-sizing: auto;
}


/* Heading scale using pow() */
h1, .h1 {
  font-size: calc(var(--body-font-size) * pow(var(--font-scale), 5) * var(--font-multi));
}

h2, .h2 {
  font-size: calc(var(--body-font-size) * pow(var(--font-scale), 4) * var(--font-multi));
}

h3, .h3 {
  font-size: calc(var(--body-font-size) * pow(var(--font-scale), 3) * var(--font-multi));
}

h4, .h4 {
  font-size: calc(var(--body-font-size) * pow(var(--font-scale), 2) * var(--font-multi));
}

h5, .h5 {
  font-size: calc(var(--body-font-size) * pow(var(--font-scale), 1) * var(--font-multi));
}

h6, .h6 {
  font-size: calc(var(--body-font-size) * var(--font-multi));
}

/* All headings line-height */
.ff-h,
:not(.ff-p):where(
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6) {
  font-family: var(--headings-font-family), var(--headings-font-type, sans-serif);
  font-weight: var(--headings-font-weight, 700);
  font-style: var(--headings-font-style, normal);
  line-height: var(--headings-line-height);
  font-optical-sizing: auto;
  margin-block-start: 1.5em;
}

/* Size modifiers */
.tiny { --font-multi: 0.5; }
:not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).tiny {
  font-size: 0.5em;
}

.small { --font-multi: 0.75; }
:not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).small {
  font-size: 0.75em;
}

.large { --font-multi: 1.2; }
:not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).large {
  font-size: 1.1em;
}

.big { --font-multi: 1.5; }
:not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).big {
  font-size: 1.3em;
}

.huge { --font-multi: 3; }
:not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).huge {
  font-size: 1.6em;
}


/* Paragraph spacing */
p {
  margin-top: 0;
  margin-bottom: 1em;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

mark {
  background: linear-gradient(-100deg, hsla(48, 92%, 75%, 0.3), hsla(48, 92%, 75%, 0.7) 95%, hsla(48, 92%, 75%, 0.1));
  border-radius: 1em 0;
  padding: 0.5rem;
}

ul, ol {
  /* box-sizing: border-box; */
  /* padding-inline-start: 1rem; */
}

ul li,
ol li {
  /* line-height: 1.5; */
  margin-bottom: .5em;
}

a:not(.button, .wp-block-button__link) {
  color: var(--link-color, #0066cc);
  text-decoration: none;
  transition: color .5s cubic-bezier(.215, .61, .355, 1);
}

/* Hover nei temi chiari */
[data-theme="light"] a:hover,
body:not([data-theme="dark"]) a:not(.button, .wp-block-button__link):hover {
  color: oklch(from var(--link-color) calc(l + var(--hover-light-diff)) calc(c + 0.05) h);
}

/* Hover nei temi scuri */
[data-theme="dark"] a:not(.button, .wp-block-button__link):hover {
  color: var(--primary-darker, #014a92);
  color: oklch(from var(--primary) calc(l + var(--hover-dark-diff)) calc(c + 0.05) h);
}

/* Link with underline animation */
.link {
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-weight: bold;
}

.link::after {
  content: ' ';
  border-bottom: 2px solid var(--primary-lighter);
  position: absolute;
  width: 0;
  left: 0;
  bottom: 0;
  transition: all 0.2s linear;
}

.link:hover::after {
  width: 100%;
}

@media screen and (pointer: coarse) {
  .link::after {
    width: 100%;
  }
}

button:disabled {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

@media (min-width: 768px) {
  /* Size modifiers */
  .tiny-md { --font-multi: 0.5; }
  :not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).tiny-md {
    font-size: 0.5em;
  }

  .small-md { --font-multi: 0.75; }
  :not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).small-md {
    font-size: 0.75em;
  }

  .large-md { --font-multi: 1.2; }
  :not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).large-md {
    font-size: 1.1em;
  }

  .big-md { --font-multi: 1.5; }
  :not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).big-md {
    font-size: 1.3em;
  }

  .huge-md { --font-multi: 3; }
  :not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).huge-md {
    font-size: 1.6em;
  }
}

@media (min-width: 992px) {
  /* Size modifiers */
  .tiny-lg { --font-multi: 0.5; }
  :not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).tiny-lg {
    font-size: 0.5em;
  }

  .small-lg { --font-multi: 0.75; }
  :not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).small-lg {
    font-size: 0.75em;
  }

  .large-lg { --font-multi: 1.2; }
  :not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).large-lg {
    font-size: 1.1em;
  }

  .big-lg { --font-multi: 1.5; }
  :not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).big-lg {
    font-size: 1.3em;
  }

  .huge-lg { --font-multi: 3; }
  :not(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6).huge-lg {
    font-size: 1.6em;
  }
}

/* ========================================
   NAVIGATION / MENU
   ======================================== */

/* Reset menu lists */
.menu,
.menu ul,
.nav-menu,
.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Menu items */
.menu li,
.nav-menu li {
  position: relative;
}

/* Menu links */
.menu a,
.nav-menu a {
  display: block;
  text-decoration: none;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}

/* Current menu item */
.current-menu-item > a,
.current_page_item > a {
  font-weight: bold;
}

/* Dropdown menu (submenu) */
.menu .sub-menu,
.nav-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--light, #f5f5f5);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

/* Show submenu on hover (desktop) */
@media (hover: hover) {
  .menu li:hover > .sub-menu,
  .nav-menu li:hover > .sub-menu {
    display: block;
  }
}

/* Submenu items */
.menu .sub-menu li,
.nav-menu .sub-menu li {
  width: 100%;
}

/* Menu item with children indicator */
.menu-item-has-children > a::after {
  content: ' ▾';
  font-size: 0.8em;
  margin-left: 0.25em;
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: 2px solid var(--dark, #1a1a1a);
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 1rem;
}

/* Mobile menu styles */
@media (max-width: 767px) {
  .menu-toggle {
    display: block;
  }
  
  /* Hide menu by default on mobile */
  .menu,
  .nav-menu {
    display: none;
    width: 100%;
  }
  
  /* Show menu when toggled */
  .menu.is-active,
  .nav-menu.is-active {
    display: block;
  }
  
  /* Stack menu items vertically */
  .menu li,
  .nav-menu li {
    width: 100%;
  }
  
  /* Submenu on mobile */
  .menu .sub-menu,
  .nav-menu .sub-menu {
    position: static;
    box-shadow: none;
    background: transparent;
    padding-left: 1rem;
  }
  
  .menu .sub-menu li a,
  .nav-menu .sub-menu li a {
    padding-left: 2rem;
  }
}


/* ========================================
   ! PRINT STYLES
   ======================================== */

@media print {
  /* Hide non-essential elements */
  header,
  footer,
  .menu,
  .nav-menu,
  .menu-toggle,
  .sidebar,
  .widget,
  .comments-area,
  .comment-respond,
  .post-navigation,
  .posts-navigation,
  .pagination,
  .no-print {
    display: none !important;
  }
  
  /* Optimize for print */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  
  /* Remove backgrounds and shadows */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Show links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.875em;
  }
  
  /* Don't show link for anchors */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
  
  /* Page breaks */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  
  img {
    page-break-inside: avoid;
    max-width: 100%;
  }
  
  p,
  blockquote {
    orphans: 3;
    widows: 3;
  }
  
  /* Ensure content width */
  .entry-content,
  .post,
  .page {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  
  /* Print title for pages */
  .entry-title {
    font-size: 18pt;
    margin-bottom: 1em;
  }
}


/* ========================================
   ! USAGE EXAMPLE
   ======================================== */

/*
Load in functions.php:

function my_theme_enqueue_styles() {
  // 1. Normalize
  wp_enqueue_style('normalize', get_template_directory_uri() . '/css/normalize.css');
  
  // 2. Utilities
  wp_enqueue_style('utilities', get_template_directory_uri() . '/css/optimized-utilities.css', array('normalize'));
  
  // 3. WP Blocks
  wp_enqueue_style('wp-blocks', get_template_directory_uri() . '/css/wp-blocks-optimized.css', array('utilities'));
  
  // 4. Theme Essentials
  wp_enqueue_style('theme-essentials', get_template_directory_uri() . '/css/wp-theme-essentials.css', array('wp-blocks'));
  
  // 5. Optional: Forms (only if needed)
  if (is_page('contact') || is_singular('post')) {
    wp_enqueue_style('forms', get_template_directory_uri() . '/css/forms.css', array('theme-essentials'));
  }
  
  // 6. Optional: Comments (only if comments enabled)
  if (comments_open() || get_comments_number()) {
    wp_enqueue_style('comments', get_template_directory_uri() . '/css/comments.css', array('theme-essentials'));
  }
  
  // 7. Theme specific
  wp_enqueue_style('theme-style', get_stylesheet_uri(), array('theme-essentials'));
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
*/