/*****
Theme Name: MH Magazine lite Child v2.0
Theme URI: https://mhthemes.com/themes/mh-magazine-lite/
Description: Alternate wide-layout version of the Eat With Ohashi MH Magazine child theme.
Author: MH Themes
Author URI: https://mhthemes.com/
Template: mh-magazine-lite
Version: 2.9.14-alt
Tested up to: 5.6.2
Requires PHP: 5.6
Tags: one-column, two-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-images, full-width-template, theme-options, threaded-comments, footer-widgets, translation-ready, rtl-language-support, blog, entertainment, news
Text Domain: mh-magazine-lite-alt
Domain Path: /languages/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Credits: You may remove the link in the footer, but we would appreciate any attribution to our work!
*****/


/* ============ Site Wide Theme Changes ============== */

/* Increase body font size */
body {
  font-size: 15px;
}

/* Reduce menubar font size */
.menu-main-menu-container {
    font-size: 14px;
}

/* Fix themes dropcase styling */
p.has-drop-cap:first-letter {
    padding-bottom: 5px;
}

/* Center align header image */
.mh-custom-header {text-align:center;}

/* Alternate header treatment: retain the original wordmark and memoji image,
 * but replace its raster tagline with responsive type. */
.ewo-header-image-link {
  display: block;
  margin: 12px auto 0;
}

.ewo-header-image-link .mh-header-image {
  display: block;
  width: 550px !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto;
}

.ewo-header-tagline {
  margin: 7px 0 16px;
  color: #55473d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 1.15vw, 15px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: .075em;
  line-height: 1.45;
  text-align: center;
}

.ewo-header-tagline strong {
  color: #a53b34;
  font-weight: 700;
}

/* Center align menubar */
.mh-main-nav ul { display: table; margin: 0 auto; }

/* Add header logo retina support */
.mh-header-image  {
  max-width: 100% !important;
  width: 550px !important;
/*   height: auto !important; */
}
/* ============ END of Site Wide Theme Changes ============== */



/* ============ EWO Front Page Browse by Category Tile Display ============== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1.25rem;
  justify-items: center;
  align-items: start;
  margin: 2rem auto;
  max-width: 700px; /* allows all 5 tiles to fit comfortably */
  padding: 0;
}

.gallery-frame {
  display: block;
  aspect-ratio: 1 / 1;          /* reserves space = no CLS */
  width: 120px;                  /* target size, can shrink down */
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background-color: #f7f7f7;     /* placeholder before image loads */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.gallery-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .gallery-grid {
    max-width: 500px;
    gap: 1rem;
  }
}
@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.75rem;
  }
  .gallery-frame {
    width: 100px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-frame,
  .gallery-img { transition: none !important; }
}

/* =================== END of EWO Front Page Browse Code =========== */


/* =================== My Food Gallery Code ===================== */

/* My Food Gallery Page Styles
 *
 * Description: Style code for the custom page template: my-food-gallery.php in the child theme
 */

.ewo-gallery { max-width: 1000px; margin: 0 auto; }

/* Responsive, CLS-safe grid */
.ewo-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: start;
}

/* Card */
.ewo-card { margin: 0; }
.ewo-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  outline: none;
}

.ewo-card__figure {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #f7f7f7; /* pleasant placeholder while image loads */
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Image: intrinsic dims + aspect ratio avoid CLS */
.ewo-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Overlay */
.ewo-card__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .25s ease;
}
.ewo-card__title {
  color: #fff;
  font-family: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  text-align: center;
  padding: .25rem .5rem;
}

/* Hover / focus */
.ewo-card__link:hover .ewo-card__figure,
.ewo-card__link:focus-visible .ewo-card__figure {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,.14);
}
.ewo-card__link:hover .ewo-card__overlay,
.ewo-card__link:focus-visible .ewo-card__overlay {
  opacity: 1;
}

/* Pagination */
.ewo-gallery__pagination { margin-top: 2rem; text-align: center; }

/* Responsiveness */
@media (max-width: 600px) {
  .ewo-gallery__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 420px) {
  .ewo-gallery__grid { grid-template-columns: 1fr; }
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .ewo-card__figure, .ewo-card__overlay { transition: none !important; }
}

/* =================== END of My Food Gallery Code ===================== */



/* MailChimp Customizations
 * 
 * Description: a very minor tweak to add extra spacing text the text and the form field
 */

#mc-embedded-subscribe-form {
  padding: 0px !important; 
  
}
#mc_embed_signup_scroll input.email {
  margin-top: 10px !important; 
}
/* END MailChimp Code */



/* WP Jetpack Fixes
 *
 */

/* Removes Jetpack opacity setting from related posts */
div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post {
-moz-opacity: 1;
opacity: 1;
}

div#jp-relatedposts div.jp-relatedposts-items div.jp-relatedposts-post:hover {
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

