/*
Theme Name:         Lambton Dental
Theme URI:          https://www.lambtondental.com
Description:        Custom Hello Elementor child theme for Lambton Dental Toronto. Implements the D-014 design system (Palette A "Bloor West Warmth" + Typography Pairing 1: Fraunces + Caveat + Inter). Self-hosts all fonts for PIPEDA / privacy compliance. Never loads external Google Fonts at runtime.
Author:             AI Website Factory OS v0.7.0
Author URI:         https://www.lambtondental.com
Template:           hello-elementor
Version:            1.4.0
Text Domain:        lambton-child
License:            GPL v2 or later
License URI:        https://www.gnu.org/licenses/gpl-2.0.html
Tags:               dental, elementor-child, accessible-ready

Based on Hello Elementor by Elementor Team.
Design tokens locked per D-014 (2026-09-07). Do not edit token values here without an updated decision.
*/

/* =========================================================================
   1. LOCKED DESIGN TOKENS — D-014
   Never edit these values in place. Every value below is a locked project
   decision. To change a token, amend D-014 first, then update here.
   ========================================================================= */

:root {
  /* ---------- 1.1 Palette A: Bloor West Warmth ---------- */
  --color-primary:              #1F3A5F;   /* Deep denim navy. All CTAs, nav brand, primary headings tint. */
  --color-primary-hover:        #2E4B72;   /* Slightly lighter navy for hover / secondary tint bands. */
  --color-secondary:            #C6987A;   /* Terracotta. Background-role ONLY. Never a CTA fill. */
  --color-surface-page:         #FBF7F1;   /* Warm cream. Default page background. */
  --color-surface-card:         #FFFFFF;   /* Pure white. Cards, modals, form fields. */
  --color-surface-tint:         #F1E7D6;   /* Warm sand. Alternate section backgrounds. */
  --color-text-primary:         #1A1F2E;   /* Near-black slate on cream. WCAG AAA 15.8:1. */
  --color-text-secondary:       #4A5468;   /* Muted slate. WCAG AAA on body 8.6:1. */
  --color-text-on-primary:      #FFFFFF;   /* White on navy. WCAG AAA 11.48:1. */
  --color-border-subtle:        rgba(31, 58, 95, 0.12);
  --color-border-strong:        rgba(31, 58, 95, 0.32);
  --color-focus-ring:           #1F3A5F;

  /* ---------- 1.2 Typography: Pairing 1 (Fraunces + Caveat + Inter) ---------- */
  --font-display:               'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-script:                'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
  --font-body:                  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Modular type scale (1.25 ratio at 16px root) */
  --fs-display-xl:              48px;      /* Hero H1 */
  --fs-display-lg:              38px;      /* Section H1 */
  --fs-display-md:              30px;      /* Sub-hero H2 */
  --fs-heading-lg:              24px;      /* H2 body */
  --fs-heading-md:              20px;      /* H3 body */
  --fs-body-lg:                 18px;      /* Emphasis body */
  --fs-body:                    16px;      /* Default body */
  --fs-body-sm:                 14px;      /* Meta, secondary text */
  --fs-caption:                 12px;      /* Labels, form helper text */

  --lh-display-xl:              1.1;
  --lh-display-lg:              1.15;
  --lh-display-md:              1.2;
  --lh-heading-lg:              1.3;
  --lh-heading-md:              1.35;
  --lh-body-lg:                 1.6;
  --lh-body:                    1.65;
  --lh-body-sm:                 1.55;
  --lh-caption:                 1.5;

  --fw-body:                    400;
  --fw-emphasis:                500;
  --fw-cta:                     600;
  --fw-display:                 500;

  /* ---------- 1.3 Component tokens ---------- */
  --radius-sm:                  4px;       /* Form fields, small chips */
  --radius-md:                  8px;       /* Cards, tint bands */
  --radius-lg:                  16px;      /* Hero surfaces, large cards */
  --radius-pill:                999px;     /* CTAs, service tags */

  --shadow-card:                0 2px 8px rgba(31, 58, 95, 0.06);
  --shadow-hero:                0 8px 32px rgba(31, 58, 95, 0.10);

  /* 8px-base spacing scale */
  --space-1:                    4px;
  --space-2:                    8px;
  --space-3:                    12px;
  --space-4:                    16px;
  --space-5:                    24px;
  --space-6:                    32px;
  --space-7:                    48px;
  --space-8:                    80px;
  --space-9:                    128px;

  --transition-fast:            150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:            250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Container */
  --container-max:              1200px;
  --container-narrow:           760px;
  --container-pad-mobile:       var(--space-4);
  --container-pad-desktop:      var(--space-6);
}

