/*
Theme Name: Travel Azores Theme
Theme URI: https://travelazores.com
Author: Travel Azores Team
Author URI: https://travelazores.com
Description: Custom WordPress theme for Travel Azores — a premium English-language tourism portal for the Azores archipelago. Inspired by immersive island storytelling, optimized for speed and SEO.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: travel-azores-theme
Tags: travel, tourism, custom-colors, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* Tailwind output é carregado via wp_enqueue_style em functions.php.
   Este ficheiro serve apenas para o header obrigatório do WordPress + pequenos resets. */

:root {
  --azores-blue: #0B5D7A;
  --azores-teal: #1E8E8E;
  --azores-green: #2F5233;
  --azores-sand: #F5EFE6;
  --azores-lava: #2B2B2B;
  --azores-white: #FFFFFF;
}

html {
  scroll-behavior: smooth;
}

/*
 * Proteção contra overflow horizontal em mobile.
 * Sem isto, qualquer elemento que ultrapasse a largura do ecrã por apenas
 * 1px (imagem mal dimensionada, logo em alta resolução, etc.) faz o
 * conteúdo "arrastar" para os lados ao fazer scroll/touch em iOS e Android.
 */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
  overscroll-behavior-x: none;
}

/*
 * Limitar o tamanho do logótipo customizado (Aparência > Personalizar > Logótipo).
 * Sem este limite, um logo carregado em alta resolução (ex: 2400px de largura)
 * força o cabeçalho a alargar-se além do ecrã em mobile, mesmo com flexbox,
 * porque o elemento pai do logo tem "flex-shrink-0".
 */
.custom-logo-link img {
  max-height: 44px;
  width: auto;
  max-width: 200px;
}

img {
  max-width: 100%;
  height: auto;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Estado do header quando com scroll (classe adicionada via JS) */
#site-header.is-scrolled {
  box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

/* Skip link acessibilidade */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--azores-blue);
  color: #fff;
  padding: 0.75rem 1.5rem;
  z-index: 999999;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}