/*
Theme Name: Darina Child
Template: darina
Description: Reusable blank template styling + gentle layout & UI helpers.
Version: 1.2.0
*/

/* Smoothing */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* A11y helper */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

/* =======================================================
   SCOPE: Only when using the "No Header / No Footer" template
   (WP sets this body class automatically)
   ======================================================= */
body.page-template-template-no-header-footer{
  --brand:#8500ec; --ink:#111; --muted:#666; --bg:#fff;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  margin:0; padding:0;
}

/* Neutralise any theme wrappers just in case */
body.page-template-template-no-header-footer .site,
body.page-template-template-no-header-footer .wrap,
body.page-template-template-no-header-footer #content,
body.page-template-template-no-header-footer .container,
body.page-template-template-no-header-footer .site-main,
body.page-template-template-no-header-footer article {
  width:100%!important;
  max-width:none!important;
  margin:0!important; padding:0!important;
  border:0!important; box-shadow:none!important; background:transparent!important;
}

/* Hide stray theme chrome if injected by global parts/plugins */
body.page-template-template-no-header-footer #masthead,
body.page-template-template-no-header-footer .site-header,
body.page-template-template-no-header-footer #colophon,
body.page-template-template-no-header-footer .site-footer,
body.page-template-template-no-header-footer .breadcrumbs,
body.page-template-template-no-header-footer .site-branding{display:none!important}

/* Typography & links */
body.page-template-template-no-header-footer a{color:var(--brand);text-decoration:none}
body.page-template-template-no-header-footer a:hover,
body.page-template-template-no-header-footer a:focus{text-decoration:underline}

body.page-template-template-no-header-footer h1,
body.page-template-template-no-header-footer h2,
body.page-template-template-no-header-footer h3{
  color:var(--ink); line-height:1.2; margin:.5rem 0 .75rem
}
body.page-template-template-no-header-footer h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.012em}
body.page-template-template-no-header-footer h2{font-size:clamp(1.5rem,3vw,2.125rem);font-weight:700;letter-spacing:-.006em}
body.page-template-template-no-header-footer h3{font-size:clamp(1.25rem,2.25vw,1.5rem);font-weight:700}

body.page-template-template-no-header-footer p{margin:0 0 1rem;color:var(--ink)}
body.page-template-template-no-header-footer .muted{color:var(--muted)}

/* -------------------------------------------
   BOXED CONTENT (easy control)
   Option A: Wrap content in a Group/Container and add the class "mento-container"
   Option B: If you want EVERYTHING boxed by default, uncomment the global box below.
   ------------------------------------------- */

/* Option A: utility container you can add where needed */
body.page-template-template-no-header-footer .mento-container{
  width:min(1200px,92vw);
  margin-inline:auto;
  padding:clamp(16px,2vw,28px);
}

/* (Optional) Option B: box ALL content automatically on this template */
/*
body.page-template-template-no-header-footer main#primary{
  width:min(1200px,92vw);
  margin-inline:auto;
  padding:clamp(16px,2vw,28px);
}
*/

/* Section helper */
body.page-template-template-no-header-footer .mento-section{padding-block:clamp(40px,8vw,96px)}
body.page-template-template-no-header-footer .mento-section--alt{
  background:linear-gradient(180deg, rgba(133,0,236,.04), rgba(133,0,236,.02));
  border:1px solid rgba(133,0,236,.06);
  border-left-color:rgba(133,0,236,.12);
  border-right-color:rgba(133,0,236,.12);
  border-radius:16px;
}

/* Readable line-length for body copy (applies to direct children only) */
body.page-template-template-no-header-footer .entry-content > *:not(.alignfull):not(.alignwide){
  max-width:70ch;
}
body.page-template-template-no-header-footer .entry-content > * + *{
  margin-top:clamp(12px,2.2vw,22px);
}

/* Buttons */
body.page-template-template-no-header-footer .btn,
body.page-template-template-no-header-footer .button,
body.page-template-template-no-header-footer .wp-block-button__link{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.2rem;border-radius:12px;font-weight:600;
  border:1px solid var(--brand);background:var(--brand);color:#fff!important;line-height:1;
  transition:transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
  box-shadow:0 8px 18px rgba(133,0,236,.18);
}
body.page-template-template-no-header-footer .btn:hover,
body.page-template-template-no-header-footer .wp-block-button__link:hover{transform:translateY(-2px)}
body.page-template-template-no-header-footer .btn--outline,
body.page-template-template-no-header-footer .is-style-outline .wp-block-button__link{
  background:#fff!important;color:var(--brand)!important;border:1px solid rgba(133,0,236,.35)!important;box-shadow:none!important
}

/* Grid helpers */
body.page-template-template-no-header-footer .mento-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2vw,24px)
}
body.page-template-template-no-header-footer .col-12{grid-column:span 12}
body.page-template-template-no-header-footer .col-6{grid-column:span 6}
body.page-template-template-no-header-footer .col-4{grid-column:span 4}
body.page-template-template-no-header-footer .col-3{grid-column:span 3}
@media(max-width:900px){
  body.page-template-template-no-header-footer .col-6,
  body.page-template-template-no-header-footer .col-4,
  body.page-template-template-no-header-footer .col-3{grid-column:span 12}
}