/* =========================================================================
   2. SELF-HOSTED FONTS
   Font files live in assets/fonts/. Never link to fonts.googleapis.com at
   runtime — that leaks visitor IPs to Google (PIPEDA-adjacent) AND adds
   external HTTP requests we can't cache-control.
   ========================================================================= */

/* Fraunces — variable font (opsz 9..144, wght 300..700), ~65KB subset */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Caveat — weight 400-700 subset, ~22KB */
@font-face {
  font-family: 'Caveat';
  src: url('assets/fonts/Caveat-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Inter — variable weight 100-900 subset, ~47KB */
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   3. BASE ELEMENT STYLES
   ========================================================================= */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Reduced-motion honour */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Headings — Fraunces for display, Inter for smaller headings per D-014 */
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); }
h2 { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); }

h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-cta);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3) 0;
}

h3 { font-size: var(--fs-heading-lg); line-height: var(--lh-heading-lg); }
h4 { font-size: var(--fs-heading-md); line-height: var(--lh-heading-md); }
h5 { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
h6 { font-size: var(--fs-body); line-height: var(--lh-body); }

p {
  margin: 0 0 var(--space-4) 0;
  color: var(--color-text-primary);
}

p.secondary,
.text-secondary {
  color: var(--color-text-secondary);
}

/* Links — navy, no underline, underline on hover per Gate 3 design system */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--color-primary-hover);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* Focus ring — WCAG 2.4.7 */
*:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Script accent — for the ONE decorative word per hero, rotated -3° per D-014 */
.script-accent,
em.script-accent {
  font-family: var(--font-script);
  font-weight: 600;
  font-style: normal;
  display: inline-block;
  transform: rotate(-3deg);
  color: var(--color-secondary);   /* Terracotta — script is the ONE place terracotta touches text */
  line-height: 1;
  font-size: 1.15em;
  padding: 0 0.05em;
}

/* Numeric / tabular figures (phone numbers, prices, dates) */
.numeric,
.phone,
.price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* =========================================================================
   4. PRIMARY & SECONDARY CTA
   Locked per D-014 §1.4. Use these classes in Elementor button widgets by
   setting Advanced > CSS Classes to "cta-primary" or "cta-secondary".
   ========================================================================= */

.cta-primary,
a.cta-primary,
button.cta-primary,
.elementor-button.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-cta);
  font-size: 15px;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
  text-decoration: none;
}

.cta-primary:hover,
.cta-primary:focus-visible {
  background-color: var(--color-primary-hover);
  color: var(--color-text-on-primary);
  text-decoration: none;
}

.cta-secondary,
a.cta-secondary,
button.cta-secondary,
.elementor-button.cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background-color: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-emphasis);
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
  text-decoration: none;
}

.cta-secondary:hover,
.cta-secondary:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  text-decoration: none;
}

/* Sticky mobile action bar — D-014 §1.4 */
.sticky-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-primary);
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 -2px 12px rgba(31, 58, 95, 0.15);
  display: none;   /* Enabled per-viewport in Elementor */
}

@media (max-width: 767px) {
  .sticky-action-bar { display: flex; }
  .sticky-action-bar .cta-primary { width: 100%; }
}

/* Floating desktop "Book" tab (rotated 90°) — D-014 §1.4 */
.floating-book-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-family: var(--font-body);
  font-weight: var(--fw-cta);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 90;
  box-shadow: -2px -4px 12px rgba(31, 58, 95, 0.12);
  transition: background var(--transition-base);
}

.floating-book-tab:hover { background: var(--color-primary-hover); color: var(--color-text-on-primary); text-decoration: none; }

@media (max-width: 991px) { .floating-book-tab { display: none; } }

/* =========================================================================
   5. LAYOUT HELPERS — section bands, containers, cards
   ========================================================================= */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-mobile);
}

.container--narrow {
  max-width: var(--container-narrow);
}

@media (min-width: 768px) {
  .container { padding: 0 var(--container-pad-desktop); }
}

/* Section rhythm: cream → sand → cream. Never two identical bands in a row per D-014. */
.section {
  padding: var(--space-8) 0;
}

