/*
Theme Name:   Hello Elementor Porsche
Theme URI:    https://forporsche.com
Description:  Hello Elementor child theme — Porsche design system
Author:       ForPorsche
Template:     hello-elementor
Version:      1.1.0
*/

/* ── Google Font ── */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
  --fp-black:      #0A0A0A;
  --fp-black-mid:  #1F1F1F;
  --fp-grey-dark:  #3D3D3D;
  --fp-grey-mid:   #767676;
  --fp-grey-light: #BDBDBD;
  --fp-grey-pale:  #F4F4F4;
  --fp-white:      #FFFFFF;
  --fp-red:        #CC0016;
  --fp-red-hover:  #A8000F;
  --font:          'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --color-bg:      var(--fp-white);
  --color-bg-alt:  var(--fp-grey-pale);
  --color-text:    var(--fp-black);
  --color-muted:   var(--fp-grey-mid);
  --color-accent:  var(--fp-red);
  --color-border:  #E2E2E2;
  --nav-height:    72px;
  --ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ═══════════════════════════════════════════════════
   FONT — universal override
   Elementor generates per-widget CSS like
   .elementor-element-XXXXX .elementor-heading-title { font-family: "Lexend Deca" }
   which has 2-class specificity. We beat it with !important
   rather than trying to match every generated selector.
═══════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body,
body *,
.elementor-widget-container,
.elementor-widget-container * {
  font-family: var(--font) !important;
}

/* ─── Base reset ─── */
body {
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

/* ═══════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--font) !important;
  line-height: 1.15;
  color: var(--color-text);
  margin-top: 0;
  text-wrap: balance;
}

h1,
.elementor-heading-title.elementor-size-xxl {
  font-size: clamp(1.875rem, 4vw, 3rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.03em !important;
}

h2,
.elementor-heading-title.elementor-size-xl {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

h3,
.elementor-heading-title.elementor-size-large {
  font-size: clamp(1.125rem, 2vw, 1.5rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

h4, .elementor-heading-title.elementor-size-medium {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}

h5, .elementor-heading-title.elementor-size-small {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

h6 {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

p { margin-top: 0; margin-bottom: 1.25rem; }

a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 180ms var(--ease);
}
a:hover { color: var(--color-accent); }

strong, b { font-weight: 600; }

/* ═══════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════ */
.elementor-section-boxed > .elementor-container {
  max-width: 1200px;
  padding-left: 24px;
  padding-right: 24px;
}

/* Generous section vertical padding */
.elementor-section.elementor-top-section {
  padding-top: 72px;
  padding-bottom: 72px;
}
/* Don't override sections that have their own bg colour/image */
.elementor-section.elementor-top-section[data-settings*="background_background"] {
  /* let Elementor handle these */
}

/* ═══════════════════════════════════════════════════
   HEADER / NAV
═══════════════════════════════════════════════════ */
.site-header,
#masthead,
header.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--fp-white);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow 200ms var(--ease);
}
.site-header.scrolled,
header.elementor-location-header.scrolled {
  box-shadow: 0 1px 16px rgba(0,0,0,0.07);
}

.site-title a {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-text) !important;
}

/* Elementor nav menu links */
.elementor-nav-menu a,
.elementor-nav-menu--main .elementor-item,
#site-navigation a,
.main-navigation a,
.ht-menu a,
.menu-item a {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--fp-black) !important;
  transition: color 180ms var(--ease) !important;
}
.elementor-nav-menu a:hover,
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active,
#site-navigation a:hover,
.main-navigation a:hover {
  color: var(--fp-red) !important;
}

/* Nav dropdown */
.elementor-nav-menu .sub-menu,
.main-navigation .sub-menu {
  background: var(--fp-white);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--fp-red);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-radius: 0;
}
.elementor-nav-menu .sub-menu a,
.main-navigation .sub-menu a {
  font-size: 11px !important;
  padding: 10px 20px !important;
}
.elementor-nav-menu .sub-menu a:hover,
.main-navigation .sub-menu a:hover {
  background: var(--fp-grey-pale);
  color: var(--fp-red) !important;
}

/* HT Mega menu override */
.htmega-menu-active .ht-menu > li > a,
.ht-menu .menu-item > a {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════ */
.elementor-button,
a.elementor-button,
.elementor-widget-button .elementor-button,
input[type="submit"],
button[type="submit"],
.wp-block-button__link {
  font-family: var(--font) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease) !important;
}

.elementor-widget-button .elementor-button,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-lg {
  background-color: var(--fp-black) !important;
  color: var(--fp-white) !important;
  border: 1px solid var(--fp-black) !important;
  padding: 13px 28px !important;
}
.elementor-widget-button .elementor-button:hover {
  background-color: var(--fp-red) !important;
  border-color: var(--fp-red) !important;
}

/* Explicit red buttons from Elementor skin overrides */
.elementor-button[style*="background-color: #CC0016"],
.elementor-button[style*="background-color:#CC0016"],
.elementor-button[style*="background-color: rgb(204"],
.elementor-button.elementor-button-default.has-type-button-primary {
  background-color: var(--fp-red) !important;
  border-color: var(--fp-red) !important;
  color: var(--fp-white) !important;
}

