/*
Theme Name: Minnesota Journal Theme
Theme URI: TBD
Author: The Minnesota Journal Team
Author URI: minnjournal.com
Description: Minnesota Journal Theme is a WordPress theme solely designed for Minnesota Journal and its online endeavors.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
License: TBD
License URI: TBD
Text Domain: minnesota-journal
Tags: TBD
*/

/* Link styles
 * https://github.com/WordPress/gutenberg/issues/42319 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items so that the outline does not touch the text */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/* Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/* Change the position of the more block on the front by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934 */
.more-link {
	display: block;
}

/* Header wordmark styling */
.wordmark-black {
  display: block;
  visibility: visible;
  opacity: 1;
  max-width: 450px;
  width: 100%;
  margin: 0 auto;
}

/* Responsive headlines */
@media (max-width: 768px) {
	h3, h4 {
	font-size: 1.15rem;
	line-height: 1.5;
	font-weight: 600;	/* SemiBold */
  }
	h5 {
	font-size: 1rem;	/* Smaller sans size for H5 */
	line-height: 1.5;
	font-weight: 700;	/* Bold */
  }
	h1 {
	font-size: 1.7rem;
	line-height: 1.3;
	font-weight: 700;	/* Bold */
  }
	h2 {
	font-size: 1.65rem;
	line-height: 1.4;
	font-weight: 700;	/* Bold */
  }
}

/* Custom class to center text on mobile */
@media (max-width: 768px) {
  .mobile-text-center {
    text-align: center;
  }
}

/* Responsive paragraph text */
@media (max-width: 768px) {
	p {
	font-size: 1rem;
	line-height: 1.3;
  }
}