/* Cards */
body.page-template-template-no-header-footer .mento-card{
  border:1px solid rgba(17,17,17,.06);border-radius:16px;
  padding:clamp(16px,2.5vw,28px);box-shadow:0 6px 16px rgba(17,17,17,.06);background:#fff
}

/* Media */
body.page-template-template-no-header-footer img{max-width:100%;height:auto}
body.page-template-template-no-header-footer .mento-hero{position:relative;overflow:hidden;padding-block:clamp(36px,8vw,96px);background:radial-gradient(80% 60% at 50% 0%, rgba(133,0,236,.08), transparent 60%)}
body.page-template-template-no-header-footer .mento-hero img,
body.page-template-template-no-header-footer .mento-hero video{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:16/9}
body.page-template-template-no-header-footer img.lazyload,
body.page-template-template-no-header-footer img[data-src]{filter:none!important;opacity:1!important}

/* Lists, quotes, rules */
body.page-template-template-no-header-footer ul,body.page-template-template-no-header-footer ol{padding-left:1.15rem}
body.page-template-template-no-header-footer blockquote{
  margin:1.2rem 0;padding:1rem 1.25rem;border-left:4px solid var(--brand);
  background:rgba(133,0,236,.06);border-radius:8px
}
body.page-template-template-no-header-footer hr,
body.page-template-template-no-header-footer .wp-block-separator{
  height:1px;background:linear-gradient(90deg,transparent,rgba(17,17,17,.15),transparent);
  border:0;opacity:.7;margin:1.6rem 0
}

/* Forms */
body.page-template-template-no-header-footer input[type="text"],
body.page-template-template-no-header-footer input[type="email"],
body.page-template-template-no-header-footer input[type="tel"],
body.page-template-template-no-header-footer textarea,
body.page-template-template-no-header-footer select{
  width:100%;border:1px solid rgba(17,17,17,.15);border-radius:12px;
  padding:.7rem .9rem;background:#fff;transition:border-color .2s, box-shadow .2s
}
body.page-template-template-no-header-footer input:focus,
body.page-template-template-no-header-footer textarea:focus,
body.page-template-template-no-header-footer select:focus{
  outline:none;border-color:rgba(133,0,236,.6);box-shadow:0 0 0 4px rgba(133,0,236,.12)
}

/* Ensure parent over-specific colours don’t leak */
body.page-template-template-no-header-footer *{color:inherit}
body.page-template-template-no-header-footer a{color:var(--brand)}

/* BOX EVERYTHING on the No Header / No Footer template (hard override) */
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) main#primary,
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) article,
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) .entry-content,
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) .site,
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) .wrap,
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) #content,
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) .container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-shadow: none !important;
  background: transparent !important;
  width: 100% !important;
}

/* Gutenberg “wide/full” blocks should respect the box */
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) .alignwide,
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) .alignfull {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
}

/* Nuke any global header/footer remnants just in case */
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) #masthead,
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) .site-header,
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) #colophon,
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) .site-footer,
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) .breadcrumbs {
  display: none !important;
}
/******** Desktop sizing fix pack (append at end) ********/
/* Apply to both possible body classes for the blank template */
:is(body.page-template-template-no-header-footer,
    body.page-template-template-no-header-footer-php) {

  /* Base text a touch smaller on big screens */
  font-size: 16px;
}

/* 1) Use a narrower boxed width on laptops/desktops */
@media (min-width: 1200px) {
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) main#primary,
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) article,
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) .entry-content,
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) .site,
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) .wrap,
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) #content,
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) .container,
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) .mento-container {
    max-width: 1040px !important;  /* was 1200px */
  }
  /* “Wide/Full” blocks respect the narrower box */
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) .alignwide,
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) .alignfull {
    max-width: 1040px !important;
  }
}

/* 2) Cap heading sizes so they don’t shout on desktop */
@media (min-width: 992px) {
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) h1 {
    font-size: 2.6rem !important;  /* ~41–42px */
    letter-spacing: -0.01em;
  }
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) h2 {
    font-size: 2rem !important;    /* ~32px */
  }
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) h3 {
    font-size: 1.35rem !important; /* ~22px */
  }
}

/* 3) Keep paragraph measure comfy on large screens */
@media (min-width: 992px) {
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) .entry-content > *:not(.alignfull):not(.alignwide) {
    max-width: 68ch !important; /* was 70ch */
  }
}

/* 4) Tidy paddings so content doesn’t look too airy on desktop */
@media (min-width: 1200px) {
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) .mento-section {
    padding-block: 56px !important; /* slightly tighter */
  }
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) .mento-container,
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) main#primary {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* 5) Buttons & form fields: trim a bit on desktop so they feel balanced */
@media (min-width: 1200px) {
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) .btn,
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) .wp-block-button__link {
    padding: 0.78rem 1.05rem !important;
    box-shadow: 0 6px 16px rgba(133,0,236,.16) !important;
  }
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) input[type="text"],
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) input[type="email"],
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) input[type="tel"],
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) textarea,
  :is(body.page-template-template-no-header-footer,
      body.page-template-template-no-header-footer-php) select {
    padding: 0.65rem 0.9rem !important;
  }
}