.section--tint {
  background: var(--color-surface-tint);
}

.section--cream {
  background: var(--color-surface-page);
}

.section--navy {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.section--navy h1, .section--navy h2, .section--navy h3, .section--navy p {
  color: var(--color-text-on-primary);
}

/* Cards */
.card {
  background: var(--color-surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
}

.card--hero {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hero);
  overflow: hidden;
}

/* =========================================================================
   6. FORMS — Contact Form 7 + Amelia booking + WP core
   All D-014-compliant field styles so the plugins inherit the design system.
   ========================================================================= */

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='date'],
input[type='time'],
textarea,
select,
.wpcf7-form-control {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.10);
  outline: none;
}

label {
  display: block;
  font-weight: var(--fw-emphasis);
  font-size: var(--fs-body-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

/* Contact Form 7 submit button — auto-styled as primary CTA */
input.wpcf7-submit,
button.wpcf7-submit {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-cta);
  font-size: 15px;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

input.wpcf7-submit:hover,
button.wpcf7-submit:hover {
  background-color: var(--color-primary-hover);
}

/* CF7 validation states */
.wpcf7-not-valid-tip {
  color: #B02A37;
  font-size: var(--fs-body-sm);
  margin-top: var(--space-1);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: #B02A37;
  color: #B02A37;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: #2E7D32;
  color: #2E7D32;
}

/* =========================================================================
   7. ELEMENTOR OVERRIDES
   Hello Elementor + Elementor Pro defaults that need alignment with D-014.
   ========================================================================= */

/* Ensure Elementor headings inherit the design system, not Hello's defaults */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--color-text-primary);
  line-height: var(--lh-display-lg);
}

.elementor-widget-text-editor {
  color: var(--color-text-primary);
  font-family: var(--font-body);
  line-height: var(--lh-body);
}

/* Elementor button default → align with cta-primary */
.elementor-button-wrapper .elementor-button:not(.cta-secondary) {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  border-radius: var(--radius-pill);
  padding: 12px 24px;
  font-family: var(--font-body);
  font-weight: var(--fw-cta);
  transition: background-color var(--transition-base);
}

.elementor-button-wrapper .elementor-button:not(.cta-secondary):hover {
  background-color: var(--color-primary-hover);
}

/* ---------- 7.1 Elementor Global Colour bridge classes ----------
   Elementor emits `.elementor-global-color-<id>` on any widget where the user
   picked a Global Colour. Rebind those classes to the child theme's CSS custom
   properties so the token invariant holds: child theme owns the hex values,
   Elementor's editor picker is a labelled view onto them, and D-014 updates
   propagate correctly without regenerating Elementor's kit CSS. Uses attribute
   selectors so the more-specific class hex from Elementor's generated CSS is
   overridden. */
.elementor-widget [class*="elementor-global-color-primary"] {
  color: var(--color-primary) !important;
}
.elementor-widget [class*="elementor-global-color-primary_hover"] {
  color: var(--color-primary-hover) !important;
}
.elementor-widget [class*="elementor-global-color-secondary"] {
  color: var(--color-secondary) !important;
}
.elementor-widget [class*="elementor-global-color-text"]:not([class*="text_secondary"]) {
  color: var(--color-text-primary) !important;
}
.elementor-widget [class*="elementor-global-color-text_secondary"] {
  color: var(--color-text-secondary) !important;
}
.elementor-widget [class*="elementor-global-color-accent"] {
  color: var(--color-text-on-primary) !important;
}
.elementor-widget [class*="elementor-global-color-surface_page"] {
  color: var(--color-surface-page) !important;
}
.elementor-widget [class*="elementor-global-color-surface_card"] {
  color: var(--color-surface-card) !important;
}
.elementor-widget [class*="elementor-global-color-surface_tint"] {
  color: var(--color-surface-tint) !important;
}

/* Section / container backgrounds picked as Global Colours */
.elementor-section[class*="elementor-global-background-color-surface_page"],
.elementor-element[class*="elementor-global-background-color-surface_page"] {
  background-color: var(--color-surface-page) !important;
}
.elementor-section[class*="elementor-global-background-color-surface_tint"],
.elementor-element[class*="elementor-global-background-color-surface_tint"] {
  background-color: var(--color-surface-tint) !important;
}
.elementor-section[class*="elementor-global-background-color-surface_card"],
.elementor-element[class*="elementor-global-background-color-surface_card"] {
  background-color: var(--color-surface-card) !important;
}
.elementor-section[class*="elementor-global-background-color-primary"],
.elementor-element[class*="elementor-global-background-color-primary"] {
  background-color: var(--color-primary) !important;
  color: var(--color-text-on-primary);
}

