/*
Theme Name:        Fortunna Lusitanos
Theme URI:         https://fortunnalusitanos.pt
Author:            MA Media
Author URI:        https://teammamedia.pt
Description:       Tema oficial da Fortunna Lusitanos. Arquitectura modular baseada no design system v5 "TREVOS" — champanhe #D8CAAF, Cinzel + Raleway, fotografia a preto-e-branco. Concebido para funcionar como "palco" agnóstico para os plugins fortunnalusitanos-blocks e fortunnalusitanos-cavalos. Totalmente compatível com o editor Gutenberg e com a Customizer API do WordPress.
Version:           1.10.0
Requires at least: 6.3
Tested up to:      6.7
Requires PHP:      8.1
License:           Proprietary
Text Domain:       fortunnalusitanos-theme
Tags:              gutenberg, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, responsive-layout, translation-ready
*/

/*
 * ═══════════════════════════════════════════════════════════════════════════
 *  FORTUNNA LUSITANOS — DESIGN SYSTEM v5 "TREVOS"
 *
 *  Este ficheiro serve dois propósitos:
 *   1. Declaração do tema (cabeçalho acima) — lido pelo WordPress
 *   2. Variáveis CSS globais e reset base — base de todos os outros estilos
 *
 *  A arquitectura de estilos do tema é:
 *   style.css           ← Este ficheiro (variáveis + reset)
 *   assets/css/variables.css    ← Variáveis CSS completas (duplicadas aqui
 *                                  para garantir disponibilidade imediata)
 *   assets/css/main.css         ← Layout global, espaçamentos, grids
 *   assets/css/components.css   ← Nav, footer, botões, tipografia, utilitários
 *   assets/css/editor-style.css ← Estilos injectados no editor Gutenberg
 *
 *  CUSTOMIZER — variáveis controladas dinamicamente via PHP (inc/customizer.php):
 *   --fl-color-champagne    ← Cor de acento principal
 *   --fl-color-noir         ← Cor de fundo escuro
 *   --fl-color-white        ← Cor de fundo claro
 *   --fl-font-heading       ← Fonte dos títulos
 *   --fl-font-body          ← Fonte do corpo
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ── Variáveis Globais ──────────────────────────────────────────────────────

   NOTA: Estas variáveis são o núcleo do design system.
   Algumas são sobrescritas dinamicamente pelo Customizer via <style> inline
   injectado no <head> pelo hook wp_head (ver inc/customizer.php).

   A cascata funciona assim:
     :root em style.css  → valores padrão do tema
     <style> no <head>   → valores personalizados via Customizer (override)
   ────────────────────────────────────────────────────────────────────────── */

/* Os tokens (:root) estão todos em assets/css/variables.css desde a 1.5.3.
   Antes estavam duplicados aqui com valores diferentes — os de style.css
   ganhavam por carregarem depois; esses valores passaram para variables.css. */

/* ── Reset Moderno ──────────────────────────────────────────────────────────

   Reset minimalista baseado em modern-normalize + ajustes específicos
   para o design system da Fortunna.
   ────────────────────────────────────────────────────────────────────────── */

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

/* ── Reset do block-gap "fantasma" do WordPress 6.x ─────────────────────────
   Neutraliza os margin-block-start/end injectados por is-layout-flow e
   is-layout-constrained. O tema controla o ritmo vertical via --fl-gap-*.
   Se pretender restaurar o comportamento nativo para um bloco específico,
   sobrescrever localmente com `margin-block: revert`. */
:root { --wp--style--block-gap: 0px; }
:where(.wp-site-blocks) > * { margin-block-start: 0; margin-block-end: 0; }
:root :where(.is-layout-flow)        > * { margin-block-start: 0; margin-block-end: 0; }
:root :where(.is-layout-constrained) > * { margin-block-start: 0; margin-block-end: 0; }

html {
    font-size:                16px;
    -webkit-font-smoothing:   antialiased;
    -moz-osx-font-smoothing:  grayscale;
    text-rendering:           optimizeLegibility;
    scroll-behavior:          smooth;
    /* Evita overflow horizontal acidental. clip (e não hidden) para não
       criar um contentor de scroll — hidden aqui e no body partia o
       position:sticky (barra lateral da ficha, filtros do arquivo). */
    overflow-x:               hidden;
    overflow-x:               clip;
    /* Cor de scroll bar em browsers que suportam */
    scrollbar-color:          var(--fl-champagne-border) var(--fl-off-white);
    scrollbar-width:          thin;
}

body {
    font-family:   var(--fl-font-body);
    font-weight:   300;
    font-size:     var(--fl-text-base);
    line-height:   var(--fl-leading-relaxed);
    color:         var(--fl-noir);
    background:    var(--fl-white);
    overflow-x:    hidden;
    overflow-x:    clip; /* ver nota no html */
    /* Posição para o grain overlay */
    position:      relative;
}

