/*
Theme Name: E-Wing
Theme URI: https://ewingmarketing.com
Author: E-Wing Marketing
Author URI: https://ewingmarketing.com
Description: Lightweight, Elementor-first foundation theme for the E-Wing brand. It supplies the WordPress template hierarchy, menus, logo, blog/archive/search/404 templates and the dark-purple brand styling - while every landing-page section lives in the "E-Wing Sections" plugin as editable Elementor widgets. Designed to be paired with that plugin; works with or without Elementor Pro's Theme Builder.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ewing
Tags: one-column, custom-logo, custom-menu, featured-images, blog, editor-style, full-width-template, translation-ready
*/

/* ==========================================================================
   Brand tokens.
   The "E-Wing Sections" plugin defines these same variables (and lets the
   client repoint them from Appearance > Customize > "E-Wing Colors"). The
   fallbacks below keep the theme on-brand if the plugin is ever deactivated.
   ========================================================================== */
:root {
  --ewm-primary: #7231ef;
  --ewm-primary-dark: #5a1fd6;
  --ewm-primary-rgb: 114, 49, 239;
  --ewm-light: #efeafe;
  --ewm-light-rgb: 239, 234, 254;
  --ewm-dark: #0a0620;
  --ewm-dark-2: #12093d;
  --ewm-surface: #1a0f4a;
  --ewm-surface-2: #2a1a5e;

  --ewm-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ewm-font-tight: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --ewm-font-serif: "DM Serif Display", ui-serif, Georgia, serif;

  --ewm-shell: 1400px;
  --ewm-prose: 780px;
}

/* --------------------------------------------------------------------------
   Base. Only applied to pages the THEME renders - Elementor pages get their
   look from the plugin's compiled Tailwind build, which this never fights.
   -------------------------------------------------------------------------- */
body {
  margin: 0;
  background-color: var(--ewm-dark);
  color: var(--ewm-light);
  font-family: var(--ewm-font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The design hides the scrollbar; keep that consistent on inner pages. */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--ewm-primary); text-decoration: none; }
a:hover, a:focus { color: var(--ewm-primary-dark); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--ewm-primary); outline-offset: 3px; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ewm-font-tight);
  color: var(--ewm-light);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(32px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.6vw, 40px); }
h3 { font-size: clamp(21px, 2.6vw, 28px); }

p, ul, ol, dl, table, pre, blockquote, figure { margin: 0 0 1.4em; }

hr { border: 0; border-top: 1px solid rgba(var(--ewm-light-rgb), 0.12); margin: 3rem 0; }

blockquote {
  margin-inline: 0;
  padding: 0.4em 0 0.4em 1.5em;
  border-left: 3px solid var(--ewm-primary);
  color: rgba(var(--ewm-light-rgb), 0.85);
  font-size: 1.1em;
}

code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
code { background: var(--ewm-surface); padding: 0.15em 0.45em; border-radius: 6px; color: var(--ewm-light); }
pre {
  background: var(--ewm-dark-2);
  border: 1px solid rgba(var(--ewm-light-rgb), 0.08);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  overflow-x: auto;
}
pre code { background: none; padding: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.7rem 0.9rem; border-bottom: 1px solid rgba(var(--ewm-light-rgb), 0.1); text-align: left; }
th { font-family: var(--ewm-font-tight); font-weight: 700; }

/* --------------------------------------------------------------------------
   Skip link + accessibility helpers
   -------------------------------------------------------------------------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ewm-skip-link:focus {
  position: fixed; top: 12px; left: 12px; z-index: 100000;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 0.7rem 1.2rem; border-radius: 999px;
  background: var(--ewm-primary); color: #fff; font-weight: 700;
}

/* --------------------------------------------------------------------------
   Layout shells
   -------------------------------------------------------------------------- */
.ewm-shell { width: 100%; max-width: var(--ewm-shell); margin-inline: auto; padding-inline: clamp(20px, 5vw, 80px); }
.ewm-main { display: block; }
.ewm-section { padding-block: clamp(56px, 9vw, 120px); }
.ewm-prose { max-width: var(--ewm-prose); }

