/* Honk Front-End Styles - SCOPED FOR WORDPRESS */
/* v1.0.80 - Google Fonts Inter + MLA Lookup */
/* All styles now scoped to .honk-app container */

/* Import Google Fonts - Inter (Regular 400, Italic, Semi-Bold 600, Bold 700) */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,600;0,700;1,400&display=swap');

.honk-app {
  /* CRITICAL POSITIONING FIXES - Override ALL theme positioning */
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  max-width: none !important;
  width: 100% !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  
  /* Root-level variables scoped to container */
  --gap:12px; --radius:14px; --border:#d9d9d9; --muted:#6b7280; --bg:#ffffff; --ink:#111827; --ink-2:#374151; --accent:#84cc16; --shadow:0 8px 28px rgba(0,0,0,.06);
  --green:#22c55e; --green-700:#16a34a;
  --options-bg:#f8fafc; --options-border:#e2e8f0;
  --blue:#60a5fa; --blue-hover:#3b82f6;
  
  /* Base container styles (was body) */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color:var(--ink);
  background:linear-gradient(180deg,#f8fafc 0,#ffffff 140px) !important; /* Force gradient */
  padding:24px 16px;
  box-sizing:border-box;
  min-height:400px;
}

/* Mobile: Remove horizontal padding */
@media (max-width:900px){
  .honk-app{
    padding:24px 8px !important;
    overflow-x: hidden !important;
  }
}

.honk-app *{box-sizing:border-box}

.honk-app .honk-wrap{
  max-width:1200px; 
  margin:0 auto; 
  padding:0;
  background:transparent !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Title - H1 tag with card h3 font styling + minimum height */
.honk-app .title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  min-height:80px;
  line-height:1.1;
  padding-top:5px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:1.3em;
  font-weight:700;
  letter-spacing:.1px;
}

/* Title icon - DOUBLED to 60px */
.honk-app .title-icon{
  width:60px;
  height:60px;
  margin-right:10px;
  display:inline-block;
  vertical-align:middle;
  color:transparent;
}

/* Firefox fix - prevent ::before pseudo-element from showing -moz-alt-content */
.honk-app .title-icon::before,
.honk-app .title-icon::after{
  content:none !important;
  display:none !important;
}

.honk-app .sub{margin:0 0 0 16px; color:var(--ink-2); font-size:14px;}

/* Top dropdown bar */
.honk-app .bar{
  display:flex;
  align-items:center;
  gap:100px;
  margin:0 0 12px;
  padding:0 10px;
  background:#fff !important;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.honk-app .select-wrap{
  position:relative; display:inline-block;
}
.honk-app .bar select{
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  font:inherit; color:var(--ink); background:#f8fafc;
  border:1px solid var(--border); border-radius:10px;
  padding:2px 38px 2px 12px;
  background-image:none !important;
  cursor:pointer;
}
.honk-app .bar select::-ms-expand {
  display: none; /* Hide arrow in IE10/11 */
}
.honk-app .select-arrow{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:#475569; font-size:24px; line-height:1;
}

/* Panels */
.honk-app .panels{
  display:grid;
  grid-template-columns: minmax(280px, 400px) 1fr;
  gap: var(--gap);
}
@media (max-width:900px){
  .honk-app .panels{ grid-template-columns:1fr; }
}

.honk-app .panel{
  background:var(--bg) !important;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* LEFT: Buttons list */
.honk-app .left{ padding:12px; }

.honk-app #honk-buttons{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
  /* Prevent flash of unstyled content */
  visibility: hidden;
  animation: fadeInButtons 0.1s ease-in 0.05s forwards;
}

@keyframes fadeInButtons {
  from { visibility: hidden; opacity: 0; }
  to { visibility: visible; opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mobile: 2 buttons per row */
@media (max-width:900px){
  .honk-app .left{ 
    padding:6px !important;
  }
  .honk-app #honk-buttons{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* CONVEX BUTTON EFFECT */
.honk-app .btn{
  display:inline-flex; align-items:center; justify-content:flex-start;
  gap:10px;
  text-align:left; white-space:normal;
  border:1px solid #cbd5e1;
  border-bottom:2px solid #94a3b8;
  border-radius:10px;
  background:linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  color:#0f172a !important; cursor:pointer;
  padding:10px 12px;
  line-height:1.25;
  min-height:52px;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select:none;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase !important;
  /* Prevent unstyled text flash */
  opacity: 0;
  animation: fadeIn 0.15s ease-in 0.08s forwards;
  box-shadow: 
    0 1px 2px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
.honk-app .btn:hover{
  background:linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  transform:translateY(-1px);
  box-shadow:
    0 4px 6px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);
  border-color:#94a3b8;
  border-bottom-color:#64748b;
  color:#0f172a !important;
}
.honk-app .btn[aria-pressed="true"]{
  background:linear-gradient(180deg, #f7fee7 0%, #d9f99d 100%);
  border-color:#84cc16;
  border-bottom-color:#65a30d;
  box-shadow:
    0 2px 4px rgba(132,204,22,0.15),
    inset 0 1px 0 rgba(255,255,255,0.4);
  color:#0f172a !important;
}

/* Force black text on ALL button states - override theme styles */
.honk-app .btn,
.honk-app .btn:hover,
.honk-app .btn:focus,
.honk-app .btn:active,
.honk-app .btn[aria-pressed="true"],
.honk-app .btn[aria-pressed="true"]:hover,
.honk-app .btn[aria-pressed="true"]:focus {
  color: #0f172a !important;
}

/* Button icons */
.honk-app .btn .icon{
  flex:0 0 auto;
  width:30.6px; height:30.6px;
  object-fit:contain; opacity:.95;
  transition: transform .2s ease;
}
.honk-app .btn:hover .icon{
  transform: scale(1.05);
}
@media (max-width:900px){
  .honk-app .btn{ min-height:48px; padding:10px 12px; font-size:15px; }
  .honk-app .btn .icon{ width:27.2px; height:27.2px; }
}

/* RIGHT: Content */
.honk-app .data{ padding:16px; min-height:340px; }
.honk-app .divider{ height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent); margin:10px 0; }

.honk-app .honk-content{ display:grid; gap:10px; }
.honk-app .card{
  border:none;
  border-radius:12px;
  padding:9px 10px 10px 10px;
  background:transparent !important;
  position:relative;
}

/* Enforce Inter font on all content - override inline styles from paste */
.honk-app .card-body,
.honk-app .card-body *,
.honk-app .card p,
.honk-app .card p *,
.honk-app .card div,
.honk-app .card div *,
.honk-app .card span,
.honk-app .card li,
.honk-app .card strong,
.honk-app .card em,
.honk-app .card b,
.honk-app .card i {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Heading styles in content cards */
.honk-app .card-body h1,
.honk-app .card-body h2,
.honk-app .card-body h3,
.honk-app .card-body h4,
.honk-app .card-body h5,
.honk-app .card-body h6 {
  font-weight: 700;
  margin: 1em 0 0.5em 0;
  line-height: 1.3;
  color: var(--ink);
}

.honk-app .card-body h1:first-child,
.honk-app .card-body h2:first-child,
.honk-app .card-body h3:first-child,
.honk-app .card-body h4:first-child,
.honk-app .card-body h5:first-child,
.honk-app .card-body h6:first-child {
  margin-top: 0;
}

.honk-app .card-body h1 { font-size: 1.75em; }
.honk-app .card-body h2 { font-size: 1.5em; }
.honk-app .card-body h3 { font-size: 1.3em; }
.honk-app .card-body h4 { font-size: 1.15em; }
.honk-app .card-body h5 { font-size: 1.05em; }
.honk-app .card-body h6 { font-size: 1em; font-weight: 600; }

/* Link styling in content cards */
.honk-app .card-body a {
  color: #0054a6;
  text-decoration: underline;
}

.honk-app .card-body a:hover {
  color: #003d79;
}

/* Horizontal rule spacing in content cards */
.honk-app .card-body hr {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  border: none !important;
  border-top: 1px solid #d4d4d4 !important;
}

/* Paragraph spacing in category content */
.honk-app .card p,
.honk-app .card-body > div,
.honk-app .card-body > ul,
.honk-app .card-body > ol {
  margin: 0 0 1.2em 0;
}

.honk-app .card p:last-child,
.honk-app .card-body > div:last-child,
.honk-app .card-body > ul:last-child,
.honk-app .card-body > ol:last-child {
  margin-bottom: 0;
}

/* List item spacing in category content */
.honk-app .card-body ul li,
.honk-app .card-body ol li {
  margin-bottom: 1em;
}

.honk-app .card-body ul li:last-child,
.honk-app .card-body ol li:last-child {
  margin-bottom: 0;
}
.honk-app .card h3{
  margin:0 0 6px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:18px;
  font-weight:700;
}
.honk-app .meta{ color:var(--muted); font-size:13px; margin:0 0 6px }

.honk-app .card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 6px;
}

.honk-app .highlighter-toggle{
  border:none;
  background:transparent;
  padding:2px;
  cursor:pointer;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: all .15s ease;
}
.honk-app .highlighter-toggle:hover{
  background:rgba(255,235,59,0.2);
  transform: scale(1.1);
}
.honk-app .highlighter-toggle.active{
  background:rgba(255,235,59,0.6);
}
.honk-app .highlighter-icon{
  width:20px;
  height:20px;
  object-fit:contain;
  opacity:0.9;
}

.honk-app mark.appetizer-highlight{
  background-color:yellow;
  padding:0 1px;
}

/* Notes */
.honk-app .notes-box{
  width:100%;
  min-height:160px;
  resize:vertical;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  font:inherit;
  line-height:1.45;
  color:var(--ink);
  background:#fff !important;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.honk-app .notes-box:focus{ 
  border-color:#94a3b8; 
  box-shadow:0 0 0 3px rgba(132,204,22,.12); 
}

.honk-app .notes-actions{
  margin-top:8px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.honk-app .btn-save{
  appearance:none; border:1px solid transparent; border-radius:10px;
  background:var(--green); color:#fff; padding:8px 14px; cursor:pointer;
  font-size:14px; line-height:1.2;
  box-shadow:0 2px 4px rgba(34,197,94,.2);
  transition: all .2s ease;
}
.honk-app .btn-save:hover{ 
  background:var(--green-700); 
  transform: translateY(-1px);
  box-shadow:0 4px 8px rgba(34,197,94,.3);
}
.honk-app .notes-hint{ color:var(--muted); font-size:12px; margin-left:2px; }

/* COLLAPSIBLE OPTIONS BAR */
.honk-app .options-bar{
  margin:14px 0 0;
  position:relative;
  background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border:1px solid var(--options-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  min-height:48px;
  transition:all .3s ease;
}

/* OPTIONS TOGGLE BUTTON - SQUARE, FIXED LEFT POSITION */
.honk-app .options-toggle{
  position:absolute;
  left:24px;
  top:5px;
  appearance:none;
  border:1px solid #cbd5e1;
  border-bottom:2px solid #94a3b8;
  border-radius:10px;
  background:linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  color:#0f172a;
  cursor:pointer;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.5);
  z-index:10;
  width:38px;
  height:38px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.honk-app .options-toggle:hover{
  background:linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color:#94a3b8;
  border-bottom-color:#64748b;
  transform:translateY(-1px);
  box-shadow:
    0 4px 6px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
.honk-app .options-toggle:active{
  background:linear-gradient(180deg, #e0f2fe 0%, #bfdbfe 100%);
  border-color:#64748b;
  border-bottom-color:#475569;
}

/* OPTIONS ICON */
.honk-app .options-icon{
  width:24px;
  height:24px;
  object-fit:contain;
  opacity:0.9;
  transition: transform .2s ease;
}
.honk-app .options-toggle:hover .options-icon{
  transform: scale(1.05);
  opacity:1;
}

/* Hide any text/arrow inside button */
.honk-app .options-toggle .arrow{
  display:none;
}

.honk-app .options-panel{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
  padding:16px 24px 16px 80px;
  transition:all .3s ease;
  background:transparent !important;
}

.honk-app .options-panel[hidden]{
  display:none;
}

.honk-app .options-section{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  flex:1;
}

.honk-app .section-title{
  font-size:11px;
  font-weight:600;
  color:var(--ink-2);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:4px;
  text-align:center;
  width:100%;
  align-self:flex-start;
}

.honk-app .section-controls{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
}

.honk-app .option-checkbox{
  display:inline-flex;
  gap:6px;
  align-items:center;
  cursor:pointer;
  font-size:13px;
  color:#fff;
  padding:9px 16px;
  border-radius:8px;
  transition:all .2s ease;
  user-select:none;
  white-space:nowrap;
  background:linear-gradient(180deg, #93c5fd 0%, #60a5fa 100%);
  border:1px solid #3b82f6;
  border-bottom:2px solid #2563eb;
  box-shadow:
    0 1px 2px rgba(0,0,0,.03),
    inset 0 1px 0 rgba(255,255,255,0.3);
  min-width:auto;
  justify-content:center;
  height:38px;
  line-height:1;
}
.honk-app .option-checkbox:hover{
  background:linear-gradient(180deg, #7cb8f9 0%, #3b82f6 100%);
  border-color:#2563eb;
  border-bottom-color:#1d4ed8;
  transform:translateY(-1px);
  box-shadow:
    0 2px 4px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,0.4);
}
.honk-app .option-checkbox input[type="checkbox"]{
  width:16px;
  height:16px;
  cursor:pointer;
}

.honk-app .option-btn{
  appearance:none;
  border:1px solid #3b82f6;
  border-bottom:2px solid #2563eb;
  border-radius:8px;
  background:linear-gradient(180deg, #93c5fd 0%, #60a5fa 100%);
  color:#fff;
  padding:9px 16px;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  line-height:1;
  transition: all .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  box-shadow:
    0 1px 2px rgba(0,0,0,.03),
    inset 0 1px 0 rgba(255,255,255,0.3);
  white-space:nowrap;
  min-width:120px;
  height:38px;
}
.honk-app .option-btn:hover{
  background:linear-gradient(180deg, #7cb8f9 0%, #3b82f6 100%);
  border-color:#2563eb;
  border-bottom-color:#1d4ed8;
  transform:translateY(-1px);
  box-shadow:
    0 2px 4px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Make icons in option buttons 50% larger */
.honk-app .option-btn .btn-icon{
  font-size:29.25px;
  position:relative;
  top:-3px;
}

/* Reset Clear Highlights icon to normal size */
.honk-app #clearHighlightsBtn .btn-icon{
  font-size:13px;
  top:0;
}

.honk-app .save-note{
  font-size:11px;
  color:var(--muted);
  padding:4px 0;
  margin-top:2px;
  text-align:center;
  width:100%;
}

/* Medium screens */
@media (max-width:1150px){
  .honk-app .options-panel{
    gap:20px;
    padding:16px 16px 16px 100px;
  }
  .honk-app .section-controls{
    flex-wrap:wrap;
  }
}

/* NEW: Tablet/Narrow Desktop - 992px and below */
@media (max-width:992px){
  .honk-app{
    padding:24px 8px !important; /* Narrower horizontal margins */
  }
  
  .honk-app .sub{
    display:none !important; /* Hide subtitle text */
  }
  
  .honk-app .panels{
    grid-template-columns:1fr !important; /* Stack panels vertically */
  }
  
  .honk-app #honk-buttons{
    grid-template-columns:1fr !important; /* Single column buttons */
  }
  
  .honk-app .left{
    padding:12px; /* Restore normal padding for stacked layout */
  }
}

/* Mobile responsive */
@media (max-width:900px){
  .honk-app{
    padding:24px 0 !important; /* Remove all horizontal padding on smallest screens */
  }
  
  .honk-app .options-bar{
    min-height:52px;
  }
  
  .honk-app .options-toggle{
    position:absolute;
    top:7px;
    left:12px;
    transform:none;
  }
  .honk-app .options-toggle:hover{
    transform:translateY(-1px);
  }
  
  .honk-app .options-panel{
    flex-direction:column;
    gap:16px;
    padding:16px;
    padding-top:54px;
  }
  
  .honk-app .options-section{
    width:100%;
    align-items:center;
    border-bottom:1px solid var(--options-border);
    padding-bottom:12px;
  }
  .honk-app .options-section:last-child{
    border-bottom:none;
    padding-bottom:0;
  }
  .honk-app .section-controls{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }
  .honk-app .option-checkbox{
    width:auto;
    justify-content:center;
  }
  .honk-app .option-btn{
    width:auto;
    max-width:200px;
  }
  .honk-app .option-checkbox[for="hoverToggle"]{ 
    display:none; 
  }
  
  .honk-app .left{ 
    padding:6px !important; /* Tighter padding on mobile */
  }
  .honk-app #honk-buttons{
    grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on mobile */
  }
}

/* BRANDING PANEL - Updated v1.0.80 - More resilient against theme interference */
.honk-app .branding-panel{
  margin:8px 0 0;
  padding:10px 18px;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px;
  background:#fff !important;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
}

/* Left side: Icon + "Honk by signsofunrest.ca 2026" */
.honk-app .brand-left{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px;
  font-size:13px;
  color:var(--ink-2);
  padding-left:11px;
  white-space:nowrap;
  flex-shrink:0 !important;
  margin-left:0 !important;
  margin-right:auto !important;
}

.honk-app .brand-icon{
  width:35px;
  height:35px;
  object-fit:contain;
  opacity:0.95;
  flex-shrink:0;
  margin-left:-3px;
  color:transparent;
}

/* Center: Site/Owner Name from settings */
.honk-app .brand-center{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  text-align:center !important;
  font-size:13px;
  color:var(--ink-2);
  white-space:nowrap;
  pointer-events:none;
}

/* Right side: Maple Icon + "Made in Canada" */
.honk-app .brand-right{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px;
  font-size:13px;
  color:var(--ink-2);
  white-space:nowrap;
  padding-right:11px;
  flex-shrink:0 !important;
  margin-left:auto !important;
  margin-right:0 !important;
  justify-self:flex-end !important;
}

.honk-app .maple-icon{
  width:35px;
  height:35px;
  object-fit:contain;
  opacity:0.95;
  flex-shrink:0;
  color:transparent;
}

/* Mobile responsive */
@media (max-width:900px){
  .honk-app .branding-panel{
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:12px;
    padding:12px 18px;
    position:static !important;
  }

  .honk-app .brand-left{
    padding-left:0;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .honk-app .brand-right{
    padding-right:0;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .honk-app .brand-center{
    position:static !important;
    transform:none !important;
    left:auto !important;
    order:-1;
    width:100%;
    pointer-events:auto;
  }
}

.honk-app .sr-only{position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(50%);clip:rect(0 0 0 0);overflow:hidden}

/* v1.0.71: MP Lookup widget - CRITICAL COLOR FIXES */
.honk-app #mp-lookup{
  margin-top:12px;
  padding-top:8px;
  border-top:1px solid var(--border);
  max-width:480px;
  line-height:1.5;
}
.honk-app #mp-lookup label{
  font-weight:600;
  display:block;
  margin-bottom:4px;
  color:#111827 !important;
}
.honk-app #mp-lookup input[type="text"]{
  padding:0.4rem 0.5rem;
  font-size:1rem;
  width:100%;
  max-width:260px;
  box-sizing:border-box;
  margin-top:0.25rem;
  margin-right:0.5rem;
  display:inline-block;
  color:#111827 !important;
  background:#ffffff !important;
  border:1px solid var(--border);
}
.honk-app #mp-lookup button{
  padding:0.45rem 0.9rem;
  font-size:0.95rem;
  cursor:pointer;
  margin-top:0.25rem;
  display:inline-block;
  background:#60a5fa !important;
  color:#ffffff !important;
  border:1px solid #3b82f6 !important;
  border-radius:8px;
  transition:all .2s ease;
}
.honk-app #mp-lookup button:hover{
  background:#3b82f6 !important;
  transform:translateY(-1px);
}
.honk-app #mp-result{
  margin-top:0.75rem;
  font-size:0.95rem;
  color:#111827 !important;
}

/* v1.0.80: MLA Lookup widget - Provincial/Territorial Representatives */
.honk-app #mla-lookup{
  margin-top:12px;
  padding-top:8px;
  border-top:1px solid var(--border);
  max-width:480px;
  line-height:1.5;
}
.honk-app #mla-lookup label{
  font-weight:600;
  display:block;
  margin-bottom:4px;
  color:#111827 !important;
}
.honk-app #mla-lookup select{
  padding:0.4rem 0.5rem;
  font-size:1rem;
  width:100%;
  max-width:260px;
  box-sizing:border-box;
  margin-top:0.25rem;
  margin-right:0.5rem;
  display:inline-block;
  color:#111827 !important;
  background:#ffffff !important;
  border:1px solid var(--border);
  border-radius:4px;
  cursor:pointer;
}
.honk-app #mla-lookup input[type="text"]{
  padding:0.4rem 0.5rem;
  font-size:1rem;
  width:100%;
  max-width:260px;
  box-sizing:border-box;
  margin-top:0.25rem;
  margin-right:0.5rem;
  display:inline-block;
  color:#111827 !important;
  background:#ffffff !important;
  border:1px solid var(--border);
}
.honk-app #mla-lookup button{
  padding:0.45rem 0.9rem;
  font-size:0.95rem;
  cursor:pointer;
  margin-top:0.25rem;
  display:inline-block;
  background:#60a5fa !important;
  color:#ffffff !important;
  border:1px solid #3b82f6 !important;
  border-radius:8px;
  transition:all .2s ease;
}
.honk-app #mla-lookup button:hover{
  background:#3b82f6 !important;
  transform:translateY(-1px);
}
.honk-app #mla-result{
  margin-top:0.75rem;
  font-size:0.95rem;
  color:#111827 !important;
}

