/*
Theme Name: IronEggShell
Author: isme
Description: IronEggShell WordPress Repair service theme.
Theme URI: http://ironeggshell.com/
Author URI: http://ironeggshell.com/
Version: 0.2
*/

/* ══ Variables ══════════════════════════════════════════════════════════ */
:root {
  --brand:   #1a1a2e;
  --accent:  #e94560;
  --surface: #f8f9fc;
  --card:    #ffffff;
  --border:  #e2e6ea;
  --text:    #1e2530;
  --muted:   #6b7280;
  --ok:      #059669;
  --radius:  10px;
  --shadow:  0 2px 12px rgba(0,0,0,.08);
  --max-w:   860px;
}

/* ══ Reset ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  font-size: 100%;
  font: inherit;
  padding: 0;
  border: 0;
  margin: 0;
  vertical-align: baseline;
}

/* Only reset list style on nav — NOT globally */
blockquote, q { quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ══ Base ════════════════════════════════════════════════════════════════ */
html {
  background: url('/wp-content/uploads/2018/10/eggbgtall.png') top center / cover fixed;
  background-color: var(--brand); /* fallback while image loads */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: transparent;
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* ══ Header / Nav ════════════════════════════════════════════════════════ */
#wrapper {
  background: var(--brand);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

header {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  min-height: 58px;
}

/* Site name / logo in header */
#blog-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.3px;
  color: #fff;
  text-decoration: none;
  margin-right: 2rem;
  white-space: nowrap;
}
#blog-title a { color: #fff; text-decoration: none; }
#blog-title a:hover { text-decoration: none; opacity: .85; }

#blog-description {
  display: none; /* hide tagline in header — keep it clean */
}

nav {
  position: static;
  z-index: auto;
  top: auto;
  left: auto;
  max-width: none;
  margin: 0;
  flex: 1;
}

#menu-main-menu {
  display: flex;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: wrap;
}

#menu-main-menu li {
  list-style: none;
  overflow: visible;
  font-size: .85rem;
  font-weight: 500;
  text-shadow: none;
  margin: 0;
}

#menu-main-menu li a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  padding: .45rem .85rem;
  border-radius: 6px;
  display: block;
  transition: all .15s;
  font-weight: 500;
  font-size: .85rem;
}

#menu-main-menu li a:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
  text-decoration: none;
}

/* "Get WordPress Help" strong CTA in nav */
#menu-main-menu li a strong {
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  padding: .45rem 1rem;
  border-radius: 6px;
  display: block;
  transition: background .15s;
}

#menu-main-menu li a:hover strong {
  background: #d63651;
}

#menu-main-menu li img { display: none; }

.brand-separator { display: none; }

/* ══ Container — normal document flow ════════════════════════════════════ */
#container {
  position: static;
  background: none;
  background-image: none;
  height: auto;
  width: auto;
  overflow: visible;
  bottom: auto;
  left: auto;
}

/* Hide legacy search bar that sits at top of every page */
#main_search { display: none; }

/* ══ Main content area ══════════════════════════════════════════════════ */
#main_content {
  position: static;
  width: auto;
  height: auto;
  padding: 3rem 1.5rem 5rem;
  right: auto;
  top: auto;
  z-index: auto;
  max-width: var(--max-w);
  margin: 2rem auto;
  background: rgba(255,255,255,.93);
  border-radius: var(--radius);
  box-shadow: 0 4px 32px rgba(0,0,0,.18);
}

#main_content p {
  clear: none;
  max-width: none;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 1rem;
}

#main_content ul {
  margin-left: 0;
  margin-top: 0;
}

#content {
  display: block;
  padding: 0;
  max-width: 100%;
  margin: 0;
}

#post-inner { width: 100%; }