/* Max width wrapper to cap the body's width on larger screens */
.max-width-wrapper {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Apply flexible, fluid 3-column layout */
.responsive-columns {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0;	/* use internal padding for spacing */
}

/* Column 1: left column */
.responsive-columns > .wp-block-group:nth-child(1) {
  flex: 1 1 min(22%, 240px);
  padding-right: 1rem;
  box-sizing: border-box;
}

/* Column 2: center column with borders and full padding */
.responsive-columns > .wp-block-group:nth-child(2) {
  flex: 1 1 min(46%, 480px);
  border-left: 1px solid var(--wp--preset--color--neutral-2);
  border-right: 1px solid var(--wp--preset--color--neutral-2);
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* Column 3: right column */
.responsive-columns > .wp-block-group:nth-child(3) {
  flex: 1 1 min(30%, 300px);
  padding-left: 1rem;
  box-sizing: border-box;
}

/* Mobile layout: stack columns */
@media (max-width: 768px) {
  .responsive-columns {
    flex-direction: column;
    gap: 1rem;
  }

  .responsive-columns > .wp-block-group {
    width: 100%;
    padding: 0 !important;
    border: none !important;
    border-top: 1px solid var(--wp--preset--color--contrast) !important;
    padding-top: 1rem !important;
  }

  .responsive-columns > .wp-block-group.column-no-border {
    border-top: none !important;
    padding-top: 0;
  }
}

/* Reorder columns on mobile */
@media (max-width: 768px) {
  .reorder-mobile > .wp-block-group:nth-child(1) {
    order: 2;
  }

  .reorder-mobile > .wp-block-group:nth-child(2) {
    order: 1;
  }

  .reorder-mobile > .wp-block-group:nth-child(3) {
    order: 3;
  }
}

/* Responsive outer padding */
.responsive-padding {
  padding-left: clamp(1rem, 5vw, 6.5rem) !important;
  padding-right: clamp(1rem, 5vw, 6.5rem) !important;
}

/* Responsive outer padding specifically for articles */
.responsive-padding-article {
  padding-left: clamp(1.5rem, 22vw, 28rem) !important;
  padding-right: clamp(1.5rem, 22vw, 28rem) !important;
}

/* Mobile article padding */
@media (max-width: 768px) {
  .responsive-padding-article {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* Hide element on mobile */
@media screen and (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/* Hide element on desktop, show on mobile */
.show-on-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .show-on-mobile {
    display: block !important;
  }
}

/* Custom class for sans-serif responsive text */
@media (max-width: 768px) {
  .responsive-text {
    font-size: .85rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
  }
}

/* Make any element 100% wide on mobile */
@media (max-width: 768px) {
  .mobile-full-width {
    width: 100vw !important;
    margin-left: calc(-1 * var(--wp--style--root--padding-left, 1.25rem)) !important;
    margin-right: calc(-1 * var(--wp--style--root--padding-right, 1.25rem)) !important;
    max-width: none !important;
    display: block;
  }
}

/* Toast styling for copy URL button */
.copy-toast {
  visibility: hidden;
  min-width: 120px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  text-align: center;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.875rem;
  z-index: 9999;
  transition: visibility 0s, opacity 0.5s ease;
  opacity: 0;
  pointer-events: none;
}

.copy-toast.show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Responsive button widget text */
@media (max-width: 768px) {
  .wp-block-button__link {
    font-size: 1rem !important;
  }
}

/* Responsive font size and line height for article content (desktop) */
.entry-content,
.entry-content p,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content ul,
.entry-content ol,
.entry-content li,
.entry-content blockquote {
  font-size: 1.1rem !important;
  line-height: 1.45 !important;
}

/* Responsive font size and line height for article content (mobile) */
@media (max-width: 768px) {
  .entry-content,
  .entry-content p,
  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6,
  .entry-content ul,
  .entry-content ol,
  .entry-content li,
  .entry-content blockquote {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
	}
}

/* Responsive edge-to-edge padding specifically overriding blocks affected by the responsive-padding class */
@media (max-width: 768px) {
  /* Target only edge-to-edge image blocks inside padded containers */
  .responsive-padding .edge-to-edge {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-1 * clamp(1rem, 5vw, 6.5rem)) !important;
    margin-right: calc(-1 * clamp(1rem, 5vw, 6.5rem)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .responsive-padding .edge-to-edge img {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }
}

/* Category pills styling */
.category-pills a {
  display: inline-block;
  background-color: var(--wp--preset--color--accent-2);
  color: black;
  font-weight: 500;
  padding: 0.6em 1.1em;
  margin-right: 0.5em;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.category-pills a:hover {
  background-color: var(--wp--preset--color--accent-2); /* Edit hover transition */
  opacity: 0.85;
}

/* Read More hover variable font weight */
a.wp-block-read-more {
  font-weight: 400;
  text-decoration: none;
  color: inherit;
  transition: font-weight 0.05s ease;
}

a.wp-block-read-more:hover {
  font-weight: 600;
}









/* =====================================
   1) Top-level nav container
===================================== */
.wp-block-navigation .wp-block-navigation__container {
    display: flex !important;
    align-items: baseline !important; /* align all top-level links to baseline */
}

/* =====================================
   2) Top-level "More" li
===================================== */
.wp-block-navigation .wp-block-navigation-item.has-child {
    display: inline-flex !important;       /* wrap content, keep flex for chevron */
    align-items: center !important;        /* vertical align text + chevron */
    flex: 0 0 auto !important;             /* prevent stretching */
    width: auto !important;                /* shrink-to-fit */
    position: relative !important;         /* container for absolute submenu */
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* =====================================
   3) "More" link itself
===================================== */
.wp-block-navigation .wp-block-navigation-item.has-child > a.wp-block-navigation-item__content {
    display: inline-flex !important;
    align-items: center !important;        /* align text + chevron button */
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* =====================================
   4) Inner span inside "More" link
===================================== */
.wp-block-navigation .wp-block-navigation-item.has-child > a.wp-block-navigation-item__content > .wp-block-navigation-item___label {
    display: inline !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =====================================
   5) Toggle button (chevron)
===================================== */
.wp-block-navigation .wp-block-navigation-item.has-child > button.wp-block-navigation-submenu-toggle {
    display: inline-flex !important;
    align-items: center !important;        /* vertical align with text */
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;                 /* shrink-to-fit */
}

/* =====================================
   6) Dropdown submenu — detached
===================================== */
.wp-block-navigation .wp-block-navigation-submenu,
.wp-block-navigation .wp-block-navigation__submenu-container {
    position: absolute !important;         /* removed from normal flow */
    top: 100%;                             /* just below "More" link */
    left: 0;                               /* aligns with left edge of parent */
    min-width: 180px;                      /* independent width */
    width: auto;                            /* optional, let content define width */
    background-color: #333;                /* dark box */
    border-radius: 12px;
    padding: 10px;
    z-index: 999;
}

/* =====================================
   7) Dropdown links
===================================== */
.wp-block-navigation .wp-block-navigation-submenu a,
.wp-block-navigation .wp-block-navigation__submenu-container a {
    display: block;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: font-weight 0.3s ease, color 0.3s ease;
}

.wp-block-navigation .wp-block-navigation-submenu a:hover,
.wp-block-navigation .wp-block-navigation__submenu-container a:hover {
    font-weight: bold;
    color: #f0f0f0;
}

/* =====================================
   8) Mobile full-screen dropdown
===================================== */
@media (max-width: 768px) {
    .wp-block-navigation .wp-block-navigation-submenu,
    .wp-block-navigation .wp-block-navigation__submenu-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: 60px;
        border-radius: 0;
        background-color: #333;
    }

    .wp-block-navigation li.is-open > .wp-block-navigation-submenu,
    .wp-block-navigation li.is-open > .wp-block-navigation__submenu-container {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
}