/* Accessible focus outlines */
.honk-app button:focus-visible,
.honk-app [role="button"]:focus-visible,
.honk-app select:focus-visible,
.honk-app input[type="text"]:focus-visible,
.honk-app input[type="checkbox"]:focus-visible,
.honk-app textarea:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Mobile header 2x2 grid - 932px and below */
@media (max-width:932px){
  /* SHOW subtitle again on mobile 2x2 grid */
  .honk-app .sub{
    display:block !important;
  }
  
  /* Top bar becomes 2x2 grid */
  .honk-app .bar{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    align-items:center;
    gap:8px;
    padding:6px 10px;
  }
  .honk-app .bar .title{
    grid-column:1/2;
    grid-row:1/2;
    margin:0;
  }
  .honk-app .bar .sub{
    /* Subtitle already hidden from 992px breakpoint */
    grid-column:2/3;
    grid-row:1/2;
    margin:0;
    text-align:right;
    font-size:13px;
  }
  .honk-app .bar .select-wrap{
    grid-column:1/3;
    grid-row:2/3;
    width:100%;
  }
  .honk-app .bar select{
    width:100%;
  }
  .honk-app .title-icon{
    width:60px;
    height:60px;
    margin-right:8px;
  }
}

@media (max-width:932px) and (orientation: landscape){
  .honk-app,
  .honk-app .bar,
  .honk-app .title,
  .honk-app .sub,
  .honk-app #honk-buttons,
  .honk-app .buttons-grid,
  .honk-app .card,
  .honk-app .card-body,
  .honk-app .options-bar,
  .honk-app .branding-panel{
    font-size:0.8em;
  }
}