/* increase font size of related post header */
.jp-relatedposts-headline {
  font-size:24px !important;
}

/* END WP Jetpack Fixes */



/* Ivory Search Customizations 
 *
 */

/* Adjust positioning of the Ivory Search box in menu */
.astm-search-menu.is-menu.default.menu-item {
  margin-top: 3px;
  margin-right: 7px;
  margin-left: 5px;
}

/* customize the search bar position - float left for mobile version */
li.astm-search-menu.is-menu.default.menu-item {
    float: left;
}

/* END Ivory Search Customizations */



/* ====================== WooCommerce Customizations ==================== */

/* WooCommerce Product Category Dropdown Select Widget on Product Pages
 * Fixes the issue where the dropdown text is cut off due to incorrect sizing in the sidebar widget */
span.select2-selection.select2-selection--single {
    height: 45px; margin-bottom: 0px;
}

/* Change Woocommerce product price text color to match the site color */
.price .woocommerce-Price-currencySymbol{
    color:#E64946 !important; 
}

/* Change Price Text Color */
.woocommerce-Price-amount.amount {
    color: #E64946;
}

/* Adjust min-height for product list - handpicked widget */
.wc-block-grid__product-title
{
  min-height: 60px !important;
}

/* Adjust color of button text - Handpicked widget */
.wp-block-button.wc-block-grid__product-add-to-cart a {
  color:#515151;
  background-color:#ebe9eb;
}

/* Adjust text color - handpicked products */
.wc-block-grid__product-title {
    color: black;
}

a.wc-block-grid__product-link {
    color: #171717 !important;
}

/* Match the site's standard link interaction on Handpicked Products. */
.wc-block-grid__product-link:hover,
.wc-block-grid__product-link:focus-visible {
   color: #e64946 !important;
   text-decoration: none;
}

/* Adjust min-height for product list - shop page */
.woocommerce-loop-product__title {
  min-height: 60px !important;
}

/* Adds underline for button link - on Shop Page*/
.button.product_type_external:hover {
    text-decoration:underline !important;
}

.button.product_type_grouped:hover {
  text-decoration:underline !important;
}

/* Adds underline to buy button on single page view */
.single_add_to_cart_button.button.alt:hover
{
  text-decoration:underline !important; 
}

/* For the product titles */
.woocommerce-loop-product__title:hover{
  text-decoration:underline !important;
}

/* Stylize the WooCommerce Buttons Sitewide */
.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {
background:#ebe9eb !important;
background-color:#ebe9eb !important;
color:#515151 !important;
text-shadow: transparent !important;
box-shadow: none;
border-color:#ebe9eb !important;
}

.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {

background:#ebe9eb !important;
background-color:#ebe9eb !important;
color:#515151 !important;
text-shadow: transparent !important;
box-shadow: none;
border-color:#ebe9eb !important;
  
}

/* For Text Title */
.woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {
background: #ebe9eb !important;
color:#515151 !important;
text-shadow: transparent !important;
border-color:#ebe9eb !important;
font-weight:normal;
font-size:14px;
}

/* For Button Hover */
.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {
background: #ebe9eb !important;
box-shadow: none;
text-shadow: transparent !important;
color:#515151 !important;
border-color:#ebe9eb !important;
}
/* END Stylize the WooCommerce Buttons */

/* ====================== END WooCommerce Customizations ==================== */

/* ============ Wide Desktop Layout ============
 * Preserve the familiar MH Magazine structure and sidebar while allowing
 * the site to use more room on large monitors. Mobile rules from the parent
 * theme remain in control below 768px.
 */
@media screen and (min-width: 1200px) {
  .mh-container,
  .mh-container-inner {
    width: 94%;
    max-width: 1300px;
  }

  .mh-container-outer {
    margin-top: 32px;
    margin-bottom: 32px;
  }
}

/* Keep long-form reading from becoming excessively wide, even though the
 * overall shell and homepage can expand for photography and discovery. */
@media screen and (min-width: 1440px) {
  .single-post .mh-content {
    width: 70%;
  }

  .single-post .mh-sidebar {
    width: 27%;
  }
}

/* Quiet, edge-led watercolor backdrop for wide desktop margins. The site
 * panel stays white and untouched; this is deliberately removed on smaller
 * screens where there is no useful outer margin. */
