/*
Theme Name: Noir AI
Theme URI: https://example.com/
Author: stabiliseai.com
Description: Minimal black & white (off-white base) block theme with a subtle tech feel for SU Version: 1.2.1
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: noir-ai
*/

/* ------------------------------
   Cross-browser baseline
--------------------------------- */
:root{
  /* Force consistent UI rendering across browsers */
  color-scheme: light;
}

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*, *::before, *::after{
  box-sizing: border-box;
}

body{
  margin: 0;
  background: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------
   Mobile gutter
   Chrome on some mobile devices can render block content flush to the viewport edge.
   We set the WP root padding variables (used by alignwide/alignfull calculations)
   and apply them to the site wrapper for a consistent small margin.
--------------------------------- */
:root{
  --noir-ai-mobile-gutter: 16px;
}

@media (max-width: 600px){
  body{
    --wp--style--root--padding-left: max(var(--noir-ai-mobile-gutter), env(safe-area-inset-left));
    --wp--style--root--padding-right: max(var(--noir-ai-mobile-gutter), env(safe-area-inset-right));
  }

  /* WP block themes wrap everything in .wp-site-blocks */
  .wp-site-blocks{
    padding-left: var(--wp--style--root--padding-left);
    padding-right: var(--wp--style--root--padding-right);
  }
}

img, svg, video, canvas{
  max-width: 100%;
  height: auto;
}

/* Make form controls match theme colours consistently */
input, textarea, select, button{
  font: inherit;
  color: inherit;
}

/* ------------------------------
   Header / Footer backgrounds
   (set via Customiser: Appearance → Customise → Noir AI Images)
--------------------------------- */
.noir-header,
.noir-footer{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--fg);
}

/* Use Customiser-provided CSS vars (injected by functions.php) */
.noir-header{ background-image: var(--noir-ai-header-bg); }
.noir-footer{ background-image: var(--noir-ai-footer-bg); }

/* Light overlay for readability on busy images (consistent across browsers) */
.noir-header::before,
.noir-footer::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(243,244,246,0.92) 0%,
    rgba(243,244,246,0.86) 45%,
    rgba(243,244,246,0.92) 100%
  );
}

.noir-header > *,
.noir-footer > *{
  position: relative;
  z-index: 1;
}

/* ------------------------------
   Site-wide link hover: red box
   (exclude button links)
--------------------------------- */
a{
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:not(.wp-block-button__link):not(.wp-block-navigation__responsive-container-close):not(.wp-block-navigation__responsive-container-open){
  border-radius: 0.22em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

a:not(.wp-block-button__link):hover,
a:not(.wp-block-button__link):focus-visible{
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--fg);
  box-shadow: 0 0 0 0.18em var(--wp--preset--color--accent);
  outline: none;
}

/* Navigation hover to match */
.wp-block-navigation a:hover,
.wp-block-navigation a:focus-visible{
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--fg) !important;
  box-shadow: 0 0 0 0.18em var(--wp--preset--color--accent);
  border-radius: 0.22em;
  outline: none;
}

/* ------------------------------
   Utility: subtle card style
--------------------------------- */
.noir-card{
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
}

/* Tidy up Query Loop cards on the front page */
.noir-post-card{
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.55);
}

.noir-post-card .wp-block-post-title{
  margin-top: 0.75rem;
}