/**
 * Theme Name:         Secchi Sushi
 * Theme URI:          https://www.seccisushi.it/
 * Author:             Secchi Sushi
 * Author URI:         https://www.seccisushi.it/
 * Description:        Premium, performance-first WordPress theme for Secchi Sushi (Cagliari). Custom templates + WooCommerce-ready.
 * Version:            1.0.0
 * Requires at least:  6.0
 * Tested up to:       6.6
 * Requires PHP:       8.0
 * License:            GNU General Public License v2 or later
 * License URI:        https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:        secchi-sushi
 * Domain Path:        /languages
 *
 * Notes (performance/SEO):
 * - Prefer system fonts (fast). If you add webfonts, self-host + preload + font-display: swap.
 * - Avoid hiding primary content via CSS (JS failures must not blank the page).
 * - Schema/meta live in templates/functions, not CSS.
 */

/* -------------------------------------------------------------------------- */
/* 1) Design Tokens                                                           */
/* -------------------------------------------------------------------------- */

:root {
  /* Brand palette (white + black + gold undertone) */
  --secchi-white: #ffffff;
  --secchi-black: #0b0b0b;
  --secchi-ink: #111111;
  --secchi-gold: #c9b278;  /* warm gold accent */
  --secchi-gold-2: #b99f63; /* deeper gold for hover/borders */
  --secchi-muted: #6b6b6b;
  --secchi-border: rgba(17, 17, 17, 0.14);
  --secchi-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);

  /* Typography */
  --secchi-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --secchi-font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Garamond, Georgia, serif;

  --secchi-text: var(--secchi-ink);
  --secchi-bg: var(--secchi-white);

  /* Layout */
  --secchi-container: 1120px;
  --secchi-container-wide: 1320px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;

  /* Radius */
  --r-1: 10px;
  --r-2: 14px;
  --r-3: 18px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;

  /* Forms */
  --input-h: 46px;

  /* Safer scrollbars/layout shift */
  scrollbar-gutter: stable;
}

/* Optional: if you later add a dark section, use these tokens locally instead of global flips. */

/* -------------------------------------------------------------------------- */
/* 2) Base Reset (minimal + safe)                                              */
/* -------------------------------------------------------------------------- */

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

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--secchi-font-sans);
  color: var(--secchi-text);
  background: var(--secchi-bg);
  line-height: 1.55;
  letter-spacing: 0.1px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover { text-decoration: underline; text-underline-offset: 3px; }

:where(h1, h2, h3, h4) {
  font-family: var(--secchi-font-serif);
  color: var(--secchi-black);
  line-height: 1.12;
  letter-spacing: 0.2px;
  margin: 0 0 var(--s-4);
}

h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 var(--s-5); color: var(--secchi-ink); }

small { color: var(--secchi-muted); }

hr {
  border: 0;
  border-top: 1px solid var(--secchi-border);
  margin: var(--s-8) 0;
}

/* -------------------------------------------------------------------------- */
/* 3) Accessibility + “Helpful Content” UX                                    */
/* -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--s-4);
  z-index: 999999;
  background: var(--secchi-white);
  border: 1px solid var(--secchi-border);
  border-radius: var(--r-1);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--secchi-shadow);
}

.skip-link:focus {
  left: var(--s-4);
}

:focus { outline: none; }
:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--secchi-gold) 75%, #ffffff);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Screen reader utility (WP uses .screen-reader-text too) */
.visually-hidden,
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  margin: 0;
  clip: auto;
  white-space: normal;
  padding: var(--s-3) var(--s-4);
  background: var(--secchi-white);
  border: 1px solid var(--secchi-border);
  border-radius: var(--r-1);
}

/* Reduced motion: honor user preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


:root{
  --secchi-font-ui: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --secchi-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Base text */
html, body{
  font-family: var(--secchi-font-body);
  font-weight: 400;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6{
  font-family: var(--secchi-font-ui);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/*
  UI typography:
  - Header/menu links
  - Buttons / CTAs
  - WooCommerce buttons
  Note: keeping body links as "inherit" avoids serif links inside paragraphs (usually better for readability).
*/
.site-header a,
.main-navigation a,
.wp-block-navigation a,
.menu a,
button,
input[type="submit"],
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  font-family: var(--secchi-font-ui);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Optional: keep regular in-paragraph links readable */
.entry-content a,
p a,
li a{
  font-family: inherit;
  font-weight: 600; /* or 500 if you want less emphasis */
  text-transform: none;
  letter-spacing: 0;
}