/* ---------- 7.2 Elementor Global Typography bridge classes ----------
   Elementor emits `.elementor-global-typography-<id>` on widgets using a
   Global Typography role. Rebind to child theme font-family + size variables. */
.elementor-widget [class*="elementor-global-typography-primary"] {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  line-height: var(--lh-display-xl) !important;
}
.elementor-widget [class*="elementor-global-typography-secondary"] {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  line-height: var(--lh-display-lg) !important;
}
.elementor-widget [class*="elementor-global-typography-text"] {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  line-height: var(--lh-body) !important;
}
.elementor-widget [class*="elementor-global-typography-accent"] {
  font-family: var(--font-script) !important;
  font-weight: 600 !important;
  transform: rotate(-3deg);
  display: inline-block;
}
.elementor-widget [class*="elementor-global-typography-heading_h3"] {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  line-height: var(--lh-heading-md) !important;
}
.elementor-widget [class*="elementor-global-typography-body_small"] {
  font-family: var(--font-body) !important;
  font-size: var(--fs-body-sm) !important;
  line-height: var(--lh-body-sm) !important;
}
.elementor-widget [class*="elementor-global-typography-cta_pill"] {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
}
.elementor-widget [class*="elementor-global-typography-small_caps_eyebrow"] {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: var(--fs-caption) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
}

/* =========================================================================
   8. RCDSO-COMPLIANT CONTENT HELPERS
   Utility classes used by content copy per D-011 sedation, D-005 insurance,
   D-013 specialty language, D-016 translation disclaimer.
   ========================================================================= */

/* Disclaimer callout — used on translated pages (D-016 §1.4), sedation page (D-011), insurance page (D-005) */
.disclaimer {
  background: var(--color-surface-tint);
  border-left: 3px solid var(--color-secondary);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-text-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.disclaimer strong { color: var(--color-text-primary); }

/* Dr. Kaur identity plate — non-photographic placeholder per D-015 §2.3 */
.identity-plate {
  width: 400px;
  height: 400px;
  max-width: 100%;
  aspect-ratio: 1;
  background: var(--color-primary);
  border: 8px solid var(--color-surface-page);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 8rem;
  letter-spacing: -0.02em;
  box-shadow: var(--shadow-hero);
  margin: 0 auto;
}

.identity-plate + .identity-plate__caption {
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
  font-style: italic;
}

/* Breadcrumb — matches Gate 3 design system */
.breadcrumb {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb .separator { margin: 0 var(--space-2); opacity: 0.5; }
.breadcrumb .current { color: var(--color-text-primary); font-weight: var(--fw-emphasis); }

/* Language switcher (TranslatePress) — footer + header positions per D-016 */
.trp-language-switcher {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
}

/* =========================================================================
   9. RTL SUPPORT (Urdu — D-016 §1.1)
   TranslatePress applies dir="rtl" to /ur/* pages; these adjustments keep
   the design system coherent in the right-to-left direction.
   ========================================================================= */

body[dir='rtl'] .script-accent { transform: rotate(3deg); }
body[dir='rtl'] .disclaimer { border-left: none; border-right: 3px solid var(--color-secondary); border-radius: var(--radius-md) 0 0 var(--radius-md); }
body[dir='rtl'] .floating-book-tab { right: auto; left: 0; transform: translateY(-50%) rotate(90deg); transform-origin: left center; }
body[dir='rtl'] .breadcrumb .separator { transform: scaleX(-1); display: inline-block; }

/* =========================================================================
   10. RESPONSIVE — mobile-first breakpoints
   ========================================================================= */

@media (max-width: 767px) {
  :root {
    --fs-display-xl: 34px;   /* Down from 48px on mobile */
    --fs-display-lg: 28px;
    --fs-display-md: 24px;
  }
  .section { padding: var(--space-7) 0; }
  .card { padding: var(--space-5); }
}

@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --fs-display-xl: 42px;
  }
}

/* =========================================================================
   11. PRINT
   ========================================================================= */

@media print {
  body { background: white; color: black; }
  .sticky-action-bar, .floating-book-tab, .elementor-widget-nav-menu { display: none !important; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 90%; }
}