/* FOUR Magazine — visual refinements.
   Loaded after the SimpleMag theme. Identity (black, white, sand #e3c6ad, Lato,
   centred logo, carousel, two-column grid) stays. Each block fixes one measured problem. */

:root {
  --color-ink: #000000;
  --color-paper: #ffffff;
  --color-sand: #e3c6ad;
  --color-charcoal: #222222;
  --font-body: Lato, "Helvetica Neue", Arial, sans-serif;
  --space-page: 16px;
}

/* The theme fades the header, menu, content and footer in from opacity 0
   (style.css, animation-delay up to 1.2s). The page stays invisible for
   about two seconds and the hero cannot paint until the fade ends.
   The fade is removed; the layout is unchanged. */
#branding,
.main-menu-container,
#content,
#footer {
  -webkit-animation: none;
  animation: none;
}

/* Below 960px the theme sets overflow:hidden on the body so the slide menu
   can move the page sideways. That also stops vertical scrolling.
   Scroll normally, and lock it only while the menu is open. */
@media only screen and (max-width: 960px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }
  body.st-menu-open {
    overflow: hidden;
  }
}

/* The theme's phone column is a fixed 273px (417px from 480px), so a 375px
   screen clips the logo and wastes the side margins. Use the screen width
   with the same 16px inset on every small screen. */
@media only screen and (max-width: 750px) {
  .wrapper {
    width: auto;
    max-width: 100%;
    padding-left: var(--space-page);
    padding-right: var(--space-page);
    box-sizing: border-box;
  }

  /* The carousel has no height on a phone until its script measures the
     pictures, which pushes the whole page down. Reserve the 3:2 frame. */
  #gallery-carousel {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .title-with-sep,
  .title-with-bg,
  .posts-slider .entry-title {
    font-size: 28px;
  }

  #branding {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  /* The search field is 130px, absolutely positioned, and the placeholder
     "SEARCH" is clipped. Give it the room the bar actually has. */
  #masthead #searchform {
    width: 42px;
  }
  #masthead #searchform input[type="text"] {
    width: 42px;
    padding-left: 0;
    text-indent: -999px;
  }
  #masthead #searchform:focus-within {
    width: 160px;
  }
  #masthead #searchform:focus-within input[type="text"] {
    width: 160px;
    padding-left: 12px;
    text-indent: 0;
  }
}

.header-default .logo,
.header-default .logo img {
  max-width: 100%;
  height: auto;
}

/* Category labels are plain text now (their pages are not in this project),
   so the padding that used to live on the <a> is gone and the 6px-wide
   slash float collides with the next label. Put the slash back in the line. */
.main-menu > ul > li {
  line-height: 50px;
}
.main-menu > ul > li > .sub-menu {
  line-height: 1.4;
}
.main-menu > ul > li:after {
  content: "/";
  float: none;
  display: inline;
  width: auto;
  margin: 0 12px;
  padding: 0;
  font-size: 18px;
  line-height: 50px;
  vertical-align: baseline;
}

/* Thumbnails sit on a sand mat and do not fill the box, so every card shows
   a stripe of #e3c6ad. Crop within the box the width and height attributes
   already reserve, so this does not move the layout. */
.entries .entry-image img,
.widget-posts-classic-entries .entry-image img,
.sub-posts img {
  width: 100%;
  object-fit: cover;
  display: block;
}

.sidebar .textwidget {
  line-height: 1.6;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-sand);
  outline-offset: 2px;
}

/* The slide-menu links are 12px. Keep the type, make the tap area clearer. */
#pageslide .menu li a {
  min-height: 44px;
  box-sizing: border-box;
}