/* --------------------------------------------------------------------------
   Fallback site header - only rendered when the client has NOT assigned an
   Elementor Theme Builder header and the plugin's navbar renderer is missing.
   -------------------------------------------------------------------------- */
.ewm-fallback-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(10, 6, 32, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(var(--ewm-light-rgb), 0.08);
}
.ewm-fallback-header .ewm-shell {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: 76px;
}
.ewm-brand { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--ewm-font-tight); font-weight: 800; font-size: 20px; color: var(--ewm-light); }
.ewm-brand:hover { text-decoration: none; color: var(--ewm-light); }
.ewm-brand img { max-height: 44px; width: auto; }

.ewm-nav ul { display: flex; gap: 1.8rem; list-style: none; margin: 0; padding: 0; }
.ewm-nav a { color: rgba(var(--ewm-light-rgb), 0.72); font-size: 15px; font-weight: 600; }
.ewm-nav a:hover, .ewm-nav .current-menu-item > a { color: var(--ewm-light); text-decoration: none; }
@media (max-width: 860px) { .ewm-nav ul { display: none; } }

/* --------------------------------------------------------------------------
   Fallback site footer
   -------------------------------------------------------------------------- */
.ewm-fallback-footer {
  border-top: 1px solid rgba(var(--ewm-light-rgb), 0.08);
  background: var(--ewm-dark-2);
  padding-block: 2.4rem;
  font-size: 14px;
  color: rgba(var(--ewm-light-rgb), 0.55);
}
.ewm-fallback-footer .ewm-shell { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }

/* --------------------------------------------------------------------------
   Page + post header
   -------------------------------------------------------------------------- */