@media screen and (min-width: 1200px) {
  body {
    background-color: #f8f6ef;
    background-image: url("assets/eatwithohashi-background-v1.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  }
}

/* ============ Featured Post Slider ============ */
.page-template-homepage .mh-wrapper.mh-home {
  /* A consistent white frame suits the legacy magazine layout better than
   * mixing a top gap with edge-to-edge sides. */
  padding: 25px;
}

@media (max-width: 767px) {
  .page-template-homepage .mh-wrapper.mh-home { padding: 20px; }
}

.mh-home-1.ewo_featured_posts_slider_widget {
  margin-bottom: 28px;
}

.ewo-featured-slider {
  position: relative;
  background: #241f1c;
  overflow: hidden;
}

.ewo-featured-slider__viewport {
  position: relative;
  min-height: clamp(240px, 30vw, 400px);
}

.ewo-featured-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

.ewo-featured-slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.ewo-featured-slider__link,
.ewo-featured-slider__image {
  display: block;
  width: 100%;
  height: 100%;
}

.ewo-featured-slider__image {
  object-fit: cover;
}

.ewo-featured-slider__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(24px, 5vw, 58px);
  color: #fff;
  background: linear-gradient(90deg, rgba(18, 15, 13, .75) 0%, rgba(18, 15, 13, .34) 52%, rgba(18, 15, 13, .08) 100%);
}

.ewo-featured-slider__eyebrow,
.ewo-featured-slider__cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ewo-featured-slider__title {
  max-width: 700px;
  margin: 9px 0 13px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 400;
  line-height: 1.08;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.ewo-featured-slider__cta {
  padding-bottom: 3px;
  border-bottom: 2px solid #ef4b4c;
}

.ewo-featured-slider__controls {
  position: absolute;
  right: 16px;
  bottom: 15px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.ewo-featured-slider__button,
.ewo-featured-slider__pause {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 0;
  background: rgba(25, 22, 20, .74);
  color: #fff;
  cursor: pointer;
  font: inherit;
}

.ewo-featured-slider__button {
  width: 36px;
  font-size: 18px;
}

.ewo-featured-slider__pause {
  padding: 0 11px;
  font-size: 12px;
}

.ewo-featured-slider__button:hover,
.ewo-featured-slider__button:focus-visible,
.ewo-featured-slider__pause:hover,
.ewo-featured-slider__pause:focus-visible {
  outline: 0;
  background: #ef4b4c;
  border-color: #ef4b4c;
}

@media (max-width: 767px) {
  .ewo-featured-slider__viewport { min-height: 340px; }
  .ewo-featured-slider__overlay { background: linear-gradient(0deg, rgba(18, 15, 13, .82), rgba(18, 15, 13, .08) 72%); }
  .ewo-featured-slider__controls { right: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ewo-featured-slider__slide { transition: none; }
}

/* ================= END Featured Post Slider ================= */

/* ============ Browse destination cards ============ */
.ewo-browse {
  margin: 0 0 30px;
}

.ewo-browse__heading {
  margin: 0 0 18px;
  padding-bottom: 6px;
  border-bottom: 3px solid #e64946;
  color: #171717;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.ewo-browse__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.ewo-browse__card {
  position: relative;
  display: block;
  height: 165px;
  overflow: hidden;
  background: #302824;
  color: #fff;
  text-decoration: none;
}

.ewo-browse__card::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(0deg, rgba(18, 15, 13, .60), rgba(18, 15, 13, 0) 72%);
  transition: background .25s ease;
}

.ewo-browse__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.ewo-browse__card span {
  position: absolute;
  right: 15px;
  bottom: 13px;
  left: 15px;
  z-index: 1;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  line-height: 1.1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.ewo-browse__card span::after {
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 9px;
  content: "";
  background: #f3e8d5;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}

.ewo-browse__card:hover,
.ewo-browse__card:focus-visible {
  color: #fff;
}

.ewo-browse__card:hover img,
.ewo-browse__card:focus-visible img {
  transform: scale(1.045);
}

.ewo-browse__card:hover::after,
.ewo-browse__card:focus-visible::after {
  background: linear-gradient(0deg, rgba(18, 15, 13, .88), rgba(18, 15, 13, .16) 72%);
}

.ewo-browse__card:hover span::after,
.ewo-browse__card:focus-visible span::after {
  transform: scaleX(1);
}

.ewo-browse__card:focus-visible {
  outline: 3px solid #e64946;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .ewo-browse__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .ewo-browse__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ewo-browse__card { height: 150px; }
  .ewo-browse__card span { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .ewo-browse__card::after,
  .ewo-browse__card img,
  .ewo-browse__card span::after { transition: none; }
}

/* ================= END Browse destination cards ================= */

/* ============ Footer Explore links ============ */
.ewo-footer-explore {
  margin: 0;
}

.ewo-footer-explore a {
  display: block;
  padding: 7px 0;
  border-bottom: 1px dotted rgba(255, 255, 255, .3);
  color: #fff;
  line-height: 1.25;
  text-decoration: none;
}

.ewo-footer-explore a:hover,
.ewo-footer-explore a:focus-visible {
  color: #f3e8d5;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ================= END Footer Explore links ================= */

/* Match the Explore interaction on the native Recent Posts footer widget. */
.mh-footer-widget.widget_recent_entries a:hover,
.mh-footer-widget.widget_recent_entries a:focus-visible {
  color: #f3e8d5;
  text-decoration: underline;
  text-underline-offset: 3px;
}