/* app.css - modern layout for BigTopApps (replaces MDL layout + material.indigo-light_blue.min.css)
   Load AFTER styles.css */

:root {
  --drawer-w: 280px;
  --header-h: 56px;
  --bg: #f5f5f5;
  --surface: #fff;
  --ink: #333;
  --drawer-bg: #111827;
  --drawer-ink: #f9fafb;
  --drawer-link-bg: #1f2937;
  --accent: #008cba;
  --radius: 4px;
  --shadow: 0 2px 4px rgba(0, 0, 0, .14), 0 3px 4px rgba(0, 0, 0, .12), 0 1px 5px rgba(0, 0, 0, .2);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
}
img { max-width: 100%; height: auto; }

/* ---------- Layout shell ---------- */
.app-layout { display: flex; min-height: 100vh; }

.app-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--drawer-w);
  background: var(--drawer-bg);
  color: var(--drawer-ink);
  overflow-y: auto;
  z-index: 101;
  transition: transform .3s ease-in-out;
}

.app-body {
  flex: 1;
  min-width: 0;
  margin-left: var(--drawer-w);
  display: flex;
  flex-direction: column;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: #f5f5f5;
  color: #555;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}
.app-title { font-size: 20px; font-weight: 500; margin: 0; }
.header-spacer { flex: 1; }

.icon-btn {
  background: none;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}
.icon-btn:hover { background: rgba(0, 0, 0, .08); }
.hamburger-btn { display: none; }

/* header dropdown */
.menu-wrap { position: relative; }
.dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 240px;
  margin: 4px 0 0;
  padding: 8px 0;
  list-style: none;
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.dropdown.open { display: block; }
.dropdown li { display: block; background: none; border-radius: 0; padding: 10px 16px; font-size: 14px; }
.dropdown li:hover { background: #eee; }

/* ==========================================
   BASE & DESKTOP LAYOUT (Default)
   ========================================== */
.app-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

/* Card Styling (Replaces MDL Cards & Shadows) */
.main-top-box, 
.content-card {
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.main-top-box {
    padding: 16px;
    margin-bottom: 16px;
}

/* Flex Container for Grid Rows */
.content-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

/* Base Column / Card Layout */
.content-card {
    flex: 1 1 0px; /* Distributes space evenly in 3-column & 2-column layouts */
    min-width: 0;   /* Prevents overflow from large dynamic elements/iFrames */
}

/* Helper Buttons */
.simple-button {
    display: inline-block;
    padding: 6px 12px;
    background-color: #f1f1f1;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    margin: 4px 0;
    transition: background-color 0.2s ease;
}

.simple-button:hover {
    background-color: #e2e2e2;
}


/* ==========================================
   TABLET RESPONSIVE STYLES (768px - 1024px)
   ========================================== */
@media screen and (max-width: 1024px) {
    .app-main {
        width: 95%;
        max-width: 900px;
        margin: 0 auto;
        padding: 16px 12px;
    }

    .content-row {
        gap: 12px;
        margin-bottom: 12px;
    }

    /* 3-column rows become a 2-column grid or stack depending on layout fit */
    .content-card {
        flex: 1 1 calc(50% - 12px); /* Forces items into 2 columns on tablets */
    }

    /* Keep single wide-card rows spanning full width */
    .content-card:only-child {
        flex: 1 1 100%;
    }
}


/* ==========================================
   MOBILE RESPONSIVE STYLES (Under 768px)
   ========================================== */
@media screen and (max-width: 767px) {
    .app-main {
	    width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 8px;
    }

    .content-row {
        flex-direction: column; /* Stacks all grid cards vertically */
        gap: 12px;
        margin-bottom: 12px;
    }

    .content-card {
        flex: 1 1 100%; /* Spans full width on phone screens */
        width: 100%;
    }

    /* Handles wide iFrames or Beehiiv embed on smaller mobile viewports */
    .beehiiv-embed, 
    iframe, 
    ins.adsbygoogle {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Prevents horizontal scrolling issues caused by long links/text */
    .content-card p, 
    .content-card center {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}


.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 100;
}

/* ---------- Drawer content ---------- */
.drawer-header { padding: 16px; text-align: center; }
.drawer-header img { width: 200px; height: 200px; display: block; margin: 0 auto 8px; }
.drawer-header form { margin-bottom: 12px; }
.drawer-header input[type="text"] { max-width: 100%; padding: 6px 8px; }

.drawer-nav { display: flex; flex-direction: column; background: var(--drawer-link-bg); }
.drawer-nav a {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 16px;
  color: rgba(255, 255, 255, .7);
  font-weight: 500;
  text-decoration: none;
}
.drawer-nav a:hover { background: #00bcd4; color: #384850; }
.drawer-nav .nav-ico { width: 24px; text-align: center; opacity: .6; }

.drawer-extra { text-align: center; padding: 10px; }

/* ---------- Content grid (replaces mdl-grid / mdl-cell) ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.card {
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 10px;
  min-width: 0;
}
.span-12 { grid-column: span 12; }
.span-6  { grid-column: span 6; }
.span-4  { grid-column: span 4; }

.center { text-align: center; }

/* Undo the global `ul { display:grid }` from styles.css for UI lists */
.drawer-nav, .dropdown { display: flex; }
.dropdown:not(.open) { display: none; }
.dropdown.open { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .span-4 { grid-column: span 6; }
}

@media (max-width: 768px) {
  .hamburger-btn { display: inline-block; }
  .app-drawer { transform: translateX(-100%); }
  .app-drawer.open { transform: translateX(0); }
  .app-body { margin-left: 0; }
  .drawer-overlay.open { display: block; }
  .span-6, .span-4 { grid-column: span 12; }
  body.drawer-open { overflow: hidden; }
}