.ewm-page-head { padding-block: clamp(56px, 9vw, 110px) clamp(24px, 4vw, 48px); }
.ewm-eyebrow {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(var(--ewm-light-rgb), 0.14);
  border-radius: 999px;
  background: rgba(var(--ewm-primary-rgb), 0.08);
  color: var(--ewm-primary);
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.ewm-meta { color: rgba(var(--ewm-light-rgb), 0.5); font-size: 14px; }
.ewm-meta a { color: rgba(var(--ewm-light-rgb), 0.75); }
.ewm-featured { border-radius: 22px; overflow: hidden; margin-bottom: 2.6rem; border: 1px solid rgba(var(--ewm-light-rgb), 0.08); }
.ewm-featured img { display: block; width: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Post grid (blog / archive / search)
   -------------------------------------------------------------------------- */
.ewm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(20px, 2.4vw, 32px); }

.ewm-card {
  display: flex; flex-direction: column;
  background: var(--ewm-dark-2);
  border: 1px solid rgba(var(--ewm-light-rgb), 0.08);
  border-radius: 22px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.ewm-card:hover { border-color: rgba(var(--ewm-primary-rgb), 0.4); transform: translateY(-4px); }
.ewm-card__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ewm-surface); }
.ewm-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.ewm-card:hover .ewm-card__thumb img { transform: scale(1.05); }
.ewm-card__body { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.5rem 1.6rem 1.8rem; flex: 1; }
.ewm-card__title { font-size: 21px; margin: 0; }
.ewm-card__title a { color: var(--ewm-light); }
.ewm-card__title a:hover { color: var(--ewm-primary); text-decoration: none; }
.ewm-card__excerpt { color: rgba(var(--ewm-light-rgb), 0.6); font-size: 15px; margin: 0; }
.ewm-card__more { margin-top: auto; padding-top: 0.6rem; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.ewm-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1.7rem;
  border: 0; border-radius: 999px;
  background: var(--ewm-primary); color: #fff;
  font-family: var(--ewm-font-tight); font-weight: 700; font-size: 15px;
  cursor: pointer; transition: background 0.25s ease, transform 0.25s ease;
}
.ewm-btn:hover { background: var(--ewm-primary-dark); color: #fff; text-decoration: none; transform: translateY(-2px); }
.ewm-btn--ghost { background: transparent; border: 1px solid rgba(var(--ewm-light-rgb), 0.2); color: var(--ewm-light); }
.ewm-btn--ghost:hover { background: rgba(var(--ewm-light-rgb), 0.06); color: var(--ewm-light); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="password"], input[type="number"], input[type="tel"], textarea, select {
  width: 100%;
  padding: 0.85rem 1.1rem;
  background: var(--ewm-surface);
  border: 1px solid rgba(var(--ewm-light-rgb), 0.12);
  border-radius: 14px;
  color: var(--ewm-light);
  font: inherit;
  font-size: 15px;
}
input::placeholder, textarea::placeholder { color: rgba(var(--ewm-light-rgb), 0.35); }
input:focus, textarea:focus, select:focus { border-color: var(--ewm-primary); outline: none; }
textarea { min-height: 150px; resize: vertical; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 0.4rem; color: rgba(var(--ewm-light-rgb), 0.8); }

.ewm-searchform { display: flex; gap: 0.7rem; max-width: 520px; }
.ewm-searchform .ewm-btn { flex: none; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.ewm-pagination { margin-top: 3.5rem; }
.ewm-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.ewm-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 46px; padding: 0 0.9rem;
  border: 1px solid rgba(var(--ewm-light-rgb), 0.12);
  border-radius: 999px;
  color: rgba(var(--ewm-light-rgb), 0.75); font-weight: 600; font-size: 15px;
}
.ewm-pagination .page-numbers:hover { border-color: var(--ewm-primary); color: var(--ewm-light); text-decoration: none; }
.ewm-pagination .page-numbers.current { background: var(--ewm-primary); border-color: var(--ewm-primary); color: #fff; }

.ewm-post-nav { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(var(--ewm-light-rgb), 0.1); }
.ewm-post-nav a { font-weight: 600; }

/* --------------------------------------------------------------------------
   Comments
   -------------------------------------------------------------------------- */
.ewm-comments { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid rgba(var(--ewm-light-rgb), 0.1); }
.ewm-comments .comment-list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.ewm-comments .comment-list ol.children { list-style: none; margin: 1rem 0 0; padding-left: clamp(16px, 3vw, 42px); }
.ewm-comments .comment-body {
  background: var(--ewm-dark-2);
  border: 1px solid rgba(var(--ewm-light-rgb), 0.08);
  border-radius: 18px;
  padding: 1.3rem 1.5rem;
  margin-bottom: 1rem;
}
.ewm-comments .comment-author img { border-radius: 999px; margin-right: 0.6rem; vertical-align: middle; }
.ewm-comments .comment-meta { font-size: 13px; color: rgba(var(--ewm-light-rgb), 0.5); margin-bottom: 0.6rem; }
.ewm-comments .comment-reply-link { font-size: 14px; font-weight: 600; }
.comment-form p { margin-bottom: 1rem; }
.comment-form .form-submit { margin-bottom: 0; }
.comment-form input[type="submit"] {
  width: auto; padding: 0.9rem 1.8rem; border: 0; border-radius: 999px;
  background: var(--ewm-primary); color: #fff; font-family: var(--ewm-font-tight); font-weight: 700; cursor: pointer;
}
.comment-form input[type="submit"]:hover { background: var(--ewm-primary-dark); }

/* --------------------------------------------------------------------------
   WordPress core alignment / caption classes
   -------------------------------------------------------------------------- */
.alignleft { float: left; margin: 0.4rem 1.8rem 1.2rem 0; }
.alignright { float: right; margin: 0.4rem 0 1.2rem 1.8rem; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { width: min(1200px, 92vw); margin-inline: auto; max-width: none; }
.alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
.wp-caption-text, figcaption { font-size: 14px; color: rgba(var(--ewm-light-rgb), 0.5); text-align: center; margin-top: 0.6rem; }
.sticky .ewm-card { border-color: rgba(var(--ewm-primary-rgb), 0.45); }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.ewm-404 { min-height: 68vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.2rem; }
.ewm-404__code { font-family: var(--ewm-font-tight); font-size: clamp(80px, 16vw, 190px); font-weight: 800; line-height: 0.9; color: var(--ewm-primary); margin: 0; }