/*
Theme Name: MEN Trust
Theme URI: https://mentrust.org
Author: Orange Light - BSO Inc.
Description: Block theme for MEN Trust (Male Empowerment Network Trust), a Guyanese social-development institution. Blue and black brand derived from the MEN logo; Archivo and Inter typography. Presentation is controlled by the theme; institutional content is managed in WordPress.
Version: 4.3
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: All rights reserved
Text Domain: men-trust
*/

/* Block themes are driven by theme.json. This file adds a few refinements
   that theme.json cannot express, kept deliberately minimal. */

:root { --mt-ease: cubic-bezier(.2,.7,.3,1); }

/* Uppercase eyebrow label used across patterns */
.mt-eyebrow{
  font-family: var(--wp--preset--font-family--head);
  font-weight:700; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color: var(--wp--preset--color--blue);
}
.has-ink-background-color .mt-eyebrow,
.has-blue-deep-background-color .mt-eyebrow{ color: var(--wp--preset--color--blue-bright); }

/* Display face helper */
.mt-display{ font-family: var(--wp--preset--font-family--display) !important; letter-spacing:-.02em; line-height:1.04; }

/* Accent rule under section headings */
.mt-rule{ height:3px; width:100%; background: var(--wp--preset--color--blue-bright); margin:.6rem 0 1.2rem; }

/* Cards: square corners, top accent, lift on hover */
.mt-card{
  background:#fff; border-top:4px solid var(--wp--preset--color--blue-bright);
  padding:1.6rem 1.5rem; transition:transform .2s var(--mt-ease), box-shadow .2s var(--mt-ease);
  height:100%;
}
.mt-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(14,74,109,.14); }

/* Stat number */
.mt-stat{ font-family:var(--wp--preset--font-family--display); color:var(--wp--preset--color--blue-bright); line-height:1; }

/* Ghost button variant (for dark sections) */
.is-style-ghost > .wp-block-button__link{
  background:transparent !important; color:#fff !important;
  border:2px solid rgba(255,255,255,.5) !important;
}
.is-style-ghost > .wp-block-button__link:hover{
  border-color:var(--wp--preset--color--blue-bright) !important; color:var(--wp--preset--color--blue-bright) !important;
}

/* Utility bar */
.mt-utility{ font-size:.8rem; }
.mt-utility a{ text-decoration:none; }

/* Focus visibility (accessibility, WCAG 2.2) */
a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--wp--preset--color--blue-bright); outline-offset:2px;
}

