/*
Theme Name: Save Your Life Mobile
Theme URI: https://awhonn.org/
Author: AWHONN
Description: Dedicated mobile-first WordPress theme for the Save Your Life POST-BIRTH Warning Signs app.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: save-your-life-mobile
*/

:root {
  --syl-blue: #009dd3;
  --syl-green: #7ac143;
  --syl-text: #202a33;
  --syl-muted: #637381;
  --syl-soft: #f7f9fb;
  --syl-border: #d8e1e8;
  --syl-white: #fff;
}

* { box-sizing: border-box; }
html { margin: 0 !important; }
body {
  margin: 0;
  background: var(--syl-white);
  color: var(--syl-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.62;
  padding: 126px 0 86px;
}
a { color: var(--syl-blue); }
img, iframe { max-width: 100%; }

.syl-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--syl-white);
  border-bottom: 4px solid var(--syl-blue);
}
.admin-bar .syl-header { top: 32px; }
.syl-header-inner {
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 22px 32px;
}
.syl-logo { display: inline-flex; align-items: center; text-decoration: none; }
.syl-logo img { display: block; width: min(420px, 82vw); height: auto; }

.syl-main { width: min(100%, 1320px); margin: 0 auto; padding: 0 28px; }
.syl-content { width: min(100%, 1120px); margin: 0 auto; }
.syl-video-hero { width: min(100%, 1100px); margin: 0 auto 28px; }
.syl-embed { position: relative; width: 100%; padding-top: 56.25%; background: #000; overflow: hidden; }
.syl-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.syl-title {
  margin: 18px 0 24px;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.12;
  letter-spacing: 2px;
}
.syl-home-image { display: block; width: 100%; height: auto; margin: 0 auto 28px; }
.syl-copy { width: min(100%, 920px); margin: 0 auto; }
.syl-copy h2, .syl-copy h3, .syl-copy h5 { margin: 24px 0 8px; line-height: 1.25; }
.syl-copy p { margin: 0 0 16px; }
.syl-small { color: var(--syl-muted); font-size: 11px; line-height: 1.2; }

.syl-card {
  background: #fafafa;
  border-radius: 12px;
  padding: 22px;
  margin: 0 0 18px;
  border: 1px solid #f0f0f0;
}
.syl-card h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.28; }
.syl-card p { margin: 0; }

.syl-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--syl-blue);
  color: var(--syl-white);
}
.syl-footer-nav {
  width: min(100%, 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.syl-footer-nav a {
  color: var(--syl-white);
  text-decoration: none;
  text-align: center;
  padding: 10px 4px 8px;
  font-size: 14px;
  line-height: 1.15;
}
.syl-footer-nav .syl-nav-icon { display: block; font-size: 21px; margin-bottom: 4px; }

.syl-form-block { width: min(100%, 760px); margin: 0 auto 24px; }
.syl-label { display: block; margin-bottom: 8px; font-weight: 700; }
.syl-select, .syl-button {
  width: 100%;
  min-height: 52px;
  border-radius: 10px;
  font-size: 18px;
}
.syl-select { border: 1px solid var(--syl-border); padding: 10px 14px; background: var(--syl-white); }
.syl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 0;
  background: var(--syl-blue);
  color: var(--syl-white);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.syl-preview { width: min(100%, 520px); margin: 20px auto; text-align: center; }
.syl-preview img { border: 1px solid var(--syl-border); border-radius: 10px; background: #fff; }
.syl-notice { background: #fff8e1; border: 1px solid #f3d47b; padding: 14px; border-radius: 10px; }

@media (max-width: 782px) {
  .admin-bar .syl-header { top: 46px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; padding-top: 96px; }
  .syl-header-inner { padding: 16px 18px; }
  .syl-main { padding: 0 16px; }
  .syl-footer-nav a { font-size: 12px; }
}