/*
 * About Us + Contact Us.
 *
 * about-us.php was, like info.php, a single GIF with the text baked in
 * (images/new_info_photo/about-us.gif, 640x659). Rebuilt as real text in the
 * same Arial/Helvetica face it was drawn in.
 *
 * contact-us.php was a 550px <table border="2"> form. The contact details keep
 * their centred Times look; the form itself is rebuilt in Gravity Forms.
 */

/* ---------- About Us ---------- */
.em-page-about{
  max-width:660px;margin:0 auto;
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;line-height:1.45;color:#000;
}
.em-page-about h1{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(18px,3.6vw,20px);
  font-weight:bold;line-height:1.3;
  color:#000;
  margin:.2em 0 1.2em;
}
.em-page-about p{margin:0 0 1em;}
.em-page-about .em-about-closing{margin-top:2em;}
.em-page-about .em-about-signature{
  margin-top:2em;
  line-height:1.4;
}
.em-page-about .em-about-tagline{font-style:italic;}

/* ---------- Contact Us ---------- */
.em-page-contact{max-width:620px;margin:0 auto;}

/* The five centred Times lines above the form, as on the legacy page. */
.em-contact-details{
  text-align:center;
  font-family:"Times New Roman",Times,serif;
  font-size:clamp(17px,3.4vw,19px);
  line-height:1.5;
  color:#000;
  margin:0 0 22px;
}
.em-contact-details p{margin:.55em 0;}
.em-contact-details a{color:#0033CC;text-decoration:none;}
.em-contact-details a:hover{color:var(--em-nav);text-decoration:underline;}
.em-contact-details .em-contact-ship{
  font-style:italic;color:#333;
}

/* ---------- Gravity Forms ----------
   The old form was a bordered table with right-aligned labels and 45-character
   inputs. This keeps a single clean card, labels above fields, and inputs that
   fill the width so it works on a phone.                                      */
.em-contact-form{
  background:#fafafa;
  border:1px solid #d5d5d5;
  border-radius:5px;
  padding:18px 20px 20px;
}
.em-contact-form .em-contact-form-title{
  font-family:Georgia,"Times New Roman",Times,serif;
  font-weight:bold;
  font-size:20px;
  color:#5B0000;
  text-align:center;
  margin:0 0 4px;
}
.em-contact-form .em-contact-form-note{
  text-align:center;font-size:12.5px;color:#666;margin:0 0 14px;
}

.em-contact-form .gform_wrapper{margin:0;}
.em-contact-form .gform_wrapper .gform_fields{
  display:grid;grid-template-columns:1fr;gap:14px;
}
.em-contact-form .gform_wrapper .gfield_label{
  display:block;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:13px;font-weight:bold;color:#333;
  margin:0 0 4px;
}
.em-contact-form .gform_wrapper .gfield_required{color:#C00;margin-left:2px;}

.em-contact-form .gform_wrapper input[type="text"],
.em-contact-form .gform_wrapper input[type="email"],
.em-contact-form .gform_wrapper input[type="tel"],
.em-contact-form .gform_wrapper select,
.em-contact-form .gform_wrapper textarea{
  width:100%;
  box-sizing:border-box;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:14px;
  color:#222;
  background:#fff;
  border:1px solid #b9b9b9;
  border-radius:3px;
  padding:8px 9px;
}
.em-contact-form .gform_wrapper textarea{min-height:140px;resize:vertical;}
.em-contact-form .gform_wrapper input[type="text"]:focus,
.em-contact-form .gform_wrapper input[type="email"]:focus,
.em-contact-form .gform_wrapper input[type="tel"]:focus,
.em-contact-form .gform_wrapper select:focus,
.em-contact-form .gform_wrapper textarea:focus{
  border-color:var(--em-nav);
  outline:2px solid rgba(209,41,32,.18);
  outline-offset:0;
}

.em-contact-form .gform_wrapper .gform_footer{
  margin:16px 0 0;padding:0;text-align:center;
}

/* Gravity Forms 3.x renders with its "orbital" theme, which is themed through
   CSS custom properties rather than by overriding selectors — the framework
   resolves --gf-ctrl-btn-bg-color-primary from --gf-color-primary (default the
   GF blue #204ce5). Setting the colour here is the supported route and keeps
   the button, focus rings and links consistent. */
.em-contact-form .gform_wrapper.gform-theme{
  --gf-color-primary:#D12920;
  --gf-color-primary-rgb:209,41,32;
  --gf-color-primary-darker:#b2231b;
  --gf-color-primary-lighter:#e04a41;
  --gf-color-primary-contrast:#ffffff;
  --gf-color-primary-contrast-rgb:255,255,255;
}
.em-contact-form .gform_wrapper .gform_footer button.gform_button,
.em-contact-form .gform_wrapper .gform_footer input.gform_button{
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:15px;font-weight:bold;
  padding:10px 30px;
  cursor:pointer;
}

/* Validation + confirmation */
.em-contact-form .gform_wrapper .gfield_description.validation_message,
.em-contact-form .gform_wrapper .validation_message{
  color:#B00;font-size:12.5px;margin-top:4px;
}
.em-contact-form .gform_wrapper .gform_validation_errors{
  background:#fff4f4;border:1px solid #e0b4b4;border-radius:4px;
  padding:10px 12px;margin:0 0 14px;font-size:13px;color:#8a1f1f;
}
.em-contact-form .gform_confirmation_message{
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:14px;line-height:1.5;color:#1c1c1c;
  background:#f2f8f2;border:1px solid #bcd9bc;border-radius:4px;
  padding:16px 18px;text-align:center;
}
.em-contact-form .gform_confirmation_message a{color:#0033CC;}

/* Honeypot / anti-spam fields must stay hidden. */
.em-contact-form .gform_wrapper .gform_validation_container,
.em-contact-form .gform_wrapper .gfield--type-honeypot{display:none !important;}

@media (max-width:600px){
  .em-contact-form{padding:14px;}
  .em-contact-form .gform_wrapper .gform_footer input.gform_button,
.em-contact-form .gform_wrapper .gform_footer button.gform_button{width:100%;}
}

/* Gravity Forms ships a fixed control height that clips the select's text once
   our own padding is applied. Let it size to its content. */
.em-contact-form .gform_wrapper select{
  height:auto;
  min-height:38px;
  line-height:1.4;
  /* The shared `background:#fff` above resets Gravity Forms' arrow sizing, so its
     hover/focus arrow image tiled across the whole box (a zigzag pattern). */
  background-image:var(--gf-ctrl-select-icon,none);
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px auto;
  padding-right:34px;
}

/* ---------- Short-page layout ----------
   The Books column is absolutely positioned theme-wide now (style.css, legacy
   #sidebar2), so it no longer stretches short pages. The category column is
   deliberately left in normal flow: capping it would need either a scrollbar on
   every page or clipping, and clipping navigation hides links. */
@media (max-width:600px){
  .em-page-about,
  .em-page-contact{padding-left:0;padding-right:0;}
}

/* ---------- Guarantee ----------
   Legacy classes: .style13 was `font-size:120%; color:#000066` (the sub-headings)
   and .style14 was `color:#009900` (the return address). Reproduced. */
.em-page-guarantee{
  max-width:660px;margin:0 auto;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:14px;line-height:1.55;color:#000;
}
.em-guarantee-head{text-align:center;}
.em-page-guarantee .em-g-title{
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:clamp(15px,3vw,16.8px); /* 120% of 14px, as .style13 */
  font-weight:bold;
  color:#000066;
  margin:.2em 0 .8em;
}
.em-guarantee-seal{
  display:block;margin:0 auto 18px;
  width:350px;max-width:100%;height:auto;
}
.em-page-guarantee .em-g-head{
  font-size:16.8px;color:#000066;font-weight:bold;
  margin:1.5em 0 .4em;
}
.em-page-guarantee p{margin:0 0 1em;}
.em-page-guarantee .em-g-address{color:#009900;font-weight:bold;}
.em-page-guarantee .em-g-contact{
  margin-top:1.6em;padding-top:12px;
  border-top:1px solid #dcdcdc;
  font-size:13px;color:#333;
}
.em-page-guarantee .em-g-contact a{color:#0033CC;}
.em-page-guarantee .em-g-contact a:hover{color:var(--em-nav);}

/* ---------- Sitemap ----------
   Grouped and indented like the legacy hand-written list, but generated. */
.em-page-sitemap{max-width:660px;margin:0 auto;}
.em-sitemap-title{
  font-family:"Times New Roman",Times,serif;
  font-weight:bold;
  font-size:clamp(24px,5vw,32px);
  color:var(--em-head);
  text-align:center;
  margin:.2em 0 .8em;
}
.em-sitemap{
  /* Multi-column rather than grid: grid rows stretch to the tallest group and
     leave ragged vertical gaps, whereas columns let the groups flow. */
  column-count:2;
  column-gap:28px;
}
.em-sitemap-group{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  margin:0 0 16px;
}
.em-sitemap-head{
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:13.5px;font-weight:bold;
  color:var(--em-green);
  margin:0 0 .35em;
  padding-bottom:3px;
  border-bottom:1px solid #dcdcdc;
}
.em-sitemap-head a{color:var(--em-green);}
.em-sitemap-head a:hover{color:var(--em-nav);}
.em-sitemap-list{list-style:none;margin:0;padding:0;}
.em-sitemap-list li{margin:0 0 2px;}
.em-sitemap-list a{
  display:block;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:13px;
  color:#0033CC;
  padding:2px 0 2px 12px;
  position:relative;
}
.em-sitemap-list a::before{content:"\25B8";position:absolute;left:0;color:#8a8a8a;}
.em-sitemap-list a:hover{color:var(--em-nav);}
.em-sitemap-list a:hover::before{color:var(--em-nav);}

@media (max-width:600px){
  .em-guarantee-seal{width:250px;}
  .em-sitemap{column-count:1;}
}