/*
 * Info pages ("The benefits of magnets") — English + Spanish.
 *
 * The legacy English page had NO text: its whole body was two GIFs
 * (images/info/MG-Info1.gif 550x591 and MG-long_info.gif 660x1486), so ~700
 * words of the client's copy was invisible to search engines and unreadable on
 * a phone. This stylesheet reproduces those GIFs' typography in real text —
 * same fonts, sizes, colours and rules — so desktop looks the same.
 *
 * Reference sizes are taken from the GIFs at their native widths: the top block
 * was 550px wide, the long explanation 660px (the main column is ~658px at the
 * 1000px container, which is why the long text wraps as it always did).
 */

.em-info{
  --info-red:#9E2B25;    /* "Magnetic Jewelry" / "Long Explanation" headings */
  --info-green:#00994C;  /* underlined section headings */
  --info-blue:#3465A4;   /* "Magnets", "Pain can be alleviated", asterisk rules */
  --info-black:#000000;
}

/* ---------- Language switch button ----------
   Was an 18px Arial form submit button posting to the other page. Same look,
   but a real link so it is crawlable and works without a POST.               */
.em-info-switch{text-align:center;margin:4px 0 14px;}
.em-info-switch a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:31px;padding:4px 12px;box-sizing:border-box;
  border:1px solid #4d637e;border-radius:4px;
  background:linear-gradient(to bottom,#fff 0%,#d9e9f8 24%,#90bdea 75%,#6a97ca 100%);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),0 2px 2px rgba(0,0,0,.3);
  color:#102235;font:bold 14px/21px Arial,Helvetica,sans-serif;
  text-decoration:none;cursor:pointer;
}
.em-info-switch a:hover,
.em-info-switch a:focus{
  background:linear-gradient(to bottom,#fff 0%,#e2effa 24%,#a2c8eb 75%,#78a5d3 100%);
  border-color:#344b66;color:#102235;
}
.em-info-switch a:active{
  transform:translateY(1px);
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.2);
}

/* ---------- The row of asterisks ----------
   Decorative, and hidden from screen readers. nowrap + hidden overflow keeps it
   a full-width rule at any viewport instead of wrapping into a block of stars. */
.em-info-stars{
  color:var(--info-blue);
  font-family:Arial,Helvetica,sans-serif;
  font-weight:bold;font-size:20px;line-height:1;
  letter-spacing:1px;
  text-align:center;
  white-space:nowrap;overflow:hidden;
  margin:10px 0;
  user-select:none;
}

/* ---------- Top block (from MG-Info1.gif) ---------- */
.em-info-top{max-width:560px;margin:0 auto;text-align:center;}
.em-info-title{
  font-family:Arial,Helvetica,sans-serif;
  font-weight:bold;
  font-size:clamp(30px,6.4vw,46px);
  line-height:1.05;
  color:var(--info-red);
  margin:.15em 0 .1em;
}
.em-info-tagline{
  font-family:"Times New Roman",Times,serif;
  font-weight:bold;font-style:italic;
  font-size:clamp(22px,4.6vw,34px);
  line-height:1.15;
  color:var(--info-black);
  margin:0 0 .35em;
}
.em-info-lead{
  font-family:"Times New Roman",Times,serif;
  font-size:clamp(18px,3.6vw,25px);
  line-height:1.28;
  color:var(--info-black);
  text-align:left;
  margin:0;
}
.em-info-lead .em-info-magnets{color:var(--info-blue);font-weight:bold;}
.em-info-lead .em-info-alleviated{
  color:var(--info-blue);font-weight:bold;font-style:italic;
  text-decoration:underline;
}

/* ---------- Long explanation (from MG-long_info.gif) ---------- */
/* Shared centred text column for both languages. */
.em-info-body{max-width:670px;margin:0 auto;}

.em-info-long p.em-info-long-title{
  font-family:"Times New Roman",Times,serif;
  font-weight:bold;font-style:italic;
  font-size:clamp(28px,5.6vw,40px);
  line-height:1.1;
  color:var(--info-red);
  text-align:center;
  margin:.2em 0 .5em;
}
.em-info-long h2{
  font-family:Arial,Helvetica,sans-serif;
  font-weight:bold;
  font-size:clamp(16px,3.2vw,19px);
  line-height:1.25;
  color:var(--info-green);
  text-decoration:underline;
  margin:1.1em 0 .35em;
}
.em-info-long p{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(15px,2.9vw,17px);
  line-height:1.38;
  color:var(--info-black);
  margin:0 0 .85em;
}

/* The multi-coloured "other ailments" list that closes the article. */
.em-info-long p.em-info-ailments{margin-top:1.2em;}
.em-info-ailments .g{color:var(--info-green);}
.em-info-ailments .r{color:var(--info-red);}
.em-info-ailments .b{color:var(--info-blue);}

.em-info-long p.em-info-source{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(15px,3vw,18px);
  color:var(--info-black);
  margin:1.4em 0 1em;
}

/* Usage warnings — small print in the GIF, kept small but legible. */
.em-info-long p.em-info-warnings{
  font-family:Arial,Helvetica,sans-serif;
  font-size:12.5px;
  line-height:1.4;
  color:#222;
  margin-top:1.2em;
  padding-top:10px;
  border-top:1px solid #dcdcdc;
}
.em-info-warnings strong{color:#000;}

/* ---------- Spanish page ----------
   info-spanish.php was already real HTML: h6 headings (Arial, large, bold
   italic, #3333FF) and p.bangles-info-text (14px). Reproduced as-is.         */
.em-info-es h1,
.em-info-es h2{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(17px,3.4vw,19px);
  font-style:italic;font-weight:bold;
  color:#3333FF;
  margin:1.2em 0 .4em;
}
.em-info-es h1{margin-top:.2em;}
.em-info-es p{
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:14px;font-weight:normal;line-height:1.5;
  color:#000;
  margin:0 0 .8em;
}

@media (max-width:600px){
  .em-info-stars{font-size:15px;margin:8px 0;}
  .em-info-lead{text-align:left;}
}

/* ---------- Content inset ----------
   The legacy content GIFs carried ~35px of their own internal left/right margin
   on top of the column's 10px gutter, so the text sat noticeably inset from the
   sidebars. That inset belongs here, on the page wrapper — NOT on .em-main,
   whose 660px width is load-bearing for the 36px category headings. */
.em-info{padding-left:24px;padding-right:24px;}
@media (max-width:600px){
  .em-info{padding-left:0;padding-right:0;}
}