/* ══ Typography ══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  color: var(--brand);
  line-height: 1.3;
  font-weight: 700;
}

h1.entry-title {
  font-size: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid var(--accent);
}

.entry-content h2 {
  font-size: 1.4rem;
  margin: 2.5rem 0 .9rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--border);
}

.entry-content h3 {
  font-size: 1.1rem;
  margin: 2rem 0 .6rem;
  color: var(--text);
}

.entry-content p {
  margin-bottom: 1.1rem;
  line-height: 1.75;
  color: var(--text);
  clear: none;
  max-width: none;
  margin-left: 0;
}

.entry-content strong { font-weight: 700; }
.entry-content em     { font-style: italic; }

.entry-content a { color: var(--accent); font-weight: 600; }
.entry-content a:hover { text-decoration: underline; }

/* ══ Lists ═══════════════════════════════════════════════════════════════ */
.entry-content ul {
  list-style: disc;
  margin: 0 0 1.25rem 1.5rem;
  padding: 0;
}

.entry-content ol {
  list-style: decimal;
  margin: 0 0 1.25rem 1.5rem;
  padding: 0;
}

.entry-content li {
  margin-bottom: .4rem;
  line-height: 1.7;
  color: var(--text);
}

/* ══ Tables ══════════════════════════════════════════════════════════════ */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
  font-size: .9rem;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.entry-content th {
  background: var(--brand);
  color: #fff;
  padding: .85rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: .85rem;
}

.entry-content td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  max-width: none;
  text-align: left;
  line-height: 1.55;
}

.entry-content tr:last-child td { border-bottom: none; }
.entry-content tr:nth-child(even) td { background: #f9fafb; }

/* ══ Intake form container adjustments ══════════════════════════════════
   When form is embedded via shortcode, ensure its inner containers
   are not clipped and dropdowns render correctly.
══════════════════════════════════════════════════════════════════════════ */
#main_content .main {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

#main_content .panel {
  overflow: visible; /* ensure native <select> dropdowns are not clipped */
}

/* Override the global list reset inside intake form help sections */
.help-content ol { list-style: decimal; padding-left: 1.25rem; }
.help-content ul { list-style: disc;    padding-left: 1.25rem; }
.help-content li { margin-bottom: .25rem; list-style: inherit; }

/* ══ Get Help page (page-id-754) — full-width intake form ════════════════
   The intake form uses its own two-column layout with a tips sidebar.
   Remove the card container, let the form fill the viewport width.
══════════════════════════════════════════════════════════════════════════ */
.page-id-754 #main_content {
  max-width: 100%;
  margin: 1rem auto;
  padding: 1rem 1.5rem 3rem;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.page-id-754 h1.entry-title { display: none; }

/* Constrain the intake form's outer wrapper to a readable max width */
.page-id-754 .ies-outer {
  max-width: 1100px;
  margin: 0 auto;
}

/* ══ Footer ══════════════════════════════════════════════════════════════ */
#footer {
  position: static;
  right: auto;
  bottom: auto;
  background: var(--brand);
  padding: 1.5rem;
  text-align: center;
  font-size: .85rem;
  z-index: auto;
}

#copyright { color: rgba(255,255,255,.5); margin: 0; }

/* ══ Sidebar (hidden — not in use) ═══════════════════════════════════════ */
#sidebar { display: none; }

/* ══ Responsive ══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  #main_content { padding: 2rem 1rem 4rem; }

  h1.entry-title { font-size: 1.5rem; }
  .entry-content h2 { font-size: 1.2rem; }

  .entry-content table { font-size: .8rem; }
  .entry-content th, .entry-content td { padding: .6rem .75rem; }
}

@media (max-width: 480px) {
  #menu-main-menu { gap: .1rem; }
  #menu-main-menu li a { padding: .4rem .55rem; font-size: .78rem; }
  #menu-main-menu li a strong { padding: .4rem .7rem; }
}

/* ══ Utility ══════════════════════════════════════════════════════════════ */
.clr    { clear: both; float: none; }
.sticky {}
.bypostauthor {}
.wp-caption {}
.wp-caption-text {}
.gallery-caption {}
.alignright  { float: right; margin: 0 0 1rem 1.5rem; }
.alignleft   { float: left;  margin: 0 1.5rem 1rem 0; }
.aligncenter { display: block; margin: 0 auto 1rem; }