/*
Theme Name:   IONA — Emerald Thinker
Template:     iona
Theme URI:    https://emeraldthinker.com/
Description:  Premium contemporary art gallery child theme for IONA. Elementor-first architecture with Loop Templates, Theme Builder, ACF Pro integration, dynamic artwork/artist fields, WooCommerce artwork products, and the Emerald Thinker design system. Compatible with Elementor Pro, WooCommerce, ACF Pro.
Author:       Emerald Thinker
Author URI:   https://emeraldthinker.com/
Version:      2.2.5
Requires PHP: 7.4
Requires at least: 6.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  iona-child
Tags:         art, gallery, woocommerce, elementor, custom-colors, custom-menu, full-width-template, theme-options, custom-logo, blog, e-commerce
*/

/* ── Child theme base overrides ────────────────────────────────────────────────
   Primary styles live in assets/css/. This file contains only core overrides
   that must load after the parent stylesheet.
─────────────────────────────────────────────────────────────────────────────── */

/* Ensure design system font tokens cascade through parent theme */
.et-theme,
.et-theme * {
  font-family: var(--font-sans);
}

.et-theme h1,
.et-theme h2,
.et-theme h3,
.et-theme h4,
.et-theme h5 {
  font-family: var(--font-display);
}

/* Remove default WordPress page padding/margin when Elementor owns the page */
.et-theme .site-main {
  padding-bottom: 0;
}

/* Content link styling */
.et-theme .entry-content a,
.et-theme .wp-block-post-content a {
  color: var(--emerald-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.et-theme .entry-content a:hover {
  color: var(--emerald);
  text-decoration-color: transparent;
}

/* Accent span for hero headings */
.accent { color: var(--emerald); }

/* Design source btn classes used by HTML widgets in templates */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.92rem;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
  letter-spacing: 0.01em;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.985); }

.btn-primary {
  background: var(--emerald-deep);
  background-image: linear-gradient(180deg, var(--emerald) 0%, var(--emerald-deep) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 6px 20px -6px color-mix(in oklab, var(--emerald) 60%, black);
}

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn-lg  { padding: 16px 28px; font-size: 1rem; }
.btn-sm  { padding: 8px 14px; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* label-eyebrow utility (used in filter bars and section heads) */
.label-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--emerald);
}

/* Col-grid utility for non-Elementor content areas */
.et-theme .col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 32px 0;
}

.et-theme .col-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.et-theme .col-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.et-theme .col-card .art-ph {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

.et-theme .col-card .b {
  padding: 20px;
}

.et-theme .col-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}

.et-theme .col-card p {
  color: var(--ink-2);
  font-size: 0.875rem;
  margin-bottom: 12px;
}

.et-theme .col-card .meta {
  font-size: 0.78rem;
  color: var(--ink-3);
}

@media (max-width: 1024px) {
  .et-theme .col-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .et-theme .col-grid { grid-template-columns: 1fr; }
}