/*
Theme Name: QRC
Author: jaye
Version: 1.2
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: qrc
*/

/* Manual Edits
## 2026-02-20 ##
.wp-element-button - set text-decoration to auto to avoid underline
.qrc-footer-slogan - set margin-top
.qrc-grit-filthy::after - set border-radius to smooth out grit overlay
.qrc-text-shadow - new CSS class to add a heavy black shadow and 1px black border to text
*/

body {
  /* outline: 10px solid hotpink !important;  */
}

:root {
  --qrc-grit-opacity: 0.75;
  --qrc-grit-filthy-opacity: 0.5;
  /* make space for perm footer */
  
  padding-bottom: var(--footer-height, 69px);
  
}

/* ========== Custom CSS ========== */ 

.qrc-grit-filthy {
  position: relative;
}
.qrc-grit-filthy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--qrc-grit-filthy-opacity);
  mix-blend-mode: multiply;
  background-size: 600px 600px;
  background-image: var(--qrc-grit-filthy);
  background-image: var(--qrc-grit-filthy, url("assets/grit-filthy.png")) !important; 
  border-radius: 10px;
}

.qrc-grit {
  position: relative;
}

.qrc-grit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--qrc-grit-opacity);
  mix-blend-mode: multiply;
  background-size: 600px 600px;
  background-image: var(--qrc-grit);
  background-image: var(--qrc-grit, url("assets/grit.png")) !important; 
}

/* ========== HEADER & FOOTER ========== */

.qrc-header {
  position: relative;
  background-image: url("assets/header-bg.png");
  background-position: bottom;
  padding-top: 3.5rem; /* creates space for overlap */
}

.qrc-footer {
  position: relative;
  background-image: url("assets/footer-bg.png");
  padding-top: 3.5rem;
}

.qrc-footer-slogan {
   /* margin-top: 6px !important; */
   margin-top: 10px !important;
}

main.is-layout-constrained{
  margin-bottom: 4rem !important; /* space for footer overlap */
}

@media (max-width: 600px){
  .qrc-footer {
    padding-top: 2.5rem; /* smaller space for overlap on small screens */
  }
  .qrc-footer-slogan {
    display:none !important;
  }
  .qrc-footer-contact {
    display:none !important;
  }
  .wp-block-social-links{
    display:none !important;
  }
}

/* ============================== */
/* Sticky Header and Footer */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--wp--preset--color--base, #fff);
}

.site-footer {
  /* position: sticky; */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--wp--preset--color--base, #fff);
}

/* ============================== */
/* QRC Logo Overlap */

.qrc-logo {
  position: absolute;
  top: -0.4rem;          /* pulls logo upward */
  left: 1.5rem;          /* left overlap look */
  width: 90%;
}

/* Optional: collage / sticker effect */
.qrc-logo-img {
  background: rgba(0,0,0,0.85);
  padding: 0.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  z-index: 10;
}

/* Optional: collage / sticker effect */
/* this is a mess :( */
.qrc-logo-btn {
  background-image: url("assets/button-donate.jpg") !important;
  background: transparent !important;
  background-position: center;
  background: no-repeat;
  background-size: cover; /* Ensures the image covers the whole button area */
  cursor: pointer;
  border: none;
  padding: 15px 32px; /* Adjust padding for button size */
  color: white; /* Ensure text is visible */
  z-index: 10;
}

.qrc-text-shadow {
	text-shadow:  0 0 30px black, 0 0 30px black, 0 0 20px black, 0 0 10px black,  0 0 5px black;
	-webkit-text-stroke-width: 2px !important; /* The width of the stroke */
	-webkit-text-stroke-color: black !important; /* The color of the stroke */
}

/* ========== Overrides ========== */ 



/* ============================== */
/* Dirty Mask Effect for Cover and Image Blocks */
.wp-block-cover.dirty-mask .wp-block-cover__image-background {
  -webkit-mask-image: url("assets/dirty-mask.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;

  mask-image: url("assets/dirty-mask.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  mask-mode: luminance;
}

.wp-block-image.dirty-mask img {
  -webkit-mask-image: url("assets/dirty-mask.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;

  mask-image: url("assets/dirty-mask.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  mask-mode: luminance;
}

/* Add this class to the Cover block: "is-style-framed-cover" or "framed-cover" */
.wp-block-cover {
  border-style: solid;
  border-width: 16px;                 /* thickness of your frame */
  border-image-source: url("assets/frame.png");
  border-image-slice: 16;             /* same as border-width (in px) */
  border-image-repeat: repeat;        /* tiles edges; corners remain corners */
  border-image-outset: 0;
  border-image-width: 16px;             /* often matches border-width */
}

.wp-block-cover__background.has-background-dim {
  opacity: 0 !important; /* turn off overlay */
}

.wp-block-cover__image-background {
  /* object-fit:fill !important; */
  max-height:420px !important;
}

/* ============================== */
/* Navigation tweaks */

.wp-block-navigation {
  padding-left: 150px; /* above grit */
}

.wp-block-navigation__responsive-container-open {
  z-index: 20; /* above grit */
}


/* ============================== */
/* Button Shenanigans */

a:where(:not(.wp-element-button)) {
  text-decoration: auto;
}
a:where(:not(.wp-element-button)):hover{
  text-decoration: underline;
}

.wp-block-button.is-style-handdrawn{
  margin-left: 4px;
  margin-right: 4px;
  color: var(--buttonTextColor, white);
}

.wp-block-button.is-style-handdrawn .wp-block-button__link{
  position: relative;
  z-index: 0;
  background-color: transparent; /* important: don’t cover the scribble */
}

.wp-block-button.is-style-handdrawn .wp-block-button__link::before{
  /* messy scribble background UNDER */
  content:"";
  position:absolute;
  inset:-18px -22px;
  z-index:-1;
  pointer-events:none;
  background: url("assets/button-scribble-background-black.png");
  background-size:contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.95;

}

.wp-block-button.is-style-handdrawn .wp-block-button__link::after{
  content:"";
  position:absolute;
  inset:-18px -22px;
  z-index: 1;
  pointer-events:none;

  background-color: var(--outlineColor, grey);

  -webkit-mask-image: url("assets/button-scribble-1.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("assets/button-scribble-1.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.wp-block-button.is-style-handdrawn .wp-block-button__link:hover::after{
  background-color: var(--outlineColor, black);
}