/* Grain de papel — overlay sobre toda a página */
body::before {
    content:        '';
    position:       fixed;
    inset:          0;
    pointer-events: none;
    z-index:        var(--fl-z-grain);
    opacity:        0.022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ── Elementos de Texto ── */

h1, h2, h3, h4, h5, h6 {
    font-family:  var(--fl-font-heading);
    font-weight:  700;
    line-height:  var(--fl-leading-tight);
    letter-spacing: var(--fl-tracking-wide);
    color:        var(--fl-noir);
    text-wrap:    balance; /* Equilíbrio de quebras de linha em browsers modernos */
}

h1 { font-size: clamp(2.2rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.9rem); }
h4 { font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
h5 { font-size: clamp(0.95rem, 1.2vw, 1.15rem); }
h6 { font-size: clamp(0.875rem, 1vw, 1rem); }

p {
    font-size:     var(--fl-text-base);
    line-height:   var(--fl-leading-loose);
    color:         rgba(20, 18, 16, 0.68);
    margin-bottom: 1.25rem;
    max-width:     72ch; /* Largura de leitura óptima */
}

p:last-child {
    margin-bottom: 0;
}

/* Links */
a {
    color:           var(--fl-noir);
    text-decoration: none;
    transition:      color var(--fl-transition);
}

a:hover {
    color: var(--fl-champagne);
}

/* Links dentro de conteúdo editorial */
.entry-content a,
.wp-block-paragraph a {
    border-bottom: 1px solid var(--fl-champagne-border);
    transition:    border-color var(--fl-transition), color var(--fl-transition);
}

.entry-content a:hover,
.wp-block-paragraph a:hover {
    border-color: var(--fl-champagne);
}

/* ── Listas ── */

ul, ol {
    padding-left: 1.5rem;
}

li {
    margin-bottom:  0.35rem;
    color:          rgba(20, 18, 16, 0.68);
    line-height:    var(--fl-leading-relaxed);
}

/* Remove estilo de lista quando usada para navegação */
nav ul,
nav ol,
.unstyled {
    list-style: none;
    padding:    0;
    margin:     0;
}

/* ── Media ── */

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
    object-fit: cover;
}

/* Imagens com estilo editorial v5 */
.fl-img-editorial {
    filter: var(--fl-img-filter);
    transition: filter var(--fl-duration-slow) var(--fl-ease);
}

.fl-img-editorial:hover {
    filter: var(--fl-img-filter-hover);
}

/* ── Formulários ── */

input,
textarea,
select,
button {
    font-family: var(--fl-font-body);
    font-size:   inherit;
}

button {
    cursor:     pointer;
    background: none;
    border:     none;
    padding:    0;
}

/* ── Tabelas ── */

table {
    border-collapse: collapse;
    width:           100%;
}

th, td {
    text-align: left;
    padding:    0.75rem 1rem;
}

/* ── Blockquote base ── */

blockquote {
    border-left: 3px solid var(--fl-champagne);
    margin:      2rem 0;
    padding:     1.25rem 1.5rem;
    background:  var(--fl-champagne-bg);
}

blockquote p {
    font-style:  italic;
    font-weight: 200;
    font-size:   clamp(1.1rem, 1.8vw, 1.35rem);
    color:       var(--fl-noir);
    margin:      0;
    max-width:   none;
}

/* ── HR ── */

hr {
    border:        none;
    border-top:    1px solid var(--fl-linen);
    margin:        2.5rem 0;
}

/* ── Código ── */

code,
kbd,
samp,
pre {
    font-family:   ui-monospace, 'SF Mono', 'Fira Code', monospace;
    font-size:     0.875em;
}

code {
    background:    var(--fl-champagne-bg);
    border:        1px solid var(--fl-champagne-border);
    padding:       0.15em 0.45em;
    border-radius: var(--fl-radius-sm);
    color:         var(--fl-noir-light);
}

pre {
    background:    var(--fl-noir);
    color:         rgba(253, 252, 250, 0.85);
    padding:       1.5rem;
    overflow-x:    auto;
    border-radius: var(--fl-radius);
    line-height:   1.65;
}

pre code {
    background: none;
    border:     none;
    padding:    0;
    color:      inherit;
    font-size:  0.875rem;
}

/* ── Acessibilidade ── */

/* Skip link — visível ao Tab */
.skip-link {
    position:   absolute;
    top:        -100px;
    left:       1rem;
    z-index:    calc(var(--fl-z-nav) + 10);
    background: var(--fl-champagne);
    color:      var(--fl-noir);
    padding:    0.75rem 1.25rem;
    font-family: var(--fl-font-heading);
    font-size:  11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 1rem;
    outline: 3px solid var(--fl-noir);
    outline-offset: 2px;
}

/* Focus ring global — substitui o outline padrão do browser */
:focus-visible {
    outline:        2px solid var(--fl-champagne);
    outline-offset: 3px;
}

/* Destinos de âncora/skip link focados por JS (tabindex=-1) */
[tabindex="-1"]:focus { outline: none; }

/* Remove outline no click (mantém no keyboard) */
:focus:not(:focus-visible) {
    outline: none;
}

/* Texto para screen readers apenas */
.screen-reader-text {
    clip:       rect(1px, 1px, 1px, 1px);
    clip-path:  inset(50%);
    height:     1px;
    overflow:   hidden;
    position:   absolute;
    white-space: nowrap;
    width:       1px;
}

/* ── Conteúdo do Editor (WordPress) ── */

/* Espaçamento padrão para conteúdo gerado pelo Gutenberg */
.entry-content > * {
    margin-bottom: 1.5rem;
}

.entry-content > *:last-child {
    margin-bottom: 0;
}

/* Alinhamentos nativos do Gutenberg */
.alignleft {
    float:        left;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.alignright {
    float:         right;
    margin-left:   2rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display:    block;
    margin-left:  auto;
    margin-right: auto;
    text-align: center;
}

.alignfull {
    margin-left:  calc(-1 * var(--fl-pad));
    margin-right: calc(-1 * var(--fl-pad));
    max-width:    none;
}

.alignwide {
    margin-left:  calc(-1 * var(--fl-gap-lg));
    margin-right: calc(-1 * var(--fl-gap-lg));
}

/* ── Print ── */

@media print {
    body::before { display: none; }

    nav, .nav, .site-header, .site-footer,
    .wp-block-buttons { display: none !important; }

    body {
        font-size:  12pt;
        color:      #000;
        background: #fff;
    }

    a { color: #000; border-bottom: 1px solid #000; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; }

    h1, h2, h3, h4 { page-break-after: avoid; }
    img { max-width: 100% !important; }
}

/* ── Scrollbar personalizada (webkit) ── */

::-webkit-scrollbar {
    width:  6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--fl-off-white);
}

::-webkit-scrollbar-thumb {
    background:    var(--fl-champagne-border);
    border-radius: var(--fl-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--fl-champagne);
}

/* ── Selecção de texto ── */

::selection {
    background: rgba(216, 202, 175, 0.35);
    color:      var(--fl-noir);
}

::-moz-selection {
    background: rgba(216, 202, 175, 0.35);
    color:      var(--fl-noir);
}

/* ── WordPress Classes Obrigatórias ────────────────────────────────────────

   O WordPress exige estas classes para funcionalidades core:
   captions, galerias, imagens com legenda, acessibilidade.
   ────────────────────────────────────────────────────────────────────────── */

/* Captions */
.wp-caption {
    max-width: 100%;
    margin-bottom: 1.5rem;
}

.wp-caption-text,
.gallery-caption {
    font-family:  var(--fl-font-body);
    font-style:   italic;
    font-size:    var(--fl-text-sm);
    font-weight:  300;
    color:        var(--fl-stone);
    text-align:   center;
    margin-top:   0.5rem;
}

/* Galerias nativas */
.gallery {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   var(--fl-gap-sm);
    margin-bottom:         1.5rem;
}

.gallery-item {
    overflow: hidden;
}

.gallery-item img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    filter:     var(--fl-img-filter);
    transition: filter var(--fl-duration-slow) var(--fl-ease),
                transform var(--fl-duration-slow) var(--fl-ease);
}

.gallery-item:hover img {
    filter:    var(--fl-img-filter-hover);
    transform: scale(1.03);
}

/* Sticky posts */
.sticky {
    border-left: 3px solid var(--fl-champagne);
    padding-left: 1.25rem;
}

/* Imagens com alinhamento */
img.alignleft  { float: left; margin: 0 1.5rem 1rem 0; }
img.alignright { float: right; margin: 0 0 1rem 1.5rem; }
img.aligncenter { display: block; margin: 0 auto 1rem; }

/* ── Animação de Reveal ─────────────────────────────────────────────────────

   Sistema de reveal por scroll — consistente com o mockup v5.
   Activado via IntersectionObserver em assets/js/main.js.
   ────────────────────────────────────────────────────────────────────────── */

/* As regras .fl-reveal estão em assets/css/components.css (carrega depois e
   era o que valia; as daqui eram duplicados sem efeito — removidos na 1.5.3). */

/* Respeita preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:   0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:  0.01ms !important;
        scroll-behavior:      auto !important;
    }
}