/*
Theme Name: 2MDOpinion - Hello Elementor Child
Theme URI: https://2mdopinion.com
Description: 2MDOpinion - Hello theme child of Hello Elementor, created by 2MDOpinion Team
Author: 2MDOpinion Team
Author URI: https://2mdopinion.com
Template: hello-elementor
Version: 1.0.0
Text Domain: 2md-custom-theme
License: GNU General Public License v3 or later.
License URI: https://2mdopinion.com
*/



/* Add your custom styles here */
:root {
  /* ---- Color ---- */
  --c-primary:        #A81E32;
  --c-primary-hover:  #8B1728;
  --c-primary-soft:   #FBEDEF;
  --c-secondary:      #161616;
  --c-secondary-hover:#000000;
  --c-accent:         #0F5F58;
  --c-bg:             #FFFFFF;
  --c-bg-alt:         #FDF6F5;
  --c-surface:        #F7F4F2;
  --c-text:           #2B2B2B;
  --c-heading:        #161616;
  --c-muted:          #5F5A58;
  --c-placeholder:    #8A8482;
  --c-border:         #ECE7E4;
  --c-border-strong:  #D9D2CE;
  --c-border-inverse: #2E2E2E;
  --c-inverse:        #FFFFFF;
  --c-inverse-muted:  #C9C4C2;
  --c-success:        #166F4A;  --c-success-soft: #E8F5EE;
  --c-warning:        #9A6414;  --c-warning-soft: #FDF2E2;
  --c-error:          #C0261B;  --c-error-soft:   #FCEBE9;

  /* ---- Type ---- */
  --font-primary: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-accent:  "Poppins", system-ui, -apple-system, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fw-bold: 700;    --fw-extrabold: 800;

  --fs-h1: 60px;  --lh-h1: 1.05;  --ls-h1: -0.02em;
  --fs-h2: 44px;  --lh-h2: 1.14;  --ls-h2: -0.015em;
  --fs-h3: 32px;  --lh-h3: 1.25;  --ls-h3: -0.01em;
  --fs-h4: 24px;  --lh-h4: 1.32;
  --fs-h5: 20px;  --lh-h5: 1.4;
  --fs-h6: 14px;  --lh-h6: 1.4;   --ls-h6: 0.14em;
  --fs-body-lg: 18px;
  --fs-body:    16px;  --lh-body: 1.7;
  --fs-small:   14px;  --lh-small: 1.6;
  --fs-caption: 12px;  --lh-caption: 1.5;
  --fs-button:  16px;
  --fs-nav:     15px;
  --fs-label:   13px;  --ls-label: 0.04em;
  --fs-input:   16px;

  /* ---- Spacing (8px base) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --space-7: 40px;  --space-8: 48px;  --space-9: 64px;
  --space-10: 80px; --space-11: 96px; --space-12: 120px;
  --space-13: 160px;

  --section-hero:     120px;
  --section-standard: 96px;
  --section-compact:  64px;
  --section-band:     48px;

  --container-wide:   1440px;
  --container:        1200px;
  --container-narrow: 880px;
  --container-text:   680px;
  --container-pad:    24px;

  --gap-column: 32px;
  --gap-card:   24px;
  --gap-widget: 24px;
  --pad-card:   32px;

  /* ---- Radius ---- */
  --radius-0: 0;      --radius-xs: 4px;   --radius-sm: 8px;
  --radius-md: 12px;  --radius-lg: 20px;  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(22,22,22,.06);
  --shadow-sm: 0 2px 8px rgba(22,22,22,.07);
  --shadow-md: 0 6px 18px rgba(22,22,22,.09);
  --shadow-lg: 0 14px 34px rgba(22,22,22,.11);
  --shadow-xl: 0 28px 60px rgba(22,22,22,.14);
  --focus-ring: 0 0 0 3px rgba(168,30,50,.22);

  /* ---- Controls ---- */
  --btn-h-sm: 40px;  --btn-px-sm: 20px;
  --btn-h-md: 48px;  --btn-px-md: 28px;
  --btn-h-lg: 56px;  --btn-px-lg: 36px;
  --input-h: 52px;   --input-pad: 14px 16px;
  --transition: 200ms ease;
}

