/*!
Theme Name:   ArtisA Base
Theme URI:    https://artisaruba.com/
Description:  Shared base for every site on the ArtisA network. Child of "artisaruba": keeps each site exactly as it is (Elementor headers, footers and pages keep working) and adds per-site look settings, switches for network add-ons, a clean fallback header and footer, and safe carry-over of menus, logo and Additional CSS when a site switches to it.
Author:       ArtisA / Pure Aruba Events Foundation
Author URI:   https://artisaruba.com/
Template:     artisaruba
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  artisa-base
Tags:         custom-logo, custom-menu, featured-images, translation-ready
*/

/* ---------- Tokens (values per site come from Appearance › Customize › ArtisA Base) ---------- */
:root {
	--ab-ink: #0A2A33;
	--ab-accent: #1F8C9B;
	--ab-paper: #F6F2EC;
	--ab-sand: #E6D9CB;
	--ab-coral: #E8553A;
	--ab-muted: #5E6A6D;
	--ab-font-head: 'Lora', Georgia, 'Times New Roman', serif;
	--ab-font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--ab-width: 1240px;
	--ab-gutter: 24px;
}

/* ---------- Always on: harmless resets (parent had only body{margin:0}) ---------- */
body { margin: 0; }
img, video { max-width: 100%; height: auto; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus, .skip-link:focus {
	background: #fff; color: var(--ab-ink); clip: auto !important; clip-path: none;
	display: block; height: auto; width: auto; left: 8px; top: 8px; padding: 12px 18px;
	z-index: 100000; text-decoration: none; font: 500 14px/1.2 var(--ab-font-body);
}

/* ---------- Fallback header / footer (only shown where Elementor has none) ---------- */
.ab-header, .ab-footer { font-family: var(--ab-font-body); color: var(--ab-ink); }
.ab-header { background: var(--ab-paper); border-bottom: 1px solid var(--ab-sand); }
.ab-header__in, .ab-footer__in {
	max-width: var(--ab-width); margin: 0 auto; padding: 18px var(--ab-gutter);
	box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 12px 32px;
	align-items: center; justify-content: space-between;
}
.ab-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ab-brand .custom-logo { max-height: 56px; width: auto; display: block; }
.ab-brand .site-title { margin: 0; font: 400 24px/1.2 var(--ab-font-head); }
.ab-brand .site-title a { color: var(--ab-ink); text-decoration: none; }
.ab-brand .site-description { margin: 2px 0 0; font-size: 12px; color: var(--ab-muted); letter-spacing: .3px; }

.ab-header .main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 26px; }
.ab-header .main-navigation li { position: relative; }
.ab-header .main-navigation a { color: var(--ab-ink); text-decoration: none; font-size: 14px; display: block; padding: 12px 0; }
.ab-header .main-navigation a:hover, .ab-header .main-navigation .current-menu-item > a { color: var(--ab-accent); }
.ab-header .main-navigation ul ul { display: none; position: absolute; top: 100%; left: -16px; z-index: 50; background: #fff; box-shadow: 0 8px 24px rgba(10,42,51,.12); padding: 8px 16px; min-width: 200px; flex-direction: column; gap: 0; }
.ab-header .main-navigation li:hover > ul, .ab-header .main-navigation li.focus > ul { display: flex; }
.ab-header .menu-toggle {
	display: none; background: none; border: 1px solid var(--ab-ink); color: var(--ab-ink);
	font: 500 13px/1 var(--ab-font-body); padding: 12px 16px; cursor: pointer; min-height: 44px;
}
@media (max-width: 860px) {
	.ab-header .menu-toggle { display: inline-block; }
	.ab-header .main-navigation { width: 100%; }
	.ab-header .main-navigation ul { display: none; flex-direction: column; gap: 0; }
	.ab-header .main-navigation.toggled ul { display: flex; }
	.ab-header .main-navigation ul ul { position: static; box-shadow: none; display: flex; padding: 0 0 0 16px; }
	.ab-header .main-navigation a { padding: 12px 0; border-top: 1px solid var(--ab-sand); }
}

.ab-footer { background: var(--ab-ink); color: var(--ab-paper); margin-top: 64px; }
.ab-footer a { color: var(--ab-paper); }
.ab-footer__in { padding-top: 40px; padding-bottom: 40px; align-items: flex-start; }
.ab-footer__name { font: 400 22px/1.2 var(--ab-font-head); margin: 0 0 6px; }
.ab-footer__tag, .ab-footer__copy { font-size: 13px; opacity: .8; margin: 0; }
.ab-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }
.ab-footer ul a { text-decoration: none; display: inline-block; padding: 6px 0; }
.ab-footer ul a:hover { text-decoration: underline; }

/* ---------- Opt-in per site: "Use these fonts and colours for the whole site" ----------
   Everything below is wrapped in :where() so it has zero specificity:
   Elementor, the site's own CSS and plugins always win over it. */
:where(body.ab-styled) { background-color: var(--ab-paper); color: var(--ab-ink); font: 400 16px/1.65 var(--ab-font-body); }
:where(body.ab-styled) :where(h1, h2, h3, h4, h5, h6) { font-family: var(--ab-font-head); font-weight: 400; line-height: 1.2; color: var(--ab-ink); }
:where(body.ab-styled) :where(h1, h2) :where(em, i) { color: var(--ab-accent); }
:where(body.ab-styled) :where(a) { color: var(--ab-accent); }
:where(body.ab-styled .site-main) :where(a:hover) { color: var(--ab-ink); }
/* Plain WordPress pages (not built in Elementor) get a readable column */
:where(body.ab-styled:not(.elementor-page)) .site-main { max-width: var(--ab-width); margin: 0 auto; padding: 40px var(--ab-gutter) 24px; box-sizing: border-box; }
:where(body.ab-styled:not(.elementor-page)) .site-main .entry-content { max-width: 760px; }
:where(body.ab-styled) :where(input[type=submit], .wp-element-button, .wp-block-button__link) {
	background: var(--ab-ink); color: #fff; border: 0; border-radius: 0; padding: 14px 22px; font: 500 14px/1 var(--ab-font-body); cursor: pointer;
}
:where(body.ab-styled) :where(input[type=submit], .wp-element-button, .wp-block-button__link):hover { background: var(--ab-accent); color: #fff; }