@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  --red:#c62828; /* main accent */
  --red-dark:#8b1e1e;
  --black:#000000;
  --white:#f3f4f6; /* page background (light grey) */
  --card:#ffffff; /* surfaces/cards remain white */
}

/* Compact layout: smaller base font and reduced spacing, responsive */
html{font-size:clamp(13px,1.5vw,16px) !important}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial !important;background:var(--white) !important;color:var(--black) !important;margin:0;line-height:1.45}

/* Ensure card/surface backgrounds remain white against the grey page background */
.bg-white, .card, .catalog-shell, .sidebar-card, .issue-card, .deadline-card, .service { background-color: var(--card) !important }

.shell{width:80% !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important;padding:12px 0 28px !important}
.mx-auto.max-w-7xl, .mx-auto {width:80% !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important}
.layout{gap:14px !important;padding:0 14px !important}
/* When no sidebar is present, make layout single column */
.layout.no-sidebar{grid-template-columns:1fr !important}
.main-column{padding:0 !important}

/* Hero reduced size */
.hero{min-height:360px !important}
.hero-copy{padding:28px 18px !important}
.hero h1{font-size:clamp(1.6rem,3.2vw,2.6rem) !important;line-height:1.06 !important;font-weight:800 !important;margin-bottom:8px !important}
.hero p{font-size:clamp(0.88rem,1.2vw,1rem) !important;line-height:1.45 !important;font-weight:600 !important;margin-bottom:8px !important}

/* Buttons smaller */
.btn{min-height:36px !important;padding:0 12px !important;font-size:clamp(0.7rem,1.2vw,0.9rem) !important}
.btn-dark{background:var(--red) !important;color:var(--white) !important}
.btn-light{background:var(--white) !important;color:var(--black) !important;border:1px solid rgba(0,0,0,0.06) !important}

/* Headings and text sizes */
h1,h2,h3,h4{color:var(--black) !important;font-weight:800 !important}
h1{font-size:clamp(1.4rem,3.6vw,2.6rem) !important}
h2{font-size:clamp(1.05rem,2.2vw,1.6rem) !important}
h3{font-size:clamp(0.95rem,1.6vw,1.2rem) !important}
p,li,label,button,input,textarea{font-size:clamp(12px,1.1vw,15px) !important}

/* Improve readability with slightly larger line heights for content */
p, li { line-height: 1.5 !important }

/* Cards and surfaces smaller padding */
.card,.catalog-shell,.sidebar-card,.deadline-card,.issue-card,.service{padding:14px !important;border-radius:10px !important}
.catalog-cover{height:150px !important}
.catalog-item{padding:10px !important;border-radius:10px !important}

/* Tabs and controls */
.tabs{gap:6px !important;padding:3px !important}
.tab{padding:6px 10px !important;font-size:0.72rem !important}

/* Reduce stat sizes */
.stat{padding:8px 12px !important;min-width:110px !important}

/* Compact forms */
input,textarea,select{padding:8px !important;font-size:clamp(12px,1vw,14px) !important;border-radius:8px !important}

/* Dots, arrows, icons smaller */
.dots span{width:8px !important;height:8px !important}
.arrow{width:32px !important;height:32px !important}

/* Ensure the hero and catalog text wraps naturally on narrow content widths */
.hero-copy-inner, .journal-content, .catalog-item { word-wrap: break-word; hyphens: auto }

/* Mobile menu tweaks */
div[data-mobile-menu]{background:var(--white) !important;border-top:1px solid rgba(0,0,0,0.06) !important}

/* Color scheme: red, white, black */
body, .muted, .text-slate-500, .text-slate-600, .text-slate-700{color:var(--black) !important}
a, a:link{color:var(--black)}
a:hover{color:var(--red)}
.tag, .catalog-tag, .issue-chip, .journal-badge{background:var(--red) !important;color:var(--white) !important}
.meta-card{background:rgba(198,40,40,0.08) !important}

/* Ensure important overrides for Tailwind utility classes */
[class*="text-slate-"]{color:inherit !important}
[class*="bg-slate-"]{background-color:inherit !important}

/* Cart badge */
[data-cart-count]{height:1.4rem !important;min-width:1.4rem !important;padding:0 .35rem !important;font-size:11px !important;border-radius:999px !important;background:var(--black) !important;color:var(--white) !important}

/* Reduce shadows for compact look */
.shadow-xl,.shadow-2xl{box-shadow:0 6px 18px rgba(0,0,0,0.06) !important}

/* Small utility tweaks */
.rounded-2xl{border-radius:10px !important}
.rounded-xl{border-radius:8px !important}

/* Footer spacing */
footer{margin-top:1.5rem !important;padding:12px 14px !important}

/* Keep hero images contained smaller */
.hero-slide img{object-fit:contain;height:100% !important}

/* Banner / hero improvements: ensure perfect cover and readable overlay text */
/* Make hero full-width (edge-to-edge) while keeping inner content centered */
.hero{position:relative;overflow:hidden;display:block;width:100vw;left:50%;margin-left:-50vw;right:50%;margin-right:-50vw}
.hero-slide{position:relative;width:100%;height:100%}
.hero-slide img{width:100% !important;height:100% !important;object-fit:contain !important;object-position:center center !important;display:block}

/* Responsive hero height: taller on desktop, compact on small screens */
.hero{min-height:40vh !important}
@media(min-width:768px){
  .hero{min-height:50vh !important}
}
@media(min-width:1100px){
  .hero{min-height:60vh !important}
}

/* Ensure overlay copy sits above image and text is readable */
.hero-copy{position:relative;z-index:3;color:var(--white) !important}
.hero-copy h1, .hero-copy p{color:var(--white) !important;text-shadow:0 6px 18px rgba(0,0,0,0.45) !important}

/* Limit width of hero copy so text lines remain comfortable */
.hero-copy-inner{max-width:60ch !important}

/* Keep hero copy content centered and constrained inside the full-bleed banner */
.hero-copy-inner{width:80%;max-width:1100px;margin-left:auto;margin-right:auto}

@media (max-width: 768px) {
  .hero{left:0;margin-left:0;margin-right:0;width:100%}
  .hero-copy-inner{width:95%}
}

/* Also ensure full-bleed hero up to 820px (covers slightly larger phones/tablets) */
@media (max-width:820px){
  body{overflow-x:hidden}
  .hero{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;max-width:100vw;box-shadow:none}
  .hero-slider, .hero-slide{min-height:320px}
  .hero-slide img{width:100vw;height:100%;object-fit:contain;display:block}
  .hero-copy{padding-left:20px;padding-right:20px}
}

/* Prevent horizontal scroll due to full-bleed technique */
body{overflow-x:hidden}

/* Sidebar styles removed (no sidebar in layout) */


/* End compact red/white/black theme */