/* Global layout uses the gentle aqua/green gradients from the uploaded blog. */
:root{
  --bg:#f2fbff;
  --paper:#fff;
  --ink:#1e293b;
  --muted:#50677a;
  --edge:#d9e8ef;
  --accent:#0b72be;
  --success:#0d7a45;
  --shadow:0 9px 28px rgba(34,75,103,.10);
  font-size:16px
}
/* The high-level box reset prevents sideways movement on mobile screens. */
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  overflow-x:hidden;
  min-width:0;
  background:linear-gradient(180deg,#e6f7ff,#eefbf3 52%,#fff);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  line-height:1.65
}
/* Constrain wide content and media without clipping very long code strings. */
img{
  max-width:100%;
  height:auto
}
a{
  color:var(--accent);
  text-decoration:none
}
a:hover{
  text-decoration:underline
}
button,input,textarea,select{
  font:inherit
}
button{
  cursor:pointer
}
h1,h2,h3{
  line-height:1.28;
  overflow-wrap:anywhere
}
p{
  overflow-wrap:anywhere
}
/* Header: compact horizontal navigation, with a separate mobile toggle. */
.site-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px max(12px,calc((100vw - 1240px)/2));
  background:linear-gradient(100deg,#1e90ff,#42b8d0 46%,#26a978);
  color:white;
  box-shadow:0 3px 16px #1235;
  position:relative;
  z-index:10
}
.brand{
  display:flex;
  gap:7px;
  align-items:center;
  color:#fff;
  flex:0 0 auto;
  font-weight:800
}
.brand:hover{
  text-decoration:none
}
.brand-caption{
  white-space:nowrap
}
.brand-caption small{
  font-size:.78rem;
  color:#f7f2ba
}
.site-nav{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center
}
.site-nav a{
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  border-radius:8px;
  padding:6px 7px;
  white-space:nowrap
}
.site-nav a:hover,.site-nav a:focus-visible{
  background:rgba(255,255,255,.17);
  text-decoration:underline;
  text-decoration-color:#f5e69a
}
.menu-button{
  display:none;
  color:white;
  background:transparent;
  border:1px solid #fff8;
  border-radius:9px;
  padding:9px
}
.skip-link{
  position:absolute;
  top:-100px;
  left:10px;
  background:#fff;
  padding:10px;
  z-index:30
}
.skip-link:focus{
  top:6px
}
/* The compact toolbar supports a persistent night theme and font sizing. */
.utility-bar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  max-width:1220px;
  margin:10px auto 0;
  padding:0 16px;
  flex-wrap:wrap
}
.utility-bar button,.utility-bar a{
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--edge);
  padding:6px 10px;
  border-radius:9px;
  font-size:.85rem
}
/* Two-column blog directory keeps the submission form beside published posts. */
.page-shell{
  width:min(1220px,100%);
  margin:0 auto;
  padding:18px 16px 40px;
  min-height:58vh
}
.hero{
  border-radius:22px;
  padding:26px;
  background:linear-gradient(125deg,#ddf6ff,#e9fff0);
  border:1px solid #bce6e0;
  margin-bottom:18px
}
.hero h1{
  margin:8px 0
}
.hero p{
  margin:5px 0;
  max-width:760px
}
.grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,340px);
  gap:20px;
  align-items:start
}
.grid main,.grid aside{
  min-width:0
}
.card{
  background:var(--paper);
  box-shadow:var(--shadow);
  border:1px solid var(--edge);
  border-radius:16px;
  padding:22px;
  margin-bottom:18px
}
.card h2:first-child{
  margin-top:0
}
.post-card{
  box-shadow:none;
  border-color:var(--edge);
  padding:18px
}
.post-card h3{
  margin:8px 0
}
.post-card p{
  margin:10px 0
}
.badge{
  display:inline-flex;
  background:#d6f4e6;
  color:#0b5e4c;
  padding:3px 10px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:800
}
.meta,.small{
  font-size:.86rem;
  color:var(--muted)
}
/* Buttons and notices distinguish actions without relying on color alone. */
.btn{
  display:inline-block;
  border:0;
  color:#fff;
  background:linear-gradient(100deg,#1e90ff,#119670);
  border-radius:9px;
  padding:9px 16px;
  font-weight:700;
  cursor:pointer
}
.btn:hover{
  filter:brightness(.94);
  color:#fff;
  text-decoration:none
}
.btn-secondary{
  background:#e8f3fd;
  color:#12558c;
  border:1px solid #bcdbef
}
.btn-secondary:hover{
  color:#08385e
}
.btn-danger{
  background:#a52a2a;
  color:#fff
}
.success,.error,.notice{
  padding:12px 15px;
  border-radius:12px;
  border:1px solid;
  margin:10px 0 18px
}
.success{
  background:#e6fff0;
  border-color:#63c998;
  color:#0b6438
}
.error{
  background:#fff2f2;
  border-color:#ed9a9a;
  color:#882b2b
}
.notice{
  background:#ecf7ff;
  border-color:#9cd2ff;
  color:#224e7a
}
/* All forms use visible labels and a keyboard-accessible focus state. */
.form-row{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:12px 0
}
.form-row label{
  font-weight:700
}
.form-row input,.form-row select,.form-row textarea{
  display:block;
  width:100%;
  min-width:0;
  border:1px solid #b2cad8;
  border-radius:9px;
  padding:10px;
  background:var(--paper);
  color:var(--ink)
}
.form-row textarea{
  min-height:170px;
  resize:vertical
}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{
  outline:2px solid #2b9aff;
  outline-offset:1px
}
.honeypot{
  position:absolute!important;
  left:-10000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important
}
.category-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.category-list a{
  padding:6px 11px;
  border-radius:18px;
  background:#edf8ff
}
/* The full article preserves intentional line breaks, code and long URLs. */
.article-body{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:1.04rem;
  line-height:1.85
}
.pagination,.admin-actions{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap
}
.admin-actions form{
  display:inline-flex
}
.admin-actions .btn{
  padding:7px 10px
}
.admin-table{
  width:100%;
  border-collapse:collapse
}
.admin-table td,.admin-table th{
  text-align:left;
  border-bottom:1px solid var(--edge);
  padding:10px 8px;
  vertical-align:top
}
.admin-table td{
  overflow-wrap:anywhere
}
.responsive-table{
  overflow:auto
}
.byline{
  border-left:3px solid #b6dfd3;
  padding-left:10px
}
/* Footer: three responsive columns, seven simple social links, and legal links. */
.site-footer{
  background:#15394c;
  color:#eaf6ff;
  padding:28px max(16px,calc((100vw - 1220px)/2)) 20px
}
.site-footer a{
  color:#eaf6ff
}
.footer-columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.footer-columns section{
  min-width:0
}
.footer-columns a:not(.footer-brand){
  display:block;
  overflow-wrap:anywhere;
  margin:4px 0
}
.footer-columns h2{
  font-size:1rem;
  margin:0 0 10px
}
.footer-columns p{
  font-size:.88rem
}
.social-row,.footer-action-links,.footer-legal{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  padding:12px 0
}
.social-row a{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:30px;
  height:30px;
  border:1px solid #9db4c5;
  border-radius:50%;
  font-size:.75rem;
  font-weight:800
}
.footer-action-links a{
  border-radius:8px;
  padding:6px 11px;
  background:linear-gradient(110deg,#176ec6,#8e5bc8)
}
.footer-action-links a:hover{
  text-decoration:underline;
  filter:brightness(1.18)
}
.footer-legal a{
  font-size:.9rem
}
.copyright{
  text-align:center;
  font-size:.8rem;
  color:#cbd9e3;
  margin:8px 0
}
.go-top{
  position:fixed;
  right:16px;
  bottom:16px;
  border:0;
  border-radius:50%;
  width:40px;
  height:40px;
  background:#126fa4;
  color:white;
  box-shadow:var(--shadow);
  display:none
}
.go-top.visible{
  display:block
}
/* Dark mode changes the variables used by each card, form and toolbar. */
body.dark{
  --bg:#24333d;
  --paper:#263944;
  --ink:#f0f7ff;
  --muted:#bed5e1;
  --edge:#4f6874;
  --accent:#83d0ff;
  background:linear-gradient(180deg,#263a43,#324740)
}
body.dark .hero{
  background:#324c56;
  border-color:#60787f
}
body.dark .badge{
  background:#245e50;
  color:#e1fff6
}
body.dark .category-list a{
  background:#365c70
}
body.dark .btn-secondary{
  color:#e3f5ff;
  background:#335c74;
  border-color:#639ab6
}
body.dark .success{
  background:#1d513a;
  color:#eaffef
}
body.dark .error{
  background:#592c32;
  color:#ffe5e5
}
body.dark .notice{
  background:#284b62;
  color:#eef8ff
}
/* Tight breakpoints keep input fields and layouts fully inside phone screens. */
@media(max-width:1050px){
  .site-header{
  flex-wrap:wrap
}
.site-nav{
  width:100%
}
}
@media(max-width:720px){
  .menu-button{
  display:inline-block;
  margin-left:auto
}
.site-nav{
  display:none;
  flex-direction:column;
  align-items:stretch;
  max-height:65vh;
  overflow-y:auto
}
.site-nav.open{
  display:flex
}
.site-nav a{
  font-size:.96rem
}
.grid{
  grid-template-columns:1fr
}
.hero{
  padding:20px
}
.page-shell{
  padding:13px
}
.card{
  padding:16px
}
.footer-columns{
  gap:7px
}
.footer-columns p,.footer-columns a{
  font-size:.7rem
}
.footer-columns h2{
  font-size:.8rem
}
.brand-caption{
  font-size:.9rem
}
}
@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto
}
}
/* Keep the Google Translate helper visually unobtrusive and languages vertical. */
.utility-bar select{
  max-width:150px;
  min-width:0;
  border-radius:8px;
  padding:6px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--edge)
}
.utility-bar label{
  font-size:.82rem
}
.translation-service{
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden
}
.goog-te-banner-frame,.skiptranslate iframe{
  display:none!important
}
body{
  top:0!important
}
/* A right-to-left translation changes reading direction without horizontal scroll. */
html[dir=rtl] .page-shell{
  text-align:right
}
html[dir=rtl] .site-header{
  direction:rtl
}
html[dir=rtl] .post-card,html[dir=rtl] .card{
  text-align:start
}
/* SVG social brand icons are equally sized and stay inside compact mobile buttons. */
.social-row a svg{
  width:20px;
  height:20px;
  max-width:100%;
  display:block
}
.social-row a:hover{
  transform:translateY(-2px)
}


