/**
 * Naples Aesthetics — Design Tokens (Phase 1)
 * 
 * Direct-edit CSS. Mirror of src/css/imports/variables/_naples.scss for
 * environments without an active gulp build. Keep the two in sync until
 * the SCSS pipeline becomes the single source of truth.
 * 
 * Loaded by functions/naples.php only when NAPLES_REDESIGN is defined.
 */

:root {
  /* ---------------------------------------------------------------- */
  /* Color palette                                                     */
  /* ---------------------------------------------------------------- */
  --naples-primary: #25596f;     /* COLOR 1 NAPLES — headings, body, CTAs */
  --naples-warm-red: #5EB2D6;    /* Warm Red Main — accent */
  --naples-dark-slate: #363534;  /* Dark Slate Main — secondary text */
  --naples-white: #ffffff;
  --naples-bg-light: #f4f2ec;    /* Warm white surface */

  /* ---------------------------------------------------------------- */
  /* Typography stacks                                                 */
  /* ---------------------------------------------------------------- */
  /* Heading: Sinhala MN (Apple system font for Sinhalese, full Latin
     glyph set) + Georgia/Times fallback for non-Apple devices.        */
  --naples-font-heading: "Sinhala MN", "Georgia", "Times New Roman", serif;

  /* Body: Inter via Google Fonts + system stack fallback.             */
  --naples-font-body: "Inter", -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---------------------------------------------------------------- */
  /* Type scale (matches Figma exactly)                                */
  /* ---------------------------------------------------------------- */
  --naples-text-regular: 16px;
  --naples-text-medium: 18px;
  --naples-text-large: 22px;
  --naples-h3: 44px;
  --naples-h2: 52px;
  --naples-h1: 64px;

  --naples-lh-tight: 1.2;        /* Headings */
  --naples-lh-body: 1.5;         /* Body text */
  --naples-lh-loose: 1.8;        /* Long-form paragraphs */
  --naples-letter-tight: -0.44px;/* Heading 3 letter-spacing per Figma */

  /* ---------------------------------------------------------------- */
  /* Spacing scale (8px base)                                          */
  /* ---------------------------------------------------------------- */
  --naples-space-1: 8px;
  --naples-space-2: 16px;
  --naples-space-3: 24px;
  --naples-space-4: 32px;
  --naples-space-5: 48px;
  --naples-space-6: 64px;
  --naples-space-7: 96px;

  /* ---------------------------------------------------------------- */
  /* Layout                                                            */
  /* ---------------------------------------------------------------- */
  --naples-container-max: 1440px;
  --naples-content-max: 1216px;
  --naples-content-pad: 112px;   /* Side padding at desktop per Figma */
  --naples-radius-pill: 9999px;  /* Request a Consultation button     */
  --naples-radius-card: 0;       /* Sharp corners on cards            */

  /* Asset paths (--naples-logo, --naples-logo-2x, --naples-logo-webp,
     --naples-logo-webp-2x, --naples-theme-uri) are injected dynamically
     from functions/naples.php so they respect WordPress's content
     directory configuration (this site uses /content/ instead of
     /wp-content/). See naples_inline_asset_vars().                   */
}

/* -------------------------------------------------------------------- */
/* Base styles — applied only when body has .naples-redesign class.     */
/* These give Phase 1 a visible smoke-test signal without touching the  */
/* legacy Etna styles outside of the naples scope.                       */
/* -------------------------------------------------------------------- */

.naples-redesign {
  font-family: var(--naples-font-body);
  color: var(--naples-primary);
}

.naples-redesign h1,
.naples-redesign h2,
.naples-redesign h3,
.naples-redesign h4 {
  font-family: var(--naples-font-heading);
  line-height: var(--naples-lh-tight);
  color: var(--naples-primary);
  font-weight: 400;
}

.naples-redesign p,
.naples-redesign li,
.naples-redesign td,
.naples-redesign dd,
.naples-redesign dt,
.naples-redesign address {
  font-family: var(--naples-font-body);
  font-size: var(--naples-text-medium);
  line-height: var(--naples-lh-body);
  color: var(--naples-primary);
}

/* Phase 1 placeholder helper — visible signal that a naples-* module
   rendered. Removed in Phase 2 when modules get real content.          */
.naples-redesign .naples-placeholder {
  display: block;
  padding: var(--naples-space-4) var(--naples-space-3);
  margin: var(--naples-space-2) 0;
  border: 1px dashed var(--naples-primary);
  background: var(--naples-bg-light);
  font-family: var(--naples-font-body);
  font-size: var(--naples-text-medium);
  color: var(--naples-primary);
  text-align: center;
}

.naples-redesign .naples-placeholder strong {
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: var(--naples-text-regular);
}


/* ====================================================================
   Phase 12.1.x — Hyperlink color in body content (warm-red accent)
   --------------------------------------------------------------------
   Legacy paints all <a> in #516ac2 (purple-blue). On Naples-redesigned
   chrome (header, footer, breadcrumb) we already override per-component
   to white. For BODY CONTENT links (inside paragraphs, lists, tables,
   blockquotes — text content the user reads), use the warm-red accent.
   Skipped via more specific selectors when inside the chrome.
   ==================================================================== */
.naples-redesign p a,
.naples-redesign li a,
.naples-redesign td a,
.naples-redesign blockquote a,
.naples-redesign h1 a,
.naples-redesign h2 a,
.naples-redesign h3 a,
.naples-redesign h4 a,
.naples-redesign h5 a,
.naples-redesign h6 a,
.naples-redesign address a {
	color: var(--naples-warm-red);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: opacity 0.2s ease;
}

.naples-redesign p a:visited,
.naples-redesign li a:visited,
.naples-redesign td a:visited,
.naples-redesign blockquote a:visited,
.naples-redesign h1 a:visited,
.naples-redesign h2 a:visited,
.naples-redesign h3 a:visited,
.naples-redesign h4 a:visited,
.naples-redesign h5 a:visited,
.naples-redesign h6 a:visited,
.naples-redesign address a:visited {
	color: var(--naples-warm-red);
}

.naples-redesign p a:hover,
.naples-redesign li a:hover,
.naples-redesign td a:hover,
.naples-redesign blockquote a:hover,
.naples-redesign h1 a:hover,
.naples-redesign h2 a:hover,
.naples-redesign h3 a:hover,
.naples-redesign h4 a:hover,
.naples-redesign h5 a:hover,
.naples-redesign h6 a:hover,
.naples-redesign address a:hover,
.naples-redesign p a:focus,
.naples-redesign li a:focus,
.naples-redesign td a:focus,
.naples-redesign blockquote a:focus,
.naples-redesign h1 a:focus,
.naples-redesign h2 a:focus,
.naples-redesign h3 a:focus,
.naples-redesign h4 a:focus,
.naples-redesign h5 a:focus,
.naples-redesign h6 a:focus,
.naples-redesign address a:focus {
	color: var(--naples-warm-red);
	opacity: 0.75;
	text-decoration: underline;
}

/* Exclusions: chrome elements where the link color should NOT be warm-red.
   These selectors keep header/footer/breadcrumb links as they were. */
.naples-redesign .naples-header a,
.naples-redesign .naples-header a:visited,
.naples-redesign .naples-header a:hover,
.naples-redesign .naples-footer a,
.naples-redesign .naples-footer a:visited,
.naples-redesign .naples-footer a:hover,
.naples-redesign .naples-team-breadcrumb a,
.naples-redesign .naples-team-breadcrumb a:visited,
.naples-redesign .naples-team-breadcrumb a:hover {
	color: var(--naples-white);
}