/* ELGHAZAWY Global Foundation | Blocksy, Gutenberg and shared components
   Scope requirement: add elg-site to the body class in the intended Local/Staging environment. */

body.elg-site {
  margin: 0;
  background: var(--elg-bg);
  color: var(--elg-text);
  font-size: var(--elg-font-size);
  font-weight: var(--elg-weight-regular);
  line-height: var(--elg-line-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.elg-site :where(.ct-container, .elg-container) {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--elg-container);
  margin-inline: auto;
  padding-inline: var(--elg-gutter);
  min-inline-size: 0;
}

body.elg-site :where(main, .site-main) { min-inline-size: 0; }
body.elg-site :where(h1, h2, h3, h4, h5, h6) {
  color: var(--elg-navy);
  font-family: inherit;
  font-weight: var(--elg-weight-bold);
  line-height: var(--elg-line-heading);
  overflow-wrap: anywhere;
}
body.elg-site h1 { font-size: var(--elg-h1); }
body.elg-site h2 { font-size: var(--elg-h2); }
body.elg-site h3 { font-size: var(--elg-h3); }
body.elg-site :where(p, li) { color: var(--elg-text); }
body.elg-site :where(a) { color: var(--elg-navy); text-underline-offset: 0.18em; }
body.elg-site :where(a:hover) { color: var(--elg-red); }
body.elg-site :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--elg-red);
  outline-offset: 3px;
  box-shadow: var(--elg-focus-ring);
}

/* The following selectors are deliberately limited to stable shared wrappers.
   Header row composition remains a Blocksy Customizer decision. */
body.elg-site :is(.ct-header, #header) {
  background: var(--elg-surface);
  color: var(--elg-navy);
  border-block-end: 1px solid var(--elg-border);
}
body.elg-site :is(.ct-footer, #footer) {
  background: var(--elg-navy);
  color: rgb(255 255 255 / 84%);
}
body.elg-site :is(.ct-footer, #footer) :where(h2, h3, h4, a) { color: var(--elg-white); }
body.elg-site :is(.ct-footer, #footer) :where(p, li) { color: rgb(255 255 255 / 84%); }
body.elg-site :is(.ct-footer, #footer) a:hover { color: var(--elg-white); text-decoration: underline; }

body.elg-site .elg-section { padding-block: var(--elg-section-space); }
body.elg-site .elg-section--surface { background: var(--elg-surface); }
body.elg-site .elg-section--soft { background: var(--elg-bg); }
body.elg-site .elg-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--elg-space-5);
  margin-block-end: var(--elg-space-6);
}
body.elg-site .elg-section__head > * { margin: 0; }
body.elg-site .elg-section__intro { max-inline-size: 44rem; color: var(--elg-muted); }

body.elg-site :is(.wp-element-button, .elg-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--elg-control-height);
  padding: 0.55rem 1.05rem;
  border: 1px solid transparent;
  border-radius: var(--elg-radius);
  background: var(--elg-red);
  color: var(--elg-white);
  font: inherit;
  font-size: var(--elg-text-sm);
  font-weight: var(--elg-weight-bold);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--elg-transition), border-color var(--elg-transition), color var(--elg-transition), transform var(--elg-transition);
}
body.elg-site :is(.wp-element-button, .elg-button):hover { background: var(--elg-red-hover); color: var(--elg-white); }
body.elg-site :is(.wp-element-button, .elg-button):disabled,
body.elg-site :is(.wp-element-button, .elg-button).disabled { cursor: not-allowed; opacity: 0.55; }
body.elg-site .elg-button--navy { background: var(--elg-navy); }
body.elg-site .elg-button--navy:hover { background: var(--elg-navy-soft); }
body.elg-site .elg-button--outline { background: transparent; border-color: var(--elg-navy); color: var(--elg-navy); }
body.elg-site .elg-button--outline:hover { background: var(--elg-navy); color: var(--elg-white); }
body.elg-site .elg-button--white { background: var(--elg-white); color: var(--elg-navy); }
body.elg-site .elg-button--white:hover { background: var(--elg-bg); color: var(--elg-navy); }
body.elg-site .elg-button--text { min-block-size: auto; padding: 0; background: transparent; color: var(--elg-navy); }
body.elg-site .elg-button--text:hover { background: transparent; color: var(--elg-red); }

body.elg-site :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  inline-size: 100%;
  min-block-size: var(--elg-control-height);
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--elg-border-strong);
  border-radius: var(--elg-radius-sm);
  background: var(--elg-surface);
  color: var(--elg-text);
  font: inherit;
  line-height: 1.4;
  transition: border-color var(--elg-transition), box-shadow var(--elg-transition);
}
body.elg-site textarea { min-block-size: 8rem; resize: vertical; }
body.elg-site :is(input, select, textarea):focus { border-color: var(--elg-red); box-shadow: var(--elg-focus-ring); outline: 0; }
body.elg-site :is(input, select, textarea):disabled { background: #eef2f5; color: var(--elg-muted); cursor: not-allowed; }
body.elg-site :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--elg-red); inline-size: 1.05rem; block-size: 1.05rem; }
body.elg-site label { color: var(--elg-navy); font-size: var(--elg-text-sm); font-weight: var(--elg-weight-semibold); }

body.elg-site .elg-card {
  min-inline-size: 0;
  padding: var(--elg-space-5);
  border: 1px solid var(--elg-border);
  border-radius: var(--elg-radius);
  background: var(--elg-surface);
  box-shadow: var(--elg-shadow-card);
}
body.elg-site a.elg-card { display: block; color: inherit; text-decoration: none; }
@media (hover: hover) {
  body.elg-site a.elg-card:hover { border-color: var(--elg-border-strong); box-shadow: var(--elg-shadow-raised); transform: translateY(-2px); }
}
body.elg-site .elg-card__icon {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-block-end: var(--elg-space-3);
  border: 1px solid var(--elg-border);
  border-radius: var(--elg-radius-sm);
  color: var(--elg-red);
}
body.elg-site .elg-card :where(h2, h3, p) { margin-block: 0; }
body.elg-site .elg-card p { margin-block-start: var(--elg-space-2); color: var(--elg-muted); font-size: var(--elg-text-sm); }

body.elg-site .elg-state {
  display: flex;
  align-items: flex-start;
  gap: var(--elg-space-3);
  padding: var(--elg-space-4);
  border: 1px solid currentColor;
  border-radius: var(--elg-radius-sm);
  font-size: var(--elg-text-sm);
}
body.elg-site .elg-state--success { background: var(--elg-success-bg); color: var(--elg-success); }
body.elg-site .elg-state--warning,
body.elg-site .elg-state--pending { background: var(--elg-warning-bg); color: var(--elg-warning); }
body.elg-site .elg-state--error { background: var(--elg-error-bg); color: var(--elg-error); }
body.elg-site .elg-state--info,
body.elg-site .elg-state--restricted { background: var(--elg-info-bg); color: var(--elg-info); }

body.elg-site .elg-skeleton { overflow: hidden; background: #e8edf1; color: transparent; }
body.elg-site .elg-skeleton::after { content: ""; display: block; block-size: 100%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 62%), transparent); animation: elg-shimmer 1.2s infinite; }
@keyframes elg-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }