/*
Theme Name: Home Office 2026 Theme
Author: Penna
Description: A bare bones, blank canvas starter theme for building WordPress Block Themes using the Full Site Editor. It includes only the templates and essential settings you need to create sites fast! 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: homeoffice2026
Tags: Block editor patterns, Block editor styles, Block themes, Template editing

/*  Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/*  Reduced motion prefs  */
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/*  Navigation Block Breakpoint. Credit: https://wpdocs.io/ */
body .wp-block-navigation__responsive-container-open:not(.always-shown) {
  display: block !important;
}

body
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
    .is-menu-open
  ) {
  display: none !important;
}

/* Change the width to the breakpoint of the Nav */
@media (min-width: 782px) {
  body .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }

  body
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
      .is-menu-open
    ) {
    display: block !important;
  }
}

/* end nav break point */

/* Nicely wrapped headlines */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* I've no idea why when you add a background color to a column, WP by default adds padding to it... so weird - this get's rid of that */
:where(.wp-block-columns.has-background) {
  padding: initial;
}

/* Pull Quote */
.wp-block-pullquote blockquote {
  display: grid;
  gap: 20px;
}

.wp-block-pullquote cite {
  font-size: 80%;
  font-weight: 600;
}

/* Search Block */
.wp-block-search__input {
  border: 1px solid;
}

.wp-block-search__button {
  box-shadow: none;
  border: 1px solid var(--wp--preset--color--custom-off-black);
  border-radius: 0;
  color: white;
  padding: 0.4rem 1rem 0.5rem 1rem;
  font-weight: 500;
}

/* Comments */
.comment-form-cookies-consent {
  font-size: 14px;
  line-height: 2;
}

/* Keeps our titles link as the off black color in things like the query loop*/
.wp-block-post-title :where(a) {
  color: var(--wp--preset--color--custom-off-black);
}

/* Button hover state  - core button block still does not have this and it can't be done in theme.json! */

.wp-block-button__link,
a {
  transition: 0.3s;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
#commentform .form-submit.wp-block-button input:hover {
  background: var(--wp--preset--color--custom-white);
  color: var(--wp--preset--color--custom-off-black);
}

.wp-block-button .wp-block-button__link:hover {
  background: var(--wp--preset--color--custom-custom-white);
  color: var(--wp--preset--color--off-black);
  border-color: var(--wp--preset--color--custom-off-black);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--custom-off-black);
  color: var(--wp--preset--color--custom-white);
  border-color: var(--wp--preset--color--custom-off-black);
}

a:hover:not(.wp-block-site-title a, .mm-nav__item--cta .mm-nav__link, .hvb-transcript, .hero-button, .promo-item__button, .wp-block-button__link.wp-element-button, .pn-row, .nl-card, .pl-card__cta, .pl-acc-link, .mm-panel__l1-link, .sl-card, .rsl-all-link, .arrow-button-mint) {
  text-decoration: underline !important;
}

.small-content-container {
  max-width: 800px;
}

/* Footer */
.useful-links {
  list-style: none;
  padding:0;
}

.useful-links a {
  display: block;
  color: var(--wp--preset--color--custom-off-black);
  font-size: var(--wp--preset--font-size--xsmall); 
  text-decoration: none;
  padding: 0.25rem 0;  
}

.useful-links button {
  background-color: transparent;
  border: none;
  color: var(--wp--preset--color--custom-off-black);
  cursor: pointer;
  font-family: var(--wp--preset--font-family--indivisible);
  font-size: var(--wp--preset--font-size--xsmall);
  padding: 0.25rem 0; 
}

.social-icons {
  list-style: none;
  padding:0;
}

.social-icons a {
  color: var(--wp--preset--color--custom-off-black);
  font-size: var(--wp--preset--font-size--xsmall);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.25rem;  
}

.social-icons a svg {
  height: 1.375rem;
  width:1.375rem;
  padding-right: 0.75rem;
}

/* dual image */
.dual-left-content {
  order: 2;
}
.dual-right-img {
  order: 1;
}
@media (min-width: 961px) {
  .dual-left-content  {
    order: 1;
  }
  .dual-right-img {
    order: 2;
  }
}

/* News post page */
.news-post-img img{
  
}

.news-post-heading {
  background: var(--wp--preset--color--medium-purple);
  color: var(--wp--preset--color--custom-white);
  text-align: center;
  display: flex;
  flex-direction: column;
  border-radius: 2rem 2rem 0 0;
  padding: 2rem;
}

.news-post-heading h1 {
  font-size: clamp(1.5rem, 3vw, 3rem);
}

.news-post-heading .wp-block-post-terms {
  margin-top: 0.5rem;
}

.news-post-heading .wp-block-post-terms a {
  color: var(--wp--preset--color--custom-white);
  font-size: var(--wp--preset--font-size--medium);
  text-decoration: none;
}

/* News share links */
.news-post-share {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--wp--preset--color--medium-purple);
  color: var(--wp--preset--color--custom-white);
  padding-bottom: 2rem;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
}

.news-post-share h2 {
  font-size: var(--wp--preset--font-size--small);
}

.news-post-share__links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.news-post-share__link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-post-share__link svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

/* Story post page */
.story-post-img img{
  border-radius: 0 0 2rem 2rem;
}

.story-post-heading {
  background: var(--wp--preset--color--medium-purple);
  color: var(--wp--preset--color--custom-white);
  text-align: center;
  display: flex;
  flex-direction: column;
  border-radius: 2rem 2rem 0 0;
  padding: 2rem;
}

.story-post-heading .wp-block-post-terms {
  margin-top: 0.5rem;
}

.story-post-heading .wp-block-post-terms a {
  color: var(--wp--preset--color--custom-white);
  font-size: var(--wp--preset--font-size--medium);
  text-decoration: none;
}