/*
Theme Name: Sari Essayah
Theme URI: https://www.essayah.fi/
Author: Don Branco
Author URI: https://donbranco.fi
Description: Modern WordPress block theme for Sari Essayah. Fully editable with the Site Editor and Gutenberg blocks. Features deep navy and cream palette with amber gold accents, Playfair Display headings, and responsive layouts.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sari-essayah
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, two-columns, wide-blocks
*/

/* ========================================
   THEME CUSTOM STYLES
   ======================================== */

/* --- Global --- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Section Tag (reusable label) --- */
.section-tag {
  display: block;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: 0.5rem;
}

/* --- Fact Cards --- */
.fact-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.fact-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--border-radius--lg);
  padding: 1.25rem;
  text-align: center;
}

.fact-card .fact-icon {
  font-size: var(--wp--preset--font-size--x-large);
  margin-bottom: 0.5rem;
}

.fact-card .fact-value {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 700;
  color: var(--wp--preset--color--text);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.fact-card .fact-label {
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Tags --- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-item {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--wp--preset--color--surface-offset);
  border-radius: 9999px;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  color: var(--wp--preset--color--text-muted);
}

.tag-item--primary {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--hero-text);
}

/* --- Timeline --- */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--wp--preset--color--accent);
  opacity: 0.4;
}

.timeline-item {
  position: relative;
  margin-bottom: 2rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: var(--wp--preset--color--accent);
  border: 2px solid var(--wp--preset--color--background);
  margin-left: 7px;
}

.timeline-date {
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 600;
  color: var(--wp--preset--color--accent);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.timeline-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  color: var(--wp--preset--color--text);
  margin-bottom: 0.25rem;
}

.timeline-desc {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text-muted);
  line-height: 1.6;
}

/* --- Contact Items --- */
.contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.contact-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--surface-offset);
  border-radius: var(--wp--custom--border-radius--lg);
  color: var(--wp--preset--color--accent);
}

.contact-label {
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.contact-value {
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--text);
  font-weight: 500;
}

/* --- Staff Card --- */
.staff-card {
  padding: 0.75rem 1rem;
  background: var(--wp--preset--color--surface-offset);
  border-radius: var(--wp--custom--border-radius--md);
  margin-bottom: 0.75rem;
}

.staff-card .staff-name {
  font-weight: 600;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text);
}

.staff-card .staff-role {
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--text-muted);
}

/* --- Social Links Custom --- */
.social-links-custom {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.social-links-custom a {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--divider);
  color: var(--wp--preset--color--text-muted);
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.social-links-custom a:hover {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--primary);
  transform: translateY(-2px);
}

/* --- Hero Cover Enhancements --- */
.hero-cover .wp-block-cover__inner-container {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
}

/* --- Quote mark decoration --- */
.quote-mark {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(3rem, 0.5rem + 7vw, 8rem);
  line-height: 0.5;
  color: var(--wp--preset--color--accent);
  opacity: 0.6;
}

/* --- News Card --- */
.news-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--border-radius--lg);
  padding: 1.5rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--wp--custom--shadow--md);
  border-color: var(--wp--preset--color--accent);
}

.news-card-date {
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--accent);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.news-card-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  color: var(--wp--preset--color--text);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.news-card-excerpt {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text-muted);
  line-height: 1.6;
  flex-grow: 1;
}

.news-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  color: var(--wp--preset--color--accent);
  margin-top: 1rem;
}

/* --- Donation Box --- */
.donation-box {
  padding: 1.5rem;
  background: var(--wp--preset--color--surface-offset);
  border-radius: var(--wp--custom--border-radius--lg);
  border: 1px solid var(--wp--preset--color--divider);
}

/* --- Button hover --- */
.wp-block-button__link {
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(200, 146, 46, 0.3);
}

/* --- Navigation underline effect --- */
.wp-block-navigation a {
  position: relative;
}

.wp-block-navigation a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--wp--preset--color--accent);
  transition: width 0.3s ease;
}

.wp-block-navigation a:hover::after {
  width: 100%;
}

.wp-block-navigation a:hover {
  color: var(--wp--preset--color--text) !important;
}

/* --- Responsive --- */
@media (max-width: 781px) {
  .fact-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .hero-columns {
    flex-direction: column;
  }
}