/* Keep button text black when clicked/active - SCOPED TO HONK ONLY */
.honk-app .btn.active,
.honk-app .btn:active,
.honk-app .btn.active:hover,
.honk-app .btn:active:hover {
  color: #000 !important;
}

/* Reduce button text size on mobile/narrow screens - SCOPED TO HONK ONLY */
@media (max-width: 932px) {
  .honk-app .btn {
    font-size: 11px !important;
  }
}

/* Reduce outer margins on mobile for tighter layout */
@media (max-width: 932px) {
  #honk-container {
    margin: 2px !important;
    padding: 2px !important;
  }
}


/* ========================================
   Storage Warning Banner
   ======================================== */

.honk-storage-warning {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.honk-storage-warning button:hover {
  background: #d97706 !important;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.honk-storage-warning button:active {
  transform: translateY(0);
}

/* ======================================== */

/* ========================================
   Footer Link Styling
   Make link look like regular text
   ======================================== */

.footer-link {
  /* Remove all link styling */
  color: inherit !important;
  text-decoration: none !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  
  /* Add subtle hover effect (optional) */
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.footer-link:hover {
  opacity: 0.8; /* Very subtle darkening on hover */
}

.footer-link:visited {
  color: inherit !important;
}

.footer-link:focus {
  outline: 1px dotted currentColor; /* Accessibility - visible focus */
  outline-offset: 2px;
}

/* ======================================== */