/* ====== 2026 EasyTutorGuide blog visual refresh ====== */
/* Root-absolute image paths preserve the original official brand logo. */
:root { --shadow:0 12px 34px rgba(42,72,115,.10); --edge:#dce6f5; --accent:#2657b8; --ink:#25314b; --muted:#596985; }
body { background:linear-gradient(170deg,#f4faff 0%,#f7f5ff 52%,#f0fff9 100%); }
.site-header { position:sticky; top:0; z-index:25; padding:7px max(14px,calc((100vw - 1280px)/2)); background:linear-gradient(110deg,#c8ebff,#d9dcff 63%,#eee2ff); color:#203254; border-bottom:1px solid #b6cceb; box-shadow:0 4px 22px rgba(30,55,110,.08); min-height:72px; }
.brand { border-radius:12px; padding:1px 7px; background:radial-gradient(ellipse at center,rgba(255,255,255,.98) 0%,rgba(255,255,255,.4) 63%,transparent 85%); }
.header-blog-label { padding:4px 9px; font-size:.66rem; font-weight:800; letter-spacing:.14em; background:#fff9; color:#3454a0; border-radius:999px; white-space:nowrap; }
.site-nav { margin-inline-start:auto; justify-content:flex-end; gap:2px; }
.site-nav a { color:#26385d; font-size:.74rem; letter-spacing:-.01em; padding:6px 5px; transition:background .16s,color .16s; }
.site-nav a:hover,.site-nav a:focus-visible,.site-nav a[aria-current=page] { background:#ffffffbd; color:#344dac; text-decoration:underline; text-underline-offset:4px; }
.menu-button { color:#243b69; border-color:#758ec1; background:#ffffff99; }
.utility-bar { background:rgba(255,255,255,.72); border:1px solid #dce7f3; border-radius:13px; padding:8px 12px; margin-top:13px; width:calc(100% - 26px); box-shadow:0 3px 18px #3f5d7511; }
.utility-bar button,.utility-bar a { background:white; }
.page-shell { padding-top:20px; }
.hero { position:relative; overflow:hidden; padding:38px clamp(20px,4vw,46px); border:1px solid #d4dcff; background:linear-gradient(125deg,#dff5ff 0%,#eeeaff 54%,#e8fff0 100%); box-shadow:var(--shadow); }
.hero:after { content:""; position:absolute; width:230px; height:230px; border-radius:50%; top:-125px; right:-65px; border:36px solid #ffffff90; pointer-events:none; }
.hero h1 { position:relative; max-width:760px; margin:10px 0; color:#22395a; font-size:clamp(1.7rem,4.5vw,2.9rem); font-weight:850; letter-spacing:-.035em; }
.hero p { color:#36516d; font-size:1rem; }
.hero .small { font-size:.88rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:9px; margin:20px 0; }
.grid { grid-template-columns:minmax(0,1fr) minmax(280px,350px); }
.card { border-color:#dfebf4; box-shadow:0 8px 29px #3963960e; }
.card h2 { color:#244260; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.section-heading h2 { margin:3px 0 16px; }
.eyebrow { font-weight:850; letter-spacing:.1em; color:#346fba; font-size:.68rem; }
.count-chip { padding:4px 12px; border-radius:50px; background:#ecf5ff; color:#315386; white-space:nowrap; font-size:.78rem; font-weight:750; }
.search-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 20px; }
.search-row input { flex:1 1 180px; min-width:0; width:auto; padding:11px 12px; border:1px solid #b9cde4; border-radius:9px; background:var(--paper); color:var(--ink); }
.visually-hidden { position:absolute!important; clip:rect(0 0 0 0)!important; height:1px!important; width:1px!important; overflow:hidden!important; }
.post-card { background:linear-gradient(175deg,white,#fafcff); border:1px solid #dbe6f4; border-left:4px solid #8cb5eb; margin-top:14px; transition:transform .15s ease,box-shadow .15s ease; }
.post-card:hover { transform:translateY(-2px); box-shadow:0 12px 24px #4776a521; }
.post-card a:not(.btn):hover { text-decoration:underline; text-underline-offset:3px; }
.category-list a { background:#e9f4ff; border:1px solid #d5e5f9; font-weight:650; }
.category-list a:hover { background:#dcdfff; color:#243f86; }
.empty-state { padding:30px 18px; border:1px dashed #acb9d5; border-radius:14px; background:#f7fbff; text-align:center; }
.badge { background:#e4f1ff; color:#3557a2; }
.btn { background:linear-gradient(115deg,#217ece,#7569cf); box-shadow:0 3px 8px #547fc326; }
.btn-secondary { background:#f7fbff; color:#31538b; border-color:#c7d9ed; box-shadow:none; }
.btn-secondary:hover { background:#e5f2ff; color:#263d72; }
.footer-action-links a { background:linear-gradient(90deg,#1269b5,#7755bb); transition:transform .2s ease,filter .2s ease; }
.footer-action-links a:hover { transform:translateY(-2px); }
.category-manage-row { display:flex; justify-content:space-between; gap:12px; align-items:center; border-bottom:1px solid var(--edge); padding:10px 0; flex-wrap:wrap; }
.category-manage-row form { margin:0; }
input,select,textarea { max-width:100%; }
:focus-visible { outline:3px solid #347dbf; outline-offset:3px; }
body.dark { --paper:#283b48; --ink:#f0f7ff; --muted:#c0d4df; --edge:#5a7384; --accent:#99d6ff; }
body.dark .hero { background:linear-gradient(115deg,#2f4b62,#393e65); border-color:#56678e; }
body.dark .hero h1,body.dark .hero p,body.dark .card h2 { color:#f1f8ff; }
body.dark .post-card,body.dark .empty-state { background:#2b424e; color:#f4fbff; border-color:#6d8b9a; }
body.dark .badge,body.dark .count-chip { background:#365d75; color:#e4f8ff; }
body.dark .utility-bar { background:#2a404d; border-color:#526c7c; }
body.dark .utility-bar button,body.dark .utility-bar a { background:#304b5b; color:#f4faff; }
body.dark .site-header { background:linear-gradient(110deg,#2a4a63,#41466f); }
body.dark .site-nav a,body.dark .menu-button,body.dark .header-blog-label { color:#f1f7ff; }
body.dark .header-blog-label { background:#ffffff26; }
body.dark .search-row input { background:#2a414f; color:#f4fbff; }
@media(max-width:1180px) { .site-header{flex-wrap:wrap} .site-nav{width:100%;margin-inline-start:0;justify-content:center} }
@media(max-width:720px) {
  .site-header { flex-wrap:nowrap; }
  .menu-button { display:block; margin-inline-start:auto; }
  .site-nav { position:absolute; left:12px; right:12px; top:calc(100% + 2px); width:auto; padding:10px; flex-direction:column; align-items:stretch; background:#f4f7ff; border:1px solid #afc8ea; border-radius:14px; box-shadow:0 18px 32px #162f4d30; max-height:70vh; overflow-y:auto; }
  .site-nav a { color:#253c69; font-size:.91rem; padding:9px 12px; }
  body.dark .site-nav { background:#2f4054; }
  .grid { grid-template-columns:1fr; }
  .hero { padding:20px; }
  .hero:after { display:none; }
  .post-card { padding:14px; }
  .utility-bar { justify-content:flex-start; gap:6px; }
  .utility-bar label,.utility-bar select { font-size:.8rem; }
  .footer-columns { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
}
@media(max-width:370px) { .footer-brand img{width:54px;height:54px} .footer-columns h2{font-size:.72rem} .footer-columns a,.footer-columns p{font-size:.64rem} .hero h1{font-size:1.65rem} }

/* ========================================================================
   OFFICIAL EASYTUTORGUIDE LOGO — CONSOLIDATED RESPONSIVE SIZING
   ------------------------------------------------------------------------
   The header and footer use the EXISTING website logo image referenced in
   include/header.php and include/footer.php:
       /images/EasyTutorGuideLogo.webP
   No replacement logo, HTML changes, JavaScript or database edits needed.

   Larger logo sizes:
      Desktop (>1199px): header 116px  | footer 112px
      Tablet  (<=1199px): header 104px | footer 104px
      Mobile  (<=720px):  header 88px  | footer 90px
      Small   (<=390px):  header 78px  | footer up to 78px

   A navigation drawer starts on tablets to avoid long menu items pushing
   the larger logo outside the header. Existing blog.js controls the drawer.
   ======================================================================== */

:root {
  --etg-header-logo-size: 116px;
  --etg-footer-logo-size: 112px;
}

/* Allow the full logo to show without cropping or distortion. */
.site-header {
  min-height: 126px;
  column-gap: 10px;
  overflow: visible;
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
  line-height: 1;
}

.site-header .brand img {
  display: block;
  width: var(--etg-header-logo-size);
  height: var(--etg-header-logo-size);
  min-width: 0;
  max-width: none;
  object-fit: contain;
  object-position: center;
  flex: none;
  filter: drop-shadow(0 3px 6px rgba(37, 57, 107, .16));
}

/* Keep the footer logo larger, but within its first of three columns. */
.site-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
  vertical-align: middle;
}

.site-footer .footer-brand img {
  display: block;
  width: var(--etg-footer-logo-size);
  height: var(--etg-footer-logo-size);
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* Tablets and small laptops: the existing button controls a dropdown menu.
   Otherwise 13+ site links consume the width needed by the larger logo. */
@media (max-width: 1199px) {
  :root {
    --etg-header-logo-size: 104px;
    --etg-footer-logo-size: 104px;
  }

  .site-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 114px;
    gap: 10px;
    padding: 7px 16px;
  }

  .header-blog-label {
    flex: 0 0 auto;
  }

  .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-inline-start: auto;
    white-space: nowrap;
    min-height: 42px;
    padding: 8px 12px;
  }

  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 12px;
    top: calc(100% + 2px);
    left: 12px;
    right: 12px;
    z-index: 50;
    width: auto;
    margin: 0;
    padding: 12px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    max-height: min(75vh, 620px);
    overflow-y: auto;
    overflow-x: hidden;
    background: #f4f7ff;
    border: 1px solid #afc8ea;
    border-radius: 14px;
    box-shadow: 0 18px 32px rgba(22, 47, 77, .20);
  }

  .site-nav.open {
    display: flex;
  }

  .site-nav a {
    display: block;
    padding: 10px 12px;
    white-space: normal;
    font-size: .95rem;
    color: #253c69;
  }

  body.dark .site-nav {
    background: #2e4054;
    border-color: #60758f;
  }

  body.dark .site-nav a {
    color: #f0f7ff;
  }
}

/* Phones: logo is noticeably bigger without covering the menu button. */
@media (max-width: 720px) {
  :root {
    --etg-header-logo-size: 88px;
    --etg-footer-logo-size: 90px;
  }

  .site-header {
    min-height: 98px;
    padding: 7px 12px;
    gap: 7px;
  }

  .site-header .brand {
    padding: 1px 3px;
  }

  .header-blog-label {
    font-size: .62rem;
    letter-spacing: .08em;
    padding: 4px 6px;
  }

  .menu-button {
    font-size: .82rem;
    padding: 8px 10px;
  }

  .site-nav {
    inset-inline: 8px;
    left: 8px;
    right: 8px;
    max-height: min(72vh, 580px);
  }

  /* The footer remains three columns on mobile devices. */
  .footer-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}

/* Narrow phones: fit the real logo and controls on one row. */
@media (max-width: 390px) {
  :root {
    --etg-header-logo-size: 78px;
    --etg-footer-logo-size: 78px;
  }

  .site-header {
    min-height: 88px;
    padding-inline: 8px;
    gap: 4px;
  }

  .header-blog-label {
    font-size: .57rem;
    padding: 3px 5px;
  }

  .menu-button {
    font-size: .76rem;
    padding: 7px 7px;
  }

  .site-footer .footer-brand img {
    width: min(100%, var(--etg-footer-logo-size));
  }
}

/* Respect page direction when a visitor switches to an RTL translation. */
html[dir="rtl"] .site-footer .footer-brand img {
  object-position: right center;
}

/* Preserve accessible keyboard focus on every screen size. */
.site-header .brand:focus-visible,
.site-footer .footer-brand:focus-visible,
.menu-button:focus-visible {
  outline: 3px solid #176fc2;
  outline-offset: 4px;
}

/* ================================================================
   EasyTutorGuide Translator Attribution: "Powered by Google"
   Attribution is real HTML in include/header.php so it stays
   readable, keyboard accessible, and linked to Google Translate.
   The language selector remains a single vertical native dropdown.
   ================================================================ */
.utility-bar .translation-credit {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 6px 10px;
  border: 1px solid #c9dced;
  border-radius: 999px;
  color: #365476;
  background: #f5faff;
}
/* Override the generic toolbar-link button styling for this link. */
.utility-bar .translation-credit a,
body.dark .utility-bar .translation-credit a {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #165ca4;
  font-size: inherit;
  font-weight: 800;
  line-height: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.utility-bar .translation-credit a:hover,
.utility-bar .translation-credit a:focus-visible {
  color: #083e79;
}
body.dark .utility-bar .translation-credit {
  color: #edf5ff;
  background: #314b5c;
  border-color: #6f8fa5;
}
body.dark .utility-bar .translation-credit a,
body.dark .utility-bar .translation-credit a:hover,
body.dark .utility-bar .translation-credit a:focus-visible {
  color: #a2dbff;
}
@media (max-width: 480px) {
  /* Both dropdown and attribution wrap cleanly on narrow phones. */
  .utility-bar #language-picker { max-width: min(160px, 48vw); }
  .utility-bar .translation-credit { font-size: .72rem; padding: 5px 8px; }
}
/* Do not reverse English brand attribution in an RTL translation. */
html[dir="rtl"] .utility-bar .translation-credit { direction: ltr; }


/* ====== OCT 2026 BLOG DIRECTORY + BIG LOGO WHITE BRAND ROW ====== */
/* The menu is in row 1; the official logo lives in a full-width white row 2. */
.site-header{position:relative;display:block;padding:0;background:linear-gradient(100deg,#cde9ff 0%,#e1ddff 64%,#eee6ff 100%);border-bottom:1px solid #b3cbe9;min-height:0;z-index:25}
.nav-shell{max-width:1350px;margin:auto;padding:8px 16px;display:flex;gap:12px;align-items:center;min-height:56px}
.menu-title{font-weight:850;color:#233a63;white-space:nowrap;font-size:.96rem}
.site-nav{margin-inline-start:auto;width:auto;justify-content:flex-end;flex-wrap:wrap;gap:2px}
.site-nav a{color:#203e68;padding:6px 6px;font-size:.76rem;white-space:nowrap}
.site-nav .nav-new-post{color:#214f92;background:#ffffffc9;border:1px solid #aac6ee}
.brand-white-row{display:flex;align-items:center;gap:20px;padding:12px max(20px,calc((100vw - 1220px)/2));background:#fff;border-bottom:1px solid #dbe6f5;min-height:152px;box-shadow:0 2px 14px #1a467e0d}
.brand-white-row .large-brand{padding:0;background:transparent;border-radius:0;display:flex;flex:0 0 auto;align-items:center}
.brand-white-row .large-brand img{width:128px;height:128px;max-width:128px;object-fit:contain;filter:drop-shadow(0 3px 4px #173a6320)}
.brand-row-message{display:flex;flex-direction:column;gap:0;color:#2d416b;min-width:0}
.brand-row-message strong{font-size:clamp(1.2rem,2.4vw,1.8rem);line-height:1.25}
.brand-row-message span{color:#5c718d;font-size:.89rem}
.brand-new-post{margin-inline-start:auto;white-space:nowrap}
body.dark .brand-white-row{background:#f9fcff;color:#263b5a}
body.dark .brand-row-message{color:#263b5a}
body.dark .brand-row-message span{color:#536c82}
/* A single outlined translator box holds select AND Powered by Google. */
.translator-box{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 10px;border:1px solid #b6cdec;border-radius:11px;background:#f7faff;max-width:100%;min-width:0}
.translator-box label{font-weight:750;white-space:nowrap;color:#264877}
.translator-box select{width:auto;min-width:125px;max-width:165px;border-radius:7px;background:white;color:#243b5d}
.translator-box .translation-credit{display:inline-flex;gap:4px;white-space:nowrap;font-size:.76rem;color:#4a5973;border:0;background:transparent;padding:0}
.translator-box .translation-credit a{color:#175cab;font-weight:800;padding:0;border:0;background:none}
body.dark .translator-box{background:#304757;border-color:#6f8ea7}
body.dark .translator-box label,body.dark .translator-box .translation-credit{color:#f3f8ff}
body.dark .translator-box .translation-credit a{color:#a8d8ff}
/* Keyword, category and inclusive date range in one accessible responsive filter. */
.filter-panel{display:grid;grid-template-columns:minmax(160px,1.5fr) minmax(150px,1fr) minmax(125px,.75fr) minmax(125px,.75fr);gap:12px;align-items:end;margin:0 0 18px}
.filter-field{display:flex;flex-direction:column;min-width:0;gap:5px}
.filter-field label{font-size:.82rem;font-weight:750;color:var(--ink)}
.filter-field input,.filter-field select{width:100%;min-width:0;max-width:100%;padding:10px 11px;border:1px solid #b8cee5;border-radius:9px;background:var(--paper);color:var(--ink)}
.filter-buttons{display:flex;gap:8px;flex-wrap:wrap;grid-column:1/-1}
.filter-buttons .btn{padding:9px 15px}
.post-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.post-list>.post-card{margin:0;display:flex;flex-direction:column;min-width:0;border-left:4px solid #90b4e4}
.post-list .post-card .btn{align-self:start;margin-top:auto}
.blog-bottom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.form-page-card{max-width:930px;margin-inline:auto}
.two-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-page-card textarea{min-height:320px}
.form-page-card .checkbox-label{display:flex;gap:9px;align-items:flex-start;font-weight:500}
.form-page-card input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin-top:5px}
.compact-hero{max-width:930px;margin-inline:auto}
.article-body{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}
/* Do not allow long cards, dates, forms or buttons to produce sideways scrolling. */
.page-shell,.card,.site-footer,.nav-shell,.brand-white-row{min-width:0;max-width:100%}
@media(max-width:1190px){.nav-shell{flex-wrap:wrap}.site-nav{width:100%;margin-inline-start:0;justify-content:center}.filter-panel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){
 .nav-shell{flex-wrap:nowrap;position:relative}.site-nav{display:none;position:absolute;top:calc(100% + 1px);left:12px;right:12px;width:auto;z-index:35;flex-direction:column;align-items:stretch;background:#f4f7ff;border:1px solid #c5d5ed;border-radius:12px;max-height:70vh;overflow:auto}
 .site-nav.open{display:flex}.site-nav a{font-size:.91rem;padding:9px 12px}
 .menu-button{display:block;margin-inline-start:auto}
 .brand-white-row{min-height:107px;padding:10px 14px;gap:12px}
 .brand-white-row .large-brand img{width:92px;height:92px;max-width:92px}
 .brand-row-message strong{font-size:1.16rem}.brand-row-message span{font-size:.75rem}
 .brand-new-post{padding:7px 10px;font-size:.75rem}
 .filter-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .filter-keyword{grid-column:1/-1}.post-list,.blog-bottom-grid{grid-template-columns:1fr}
 .two-fields{grid-template-columns:1fr;gap:0}.form-page-card textarea{min-height:250px}
 .footer-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .translator-box{width:100%;justify-content:flex-start}
}
@media(max-width:410px){
 .brand-white-row{gap:8px}.brand-white-row .large-brand img{width:78px;height:78px;max-width:78px}
 .brand-new-post{font-size:.71rem;padding:7px 8px}.brand-row-message strong{font-size:1rem}
 .translator-box{gap:6px}.translator-box select{min-width:112px;max-width:145px}
 .filter-panel{grid-template-columns:1fr}.filter-keyword{grid-column:auto}
}
/* Correct dark mode text visibility for article cards, filters and forms. */
body.dark .post-list>.post-card{background:#293e4d;color:#f3faff}
body.dark .filter-field input,body.dark .filter-field select{background:#304b5b;color:#f1f7ff;border-color:#628098}
body.dark .brand-white-row{background:#f9fcff}