@charset "UTF-8";
/* ============================================================
   mobile.css — responsive overlay for jeffkreisler.com
   Loaded AFTER stylesheet.css. Desktop (>1040px) is untouched.
   ============================================================ */

/* Mobile-only chrome is hidden on desktop */
#mobileBar, #mobileNav, #mobileHero { display: none; }

img { max-width: 100%; }

@media only screen and (max-width: 1040px) {

  /* ---------- base ---------- */
  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0 !important;
    background-image: none !important;
    background-color: #000 !important;
    text-align: left !important;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #E6E6E6;
    overflow-x: hidden;
  }

  /* Dreamweaver spacer paragraphs */
  body > p { display: none; }

  /* ---------- kill fixed widths / floats ---------- */
  .main, .mainHome,
  #topArea, .topAreaHome, .topAreaPolitics,
  #subNavArea, .contentArea,
  .content_container, .content_containerHome,
  .content_left, .content_left_text, .content_center, .content_centerBlog,
  .content_right, .content_centerEqual, .content_centerEqualR,
  .content_leftHome, .content_centerHome, .content_rightHome,
  .content_bottom, .bottomArea, .bottomAreaHome, .baseline, .baselineHome,
  .grayButtonContainer, .subnav, .banner_left, .nav {
    float: none !important;
    clear: both !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  .main, .mainHome {
    background-image: none !important;
    padding: 0 !important;
  }

  /* ---------- mobile header bar ---------- */
  #mobileBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 12px 16px;
    background: #000;
    border-bottom: 1px solid #1f1f1f;
  }
  #mobileBar .mobileLogo {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #00ACA9 !important;
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #mobileToggle {
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 1px solid #00ACA9;
    color: #00ACA9;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 9px 14px;
    border-radius: 2px;
    cursor: pointer;
  }
  #mobileToggle[aria-expanded="true"] {
    background: #00ACA9;
    color: #000;
  }

  /* ---------- mobile nav ---------- */
  #mobileNav { display: none; background: #0a0a0a; border-bottom: 1px solid #1f1f1f; }
  #mobileNav.is-open { display: block; }
  #mobileNav ul { list-style: none; margin: 0; padding: 0; }
  #mobileNav li { border-top: 1px solid #1a1a1a; }
  #mobileNav li:first-child { border-top: 0; }
  #mobileNav a {
    display: block;
    padding: 15px 16px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #DBCD9C !important;
    text-decoration: none;
  }
  #mobileNav a:active { background: #141414; }

  /* hide the desktop sprite nav + banner */
  .nav, .banner_left, #subNavArea, .subHead { display: none !important; }

  /* ---------- hero art ---------- */
  #mobileHero {
    display: block;
    width: 100%;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #mobileHero.hero-home     { aspect-ratio: 1020 / 600; background-image: url(images/template/topHome.jpg); }
  #mobileHero.hero-standup  { aspect-ratio: 1020 / 200; background-image: url(images/template/topStandup.jpg); }
  #mobileHero.hero-writing  { aspect-ratio: 1020 / 200; background-image: url(images/template/topWriting.jpg); }
  #mobileHero.hero-political{ aspect-ratio: 1020 / 200; background-image: url(images/template/topPolitics.jpg); }
  #mobileHero.hero-business { aspect-ratio: 1020 / 200; background-image: url(images/template/topBusiness.jpg); }
  #mobileHero.hero-press    { aspect-ratio: 1020 / 200; background-image: url(images/template/topPress.jpg); }
  #mobileHero.hero-video    { aspect-ratio: 1020 / 200; background-image: url(images/template/topVideo.jpg); }
  #mobileHero.hero-none     { display: none; }

  /* Hide the legacy gray button boxes (Video / Schedule / Links / Contact) */
  .grayButtonContainer, .leftButton { display: none !important; }


  /* ---------- content ---------- */
  .contentArea { padding: 20px 16px 8px !important; }

  .content_left, .content_center, .content_centerBlog, .content_right,
  .content_centerEqual, .content_centerEqualR,
  .content_leftHome, .content_centerHome, .content_rightHome,
  .content_left_text {
    font-size: 16px !important;
    line-height: 1.65 !important;
    text-align: left !important;
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    letter-spacing: normal !important;
  }

  .content_leftHome {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 19px !important;
    line-height: 1.5 !important;
    color: #DBCD9C;
  }
  .contentLeftHomeSource, .contentLeftHomeLink {
    display: block;
    float: none !important;
    margin: 0 0 14px !important;
    text-align: left !important;
    font-size: 13px !important;
  }

  h1 { font-size: 17px !important; line-height: 1.3 !important; margin: 24px 0 10px !important; }
  .headingSub, .headingLink, .bottomTitle {
    float: none !important;
    display: block;
    text-align: left !important;
    font-size: 16px !important;
    margin: 20px 0 8px !important;
  }

  /* left rail buttons become a tappable chip row */
  .grayButtonContainer { text-align: left !important; margin: 0 !important; }
  .content_left .grayButtonContainer { display: inline-block; width: auto !important; }
  .leftButton, .bottomButton {
    float: none !important;
    display: inline-block;
    font-size: 12px !important;
    line-height: 1.2 !important;
    height: auto !important;
    letter-spacing: 0.18em;
    padding: 11px 14px !important;
    margin: 0 8px 8px 0 !important;
    background-color: #1c1c1c !important;
    border: 1px solid #333;
    border-radius: 2px;
    color: #FFF !important;
    text-align: center !important;
  }
  .leftButton a, .bottomButton a { color: #FFF !important; }

  /* media */
  img, iframe, embed, object, video {
    max-width: 100% !important;
    height: auto !important;
  }
  iframe { aspect-ratio: 16 / 9; width: 100% !important; }
  table { max-width: 100% !important; }

  /* tap targets */
  .contentArea a { word-break: break-word; }

  /* footer */
  .baseline, .baselineHome { margin: 0 !important; }
  .content_bottom, .bottomAreaHome, .bottomArea {
    text-align: center !important;
    padding: 18px 16px 28px !important;
  }
  .content_bottom img { width: 26px !important; height: 26px !important; margin: 0 8px; }
  .bottomline { text-align: center !important; font-size: 13px !important; }

  /* forms */
  form { font-size: 16px !important; }
  input, textarea, select {
    max-width: 100% !important;
    font-size: 16px !important; /* prevents iOS zoom-on-focus */
    padding: 10px !important;
    box-sizing: border-box;
  }
  .form_text { width: 100% !important; margin-right: 0 !important; }
  .form_button { padding: 12px 18px !important; font-size: 14px !important; }
}

/* Extra squeeze for small phones */
@media only screen and (max-width: 400px) {
  #mobileBar .mobileLogo { font-size: 16px; }
  .content_leftHome { font-size: 17px !important; }
}