/* Skip link */
.mt-skip{ position:absolute; left:-9999px; top:auto; }
.mt-skip:focus{ left:1rem; top:1rem; z-index:999; background:#fff; padding:.6rem 1rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ============================================================
   ROBUSTNESS LAYER
   Ensures the design holds on WordPress.com even where preset
   generation or width handling differs. Added after live testing.
   ============================================================ */

/* Full-width coloured bands must span the viewport; inner content centres at 1180px.
   This backs up theme.json's alignfull + constrained behaviour. */
.wp-block-group.alignfull{
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.wp-block-group.alignfull > *{
  max-width: 1180px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Constrained (white) sections and the main column also centre at 1180px */
main.wp-block-group > .wp-block-group:not(.alignfull){
  max-width: 1180px; margin-left:auto; margin-right:auto;
}

/* Card grids: make columns sit as a responsive row */
.wp-block-columns{ gap: 1.5rem; }
@media (max-width: 781px){
  .wp-block-columns{ flex-wrap: wrap; }
  .wp-block-column{ flex-basis: 100% !important; }
}

/* Card styling reinforced (in case preset class order differs) */
.mt-card{
  background:#fff; border-top:4px solid #42B6E8;
  padding:1.6rem 1.5rem; height:100%;
}

/* Stat number always uses the display face + accent blue */
.mt-stat{ font-family:"Archivo Black", system-ui, sans-serif !important; color:#42B6E8 !important; line-height:1; }

/* Accent rule */
.mt-rule{ height:3px; background:#42B6E8; margin:.6rem 0 1.2rem; max-width:1180px; }

/* Eyebrow */
.mt-eyebrow{ font-family:Archivo, system-ui, sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#176A9A; }
.has-ink-background-color .mt-eyebrow, .has-blue-deep-background-color .mt-eyebrow{ color:#42B6E8; }

/* Display heading face */
.mt-display{ font-family:"Archivo Black", system-ui, sans-serif !important; letter-spacing:-.02em; line-height:1.04; }

/* Buttons: guarantee brand look even if button element styles don't apply */
.wp-block-button__link{
  border-radius:0 !important;
  font-family:Archivo, system-ui, sans-serif; font-weight:700; font-size:.9rem;
  text-transform:uppercase; letter-spacing:.04em; padding:.85rem 1.6rem;
}

/* Hide comments UI on pages (belt-and-braces; also disabled in functions.php) */
.wp-block-post-comments, .comment-respond, .comments-area, #comments,
.wp-block-comments, .wp-block-latest-comments{ display:none !important; }

/* ============================================================
   CONTACT FORM STYLING (native WordPress.com / Jetpack form)
   ============================================================ */
.wp-block-jetpack-contact-form .grunion-field-wrap,
.wp-block-jetpack-contact-form label{ display:block; margin-bottom:1rem; }
.wp-block-jetpack-contact-form label{
  font-family:Archivo, system-ui, sans-serif; font-weight:600; font-size:.9rem;
}
.wp-block-jetpack-contact-form input[type="text"],
.wp-block-jetpack-contact-form input[type="email"],
.wp-block-jetpack-contact-form input[type="tel"],
.wp-block-jetpack-contact-form select,
.wp-block-jetpack-contact-form textarea{
  width:100%; padding:.7rem .8rem; border:1px solid #D3DFE6;
  font-family:Inter, system-ui, sans-serif; font-size:1rem; margin-top:.35rem;
}
.wp-block-jetpack-contact-form input:focus,
.wp-block-jetpack-contact-form select:focus,
.wp-block-jetpack-contact-form textarea:focus{
  outline:3px solid #42B6E8; outline-offset:1px; border-color:#42B6E8;
}
.wp-block-jetpack-contact-form .wp-block-jetpack-button button,
.wp-block-jetpack-contact-form button[type="submit"]{
  background:#42B6E8; color:#161616; border:0; border-radius:0;
  font-family:Archivo, system-ui, sans-serif; font-weight:700; font-size:.9rem;
  text-transform:uppercase; letter-spacing:.04em; padding:.85rem 1.8rem; cursor:pointer;
}
.wp-block-jetpack-contact-form .wp-block-jetpack-button button:hover,
.wp-block-jetpack-contact-form button[type="submit"]:hover{ background:#2A8DBE; color:#fff; }
/* consent checkbox row */
.wp-block-jetpack-contact-form .contact-form-consent label,
.wp-block-jetpack-contact-form .grunion-checkbox-multiple-options label{
  font-weight:400; font-size:.92rem; display:flex; gap:.5rem; align-items:flex-start;
}

/* ============================================================
   STATIC HEADER (hard-coded, no WordPress settings dependency)
   ============================================================ */
.mt-header-static{
  background:#fff; border-bottom:1px solid #D3DFE6; padding:0;
}
.mt-header-inner{
  max-width:1180px; margin:0 auto; padding:.9rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:nowrap;
}
.mt-logo{ display:inline-flex; align-items:center; flex:0 0 auto; }
.mt-logo img{ height:40px; width:auto; display:block; }
.mt-nav{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.mt-nav a{
  font-family:Archivo, system-ui, sans-serif; font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.04em; color:#161616; text-decoration:none;
  white-space:nowrap;
}
.mt-nav a:hover{ color:#176A9A; }
.mt-nav .mt-nav-btn{
  background:#42B6E8; color:#161616; padding:.7rem 1.3rem;
  font-weight:700;
}
.mt-nav .mt-nav-btn:hover{ background:#2A8DBE; color:#fff; }
.mt-nav-toggle{
  display:none; background:none; border:0; cursor:pointer; padding:.4rem; flex:0 0 auto;
  flex-direction:column; gap:5px; width:42px;
}
.mt-nav-toggle span{ display:block; height:3px; width:26px; background:#161616; }

@media (max-width: 900px){
  .mt-nav-toggle{ display:flex; }
  .mt-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:#fff; border-bottom:1px solid #D3DFE6; padding:.5rem 1.5rem 1.2rem; z-index:50;
  }
  .mt-nav.is-open{ display:flex; }
  .mt-nav a{ padding:.7rem 0; width:100%; border-bottom:1px solid #F2F7FA; }
  .mt-nav .mt-nav-btn{ margin-top:.6rem; display:inline-block; width:auto; }
  .mt-header-inner{ position:relative; flex-wrap:nowrap; }
}

/* ============================================================
   STATIC UTILITY BAR + FOOTER
   ============================================================ */
.mt-utility-static{ background:#161616; }
.mt-utility-inner{
  max-width:1180px; margin:0 auto; padding:.4rem 1.5rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  font-size:.8rem; color:#fff;
}
.mt-utility-tag{ color:#c7d2d8; }
.mt-utility-links{ display:flex; gap:1.25rem; }
.mt-utility-links a{ color:#fff; text-decoration:none; }
.mt-utility-links a.mt-crisis-link{ color:#42B6E8; }
.mt-utility-links a:hover{ text-decoration:underline; }

.mt-footer-static{ background:#161616; color:#fff; }
.mt-footer-inner{ max-width:1180px; margin:0 auto; padding:3.5rem 1.5rem 1.6rem; }
.mt-foot-cols{ display:flex; gap:2.5rem; flex-wrap:wrap; }
.mt-foot-brand{ flex:1 1 300px; }
.mt-foot-col{ flex:1 1 150px; }
.mt-foot-logo{ height:40px; width:auto; display:block; }
.mt-foot-sub{ color:#42B6E8; font-size:.55rem; letter-spacing:.12em; margin:.4rem 0 .8rem; }
.mt-foot-desc{ color:#c7d2d8; font-size:.9rem; line-height:1.6; }
.mt-foot-social a{ color:#42B6E8; text-decoration:none; font-size:.9rem; }
.mt-foot-col h5{
  font-family:Archivo, system-ui, sans-serif; font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; margin:0 0 .8rem;
}
.mt-foot-col a{ display:block; color:#c7d2d8; text-decoration:none; font-size:.9rem; line-height:2; }
.mt-foot-col a:hover{ color:#42B6E8; }
.mt-foot-contact{ color:#c7d2d8; font-size:.9rem; line-height:1.9; }
.mt-foot-contact a{ color:#c7d2d8; }
.mt-foot-btn{
  display:inline-block; margin-top:1rem; background:#42B6E8; color:#161616;
  font-family:Archivo, system-ui, sans-serif; font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.04em; padding:.7rem 1.2rem; text-decoration:none;
}
.mt-foot-btn:hover{ background:#2A8DBE; color:#fff; }
.mt-foot-hr{ border:0; border-top:1px solid #333; margin:2rem 0 1.2rem; }
.mt-foot-legal{ color:#8a99a1; font-size:.78rem; line-height:1.7; }
.mt-foot-legal a{ color:#8a99a1; }

/* ============================================================
   HOMEPAGE STORYTELLING PHOTOS
   ============================================================ */
.mt-hero-photo{ margin:0 !important; }
.mt-hero-photo img{
  width:100%; height:auto; max-height:520px; object-fit:cover; display:block;
}
.mt-hero-photo figcaption{
  max-width:1180px; margin:.7rem auto 0; padding:0 1.5rem;
  font-size:.85rem; color:#5A6B75; text-align:left;
}
.mt-feature-photo{ margin:1.5rem 0 !important; }
.mt-feature-photo img{ width:100%; height:auto; max-height:420px; object-fit:cover; display:block; }
.mt-feature-photo figcaption{ font-size:.85rem; color:#c7d2d8; margin-top:.6rem; }
.mt-partner-photo{ margin:1.5rem 0 0 !important; }
.mt-partner-photo img{ width:100%; height:auto; max-height:420px; object-fit:cover; display:block; }
.mt-partner-photo figcaption{ font-size:.85rem; color:#5A6B75; margin-top:.6rem; }

/* ============================================================
   HARD-HIDE ALL COMMENT UI (Jetpack + core), belt and braces
   ============================================================ */
#comments, .comments-area, .comment-respond, .comments-title,
.wp-block-comments, .wp-block-post-comments-form, .wp-block-latest-comments,
#respond, #commentform, .comment-form, .comment-list,
#jp-carousel-comment-form, .jetpack-comment-form,
iframe[title="Comment Form"], #comment-form-container,
.wpforms-container ~ .comment-respond{
  display:none !important; visibility:hidden !important; height:0 !important;
  overflow:hidden !important; margin:0 !important; padding:0 !important;
}

/* ============================================================
   COMMENTS: final hard suppression (Jetpack + core + iframe)
   ============================================================ */
#comments, .comments-area, .comment-respond, .comments-title, .comment-list,
.wp-block-comments, .wp-block-post-comments-form, .wp-block-latest-comments,
#respond, #commentform, .comment-form, #jp-carousel-comment-form,
.jetpack-comment-form, #comment-form-container,
iframe[title="Comment Form"], iframe[name*="comment"],
.wpcom-comment, .comments-wrapper, .comment-likes{
	display:none !important; visibility:hidden !important;
	height:0 !important; width:0 !important; overflow:hidden !important;
	margin:0 !important; padding:0 !important; position:absolute !important; left:-9999px !important;
}

/* ============================================================
   FROZEN HEADER (freeze pane) - utility bar + main header are
   PINNED to the viewport with position:fixed so they never move,
   no matter how far the page is scrolled. position:fixed is used
   instead of position:sticky because sticky can be silently broken
   by a parent element with overflow set (which WordPress.com wraps
   pages in); fixed is anchored to the browser window itself and
   cannot be overridden that way.
   ============================================================ */
.mt-utility-static{
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  z-index: 100000 !important;
}
.mt-header-static{
  position: fixed !important;
  top: 33px !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  box-shadow: 0 2px 10px rgba(14,74,109,0.10);
}

/* Push all page content down so it is not hidden beneath the two
   fixed bars. Total frozen height on desktop is about 33px (utility)
   + 66px (header) = ~99px. The padding is applied to the wrapper that
   holds the page body, and as a fallback to the body itself. */
body{ padding-top: 99px !important; }

/* Anchored in-page jumps land below the frozen bars */
html{ scroll-padding-top: 110px; }

/* Mobile: the utility bar wraps to two lines and the header is taller,
   so increase the offsets and top padding accordingly. */
@media (max-width: 700px){
  .mt-header-static{ top: 52px !important; }
  body{ padding-top: 120px !important; }
}
@media (max-width: 400px){
  .mt-header-static{ top: 64px !important; }
  body{ padding-top: 132px !important; }
}

/* ============================================================
   GALLERY (independent handle: /gallery)
   ============================================================ */
.mtg-wrap{ max-width:1180px; margin:0 auto; }
.mtg-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.mtg-filter{
  font-family:Archivo, system-ui, sans-serif; font-weight:600; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.03em;
  background:#F2F7FA; color:#0E4A6D; border:1px solid #D3DFE6; border-radius:0;
  padding:.5rem 1rem; cursor:pointer; transition:background .15s, color .15s;
}
.mtg-filter:hover{ background:#E3EDF4; }
.mtg-filter.is-active{ background:#176A9A; color:#fff; border-color:#176A9A; }
.mtg-hint{ font-size:.9rem; color:#5A6B75; margin:.2rem 0 1.4rem; }
.mtg-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
@media (max-width:900px){ .mtg-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .mtg-grid{ grid-template-columns:1fr; } }
.mtg-item{ margin:0; cursor:pointer; background:#fff; border-top:3px solid #42B6E8; overflow:hidden; }
.mtg-item img{ width:100%; height:220px; object-fit:cover; display:block; transition:transform .3s ease; }
.mtg-item:hover img{ transform:scale(1.05); }
.mtg-item figcaption{ font-size:.82rem; color:#5A6B75; padding:.6rem .7rem .8rem; line-height:1.4; }
.mtg-item:focus-visible{ outline:3px solid #42B6E8; outline-offset:2px; }
/* Lightbox */
.mtg-lightbox{ position:fixed; inset:0; background:rgba(14,20,25,.92); z-index:2000;
  display:flex; align-items:center; justify-content:center; flex-direction:column; padding:2rem; }
.mtg-lightbox[aria-hidden="true"]{ display:none; }
.mtg-lightbox-img{ max-width:90vw; max-height:78vh; object-fit:contain; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.mtg-lightbox-cap{ color:#fff; font-size:.95rem; margin-top:1rem; max-width:800px; text-align:center; }
.mtg-close,.mtg-prev,.mtg-next{ position:absolute; background:rgba(255,255,255,.12); color:#fff;
  border:0; cursor:pointer; font-size:2rem; line-height:1; width:52px; height:52px; display:flex;
  align-items:center; justify-content:center; transition:background .15s; }
.mtg-close:hover,.mtg-prev:hover,.mtg-next:hover{ background:#42B6E8; color:#161616; }
.mtg-close{ top:1.2rem; right:1.2rem; }
.mtg-prev{ left:1.2rem; top:50%; transform:translateY(-50%); }
.mtg-next{ right:1.2rem; top:50%; transform:translateY(-50%); }
@media (max-width:560px){ .mtg-prev{ left:.4rem; } .mtg-next{ right:.4rem; } .mtg-close{ top:.6rem; right:.6rem; } }

/* ============================================================
   IN THE NEWS (independent handle: /news)
   ============================================================ */
.mt-news-card{
  background:#fff; border-left:4px solid #42B6E8; padding:1.3rem 1.5rem;
  margin-bottom:0; box-shadow:0 1px 3px rgba(14,74,109,.05);
}
.mt-news-card.mt-news-empty{ border-left-color:#D3DFE6; background:#F2F7FA; }
.mt-news-meta{
  font-family:Archivo, system-ui, sans-serif; font-weight:600; font-size:.78rem;
  letter-spacing:.04em; text-transform:uppercase; color:#176A9A; margin:0 0 .3rem;
}
.mt-news-title{ font-size:1.25rem; margin:.1rem 0 .5rem; line-height:1.25; }
.mt-news-title a{ color:#0E4A6D; text-decoration:none; }
.mt-news-title a:hover{ color:#176A9A; text-decoration:underline; }
.mt-news-blurb{ font-size:.96rem; color:#5A6B75; margin:.2rem 0 .6rem; }
.mt-news-link a{
  font-family:Archivo, system-ui, sans-serif; font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.03em; color:#176A9A; text-decoration:none;
}
.mt-news-link a:hover{ color:#0E4A6D; }