/* Laptop — 1025px to 1366px */
@media (max-width: 1366px) {
  :root { --container: 1140px; --section-hero: 104px; }
}

/* Tablet — up to 1024px */
@media (max-width: 1024px) {
  :root {
    --fs-h1: 46px; --fs-h2: 36px; --fs-h3: 28px; --fs-h4: 22px;
    --fs-h5: 19px; --fs-h6: 13px; --fs-body-lg: 17px;
    --section-hero: 96px; --section-standard: 80px;
    --section-compact: 48px; --section-band: 40px;
    --gap-column: 24px; --gap-card: 20px; --gap-widget: 20px;
    --pad-card: 28px;
  }
}

/* Mobile — up to 767px */
@media (max-width: 767px) {
  :root {
    --fs-h1: 34px; --fs-h2: 28px; --fs-h3: 24px; --fs-h4: 20px;
    --fs-h5: 18px; --fs-h6: 12px; --fs-button: 15px; --fs-nav: 17px;
    --section-hero: 64px; --section-standard: 56px;
    --section-compact: 40px; --section-band: 32px;
    --container-pad: 20px; --gap-column: 20px;
    --gap-card: 16px; --gap-widget: 16px; --pad-card: 24px;
  }
}

/* ---- Base ---- */
body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1,h2,h3,h4,h5 { font-family: var(--font-primary); color: var(--c-heading); margin: 0 0 var(--space-5); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-extrabold); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-semibold); }
h6 {
  font-family: var(--font-accent); font-size: var(--fs-h6);
  line-height: var(--lh-h6); letter-spacing: var(--ls-h6);
  font-weight: var(--fw-semibold); text-transform: uppercase;
  color: var(--c-primary); margin: 0 0 var(--space-4);
}
p { margin: 0 0 var(--space-4); }
small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-muted); }
a { color: var(--c-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-primary-hover); text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

/* ---- Elementor bridges ---- */
.e-con { --container-max-width: var(--container); }
.e-con-inner { padding-inline: var(--container-pad); }
.elementor-widget:not(:last-child) { margin-bottom: var(--gap-widget); }

.elementor-button {
  font-family: var(--font-accent);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
  min-height: var(--btn-h-md);
  padding: 0 var(--btn-px-md);
  border-radius: var(--radius-pill);
  background: var(--c-primary);
  color: var(--c-inverse);
  transition: background var(--transition), transform var(--transition);
}
.elementor-button:hover { background: var(--c-primary-hover); transform: translateY(-1px); }
.elementor-button.btn-secondary { background: var(--c-secondary); }
.elementor-button.btn-outline {
  background: transparent; color: var(--c-primary);
  box-shadow: inset 0 0 0 1.5px var(--c-primary);
}

.elementor-field-group .elementor-field-label {
  font-family: var(--font-accent); font-size: var(--fs-label);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-label);
  color: var(--c-heading); margin-bottom: var(--space-2);
}
.elementor-field-textual {
  height: var(--input-h); padding: var(--input-pad);
  font-family: var(--font-primary); font-size: var(--fs-input);
  color: var(--c-text); background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.elementor-field-textual:hover { border-color: #B8AFAA; }
.elementor-field-textual:focus {
  border-color: var(--c-primary); box-shadow: var(--focus-ring); outline: none;
}
.elementor-field-textual::placeholder { color: var(--c-placeholder); }
.elementor-message.elementor-message-danger { color: var(--c-error); }

/* ---- Section utilities ---- */
.section        { padding-block: var(--section-standard); }
.section--hero  { padding-block: var(--section-hero); }
.section--compact { padding-block: var(--section-compact); }
.section--alt   { background: var(--c-bg-alt); }
.section--dark  { background: var(--c-secondary); color: var(--c-inverse-muted); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-inverse); }
.card {
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); padding: var(--pad-card);
  box-shadow: var(--shadow-sm); transition: box-shadow var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); }
.measure { max-width: var(--container-text); }