/* ═══════════════════════════════════════════════════
   MODEL THUMBNAIL GRID — side-by-side preservation
   Sections: elementor-col-14 (7 cols) and elementor-col-16 (6 cols)
═══════════════════════════════════════════════════ */
.elementor-col-14,
.elementor-col-16 {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

.elementor-col-14 .elementor-widget-image img,
.elementor-col-16 .elementor-widget-image img {
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  transition: none !important;
}

.elementor-col-14 .wp-caption,
.elementor-col-16 .wp-caption {
  max-width: 100% !important;
  width: 100% !important;
}

/* ═══════════════════════════════════════════════════
   IMAGES (general)
═══════════════════════════════════════════════════ */
img { max-width: 100%; height: auto; display: block; }

/* Post/card images — subtle hover only on non-thumbnail-grid images */
.elementor-post__thumbnail img,
.post-thumbnail img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.elementor-post:hover .elementor-post__thumbnail img {
  transform: scale(1.03);
}

/* ═══════════════════════════════════════════════════
   CARDS / POST GRIDS
═══════════════════════════════════════════════════ */
.elementor-post,
article.post {
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
  overflow: hidden;
}
.elementor-post:hover,
article.post:hover {
  border-color: var(--fp-grey-light) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important;
}

.elementor-post__title a {
  font-weight: 500 !important;
  font-size: 1.0625rem !important;
  letter-spacing: -0.01em !important;
  color: var(--color-text) !important;
  line-height: 1.3 !important;
}
.elementor-post__title a:hover { color: var(--fp-red) !important; }

.elementor-post-date,
.elementor-post__meta-data {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--fp-red) !important;
}

/* ═══════════════════════════════════════════════════
   DIVIDERS
═══════════════════════════════════════════════════ */
hr,
.elementor-divider-separator {
  border: none !important;
  border-top: 1px solid var(--color-border) !important;
}

/* ═══════════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════════ */
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; overflow-x: auto; display: block; }
th { font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--fp-grey-pale); border-bottom: 2px solid var(--color-border); padding: 12px 16px; text-align: left; }
td { padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--fp-grey-pale); }

/* ═══════════════════════════════════════════════════
   LISTS
═══════════════════════════════════════════════════ */
.entry-content ul,
.elementor-text-editor ul {
  list-style: none;
  padding-left: 0;
}
.entry-content ul li,
.elementor-text-editor ul li {
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
  position: relative;
}
.entry-content ul li::before,
.elementor-text-editor ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--fp-red);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  font-family: var(--font) !important;
  font-size: 1rem !important;
  color: var(--color-text);
  background: var(--fp-white);
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  padding: 12px 16px;
  width: 100%;
  transition: border-color 180ms var(--ease);
  -webkit-appearance: none;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--color-text) !important;
}

/* ═══════════════════════════════════════════════════
   ICON LISTS
═══════════════════════════════════════════════════ */
.elementor-icon-list-icon { color: var(--fp-red) !important; }

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
.site-footer,
footer.elementor-location-footer {
  background-color: var(--fp-black) !important;
  color: var(--fp-grey-light);
}
.site-footer a,
footer.elementor-location-footer a { color: var(--fp-grey-light) !important; font-size: 0.875rem; }
.site-footer a:hover,
footer.elementor-location-footer a:hover { color: var(--fp-white) !important; }
.site-footer .elementor-heading-title,
footer.elementor-location-footer .elementor-heading-title {
  color: var(--fp-white) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}
.site-footer p,
footer.elementor-location-footer p { color: var(--fp-grey-mid) !important; font-size: 0.875rem; }
.site-info { border-top: 1px solid #1E1E1E; padding-top: 1.5rem; font-size: 0.75rem; color: var(--fp-grey-mid); }

/* ═══════════════════════════════════════════════════
   ELEMENTOR ICON / COUNTER
═══════════════════════════════════════════════════ */
.elementor-counter-number-wrapper {
  font-size: 3rem !important;
  font-weight: 300 !important;
  letter-spacing: -0.04em !important;
}

/* ═══════════════════════════════════════════════════
   SINGLE PAGE / BLOG POST
═══════════════════════════════════════════════════ */
.entry-header { padding: 64px 0 48px; border-bottom: 1px solid var(--color-border); margin-bottom: 48px; }
.entry-title { font-size: clamp(1.75rem, 3.5vw, 3rem) !important; font-weight: 300 !important; letter-spacing: -0.03em !important; }
.entry-content { font-size: 1rem; line-height: 1.7; max-width: 760px; }
.entry-content h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.entry-content h3 { margin-top: 2rem; margin-bottom: 0.75rem; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .elementor-section.elementor-top-section { padding-top: 56px; padding-bottom: 56px; }
}
@media (max-width: 767px) {
  .elementor-section.elementor-top-section { padding-top: 40px; padding-bottom: 40px; }
  .elementor-section-boxed > .elementor-container { padding-left: 16px; padding-right: 16px; }
  table { font-size: 0.8125rem; }
  /* On mobile, allow the model grid columns to wrap naturally */
  .elementor-col-14, .elementor-col-16 { flex-shrink: 1 !important; }
}