/*
Theme Name: Connect Portal
Theme URI: https://thinkingforwordsocial.com/
Author: Thinking ForWord Social CIC
Author URI: https://thinkingforwordsocial.com/
Description: A calm, tile-based portal theme built for Connect South Ayrshire. Carries two logos, a dismissible announcement bar, a time-aware greeting, and widget-ready tiles for analytics, the assistant and shortcodes. Built and supported by Thinking ForWord Social CIC.
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: connect-portal
Tags: custom-logo, custom-menu, custom-colors, two-columns, translation-ready
*/

/* -------------------------------------------------------------
   1. Tokens
   Gradient taken from Connect's own announcement bar.
   Overridable in Appearance > Customise > Connect Portal.
------------------------------------------------------------- */
:root{
  --cp-grad-start:#E0457F;
  --cp-grad-mid:#A83C9C;
  --cp-grad-end:#4A3AC8;
  --cp-grad:linear-gradient(90deg,var(--cp-grad-start) 0%,var(--cp-grad-mid) 48%,var(--cp-grad-end) 100%);
  --cp-grad-135:linear-gradient(135deg,var(--cp-grad-start) 0%,var(--cp-grad-mid) 45%,var(--cp-grad-end) 100%);
  --cp-pp:#6C3FA6;
  --cp-ink:#22212A;
  --cp-mut:#6b6a76;
  --cp-bd:#E7E4EF;
  --cp-bg:#F5F3FA;
  --cp-ok:#2F8368;
  --cp-radius:18px;
  --cp-shadow:0 6px 18px rgba(74,46,112,.06);
}

/* -------------------------------------------------------------
   2. Base
------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--cp-bg);
  color:var(--cp-ink);
  font-family:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:var(--cp-pp)}
img{max-width:100%;height:auto}
.cp-wrap{max-width:1160px;margin:0 auto;padding:18px 18px 0;width:100%}
.cp-main{flex:1}
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important;
}
.cp-skip:focus{
  position:fixed;top:8px;left:8px;z-index:9999;background:#fff;color:var(--cp-pp);
  padding:10px 16px;border-radius:10px;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.2);
}
:focus-visible{outline:3px solid var(--cp-grad-end);outline-offset:2px}

/* -------------------------------------------------------------
   3. Announcement bar
------------------------------------------------------------- */
.cp-ann{
  background:var(--cp-grad);color:#fff;display:flex;align-items:center;justify-content:center;
  gap:14px;padding:10px 44px 10px 16px;position:relative;font-size:14px;font-weight:700;
  flex:0 0 auto;
}
.cp-ann__btn{
  background:#fff;color:var(--cp-ink);border-radius:8px;padding:7px 14px;
  font-weight:800;font-size:13px;text-decoration:none;white-space:nowrap;
}
.cp-ann__btn:hover{background:#F4F1F9}
.cp-ann__x{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#fff;
  background:none;border:none;font-size:15px;line-height:1;cursor:pointer;opacity:.85;
  padding:6px;border-radius:6px;
}
.cp-ann__x:hover{opacity:1;background:rgba(255,255,255,.16)}
@media(max-width:640px){
  .cp-ann{font-size:12.5px;gap:9px;padding-right:38px}
  .cp-ann__btn{padding:5px 10px;font-size:12px}
}

/* -------------------------------------------------------------
   4. Brand corners (Connect one side, the CIC the other)
------------------------------------------------------------- */
.cp-corner{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--cp-bd);
  border-radius:14px;padding:9px 14px;box-shadow:0 4px 14px rgba(74,46,112,.07);
  text-decoration:none;color:inherit;
}
.cp-corner__mark{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-family:Fredoka,Nunito,sans-serif;font-weight:700;color:#fff;font-size:15px;flex:0 0 auto;
  background:var(--cp-grad-135);overflow:hidden;
}
.cp-corner__mark img{width:100%;height:100%;object-fit:contain;display:block}
.cp-corner__mark--img{background:none;width:auto;height:36px;min-width:36px;border-radius:8px}
.cp-corner__mark--img img{width:auto;height:36px;max-width:150px}
.cp-corner__name{
  font-family:Fredoka,Nunito,sans-serif;font-weight:600;font-size:14px;color:var(--cp-ink);
  line-height:1.15;display:block;
}
.cp-corner__tag{font-size:10.5px;color:var(--cp-mut);display:block}
.cp-corner--partner .cp-corner__mark{background:#F2EEF9;color:var(--cp-pp);font-size:12px}
.cp-corner--partner .cp-corner__mark--img{background:none}
.cp-corner--partner .cp-corner__name{color:var(--cp-pp);font-size:13px}

/* -------------------------------------------------------------
   5. Top bar and menu
------------------------------------------------------------- */
.cp-topbar{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-bottom:12px;
}
/* The menu sits on its own row so both logos can hold the top corners.
   The support link rides on the right of this row, under the second logo. */
.cp-navrow{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
@media(max-width:620px){
  .cp-topbar{gap:9px}
  .cp-topbar .cp-corner{flex:1 1 100%}
}
.cp-nav ul{display:flex;gap:5px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.cp-nav a{
  color:var(--cp-mut);text-decoration:none;font-weight:800;font-size:12.5px;
  padding:8px 13px;border-radius:20px;background:#fff;border:1px solid var(--cp-bd);display:block;
}
.cp-nav a:hover{color:var(--cp-ink)}
.cp-nav .current-menu-item > a,
.cp-nav .current_page_item > a,
.cp-nav a[aria-current="page"]{background:var(--cp-grad);color:#fff;border-color:transparent}

/* -------------------------------------------------------------
   6. Tiles (the bento grid)
------------------------------------------------------------- */
.cp-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.cp-tile{
  background:#fff;border:1px solid var(--cp-bd);border-radius:var(--cp-radius);
  padding:18px;box-shadow:var(--cp-shadow);display:flex;flex-direction:column;min-height:150px;
}
.cp-tile-label{
  font-family:Fredoka,Nunito,sans-serif;font-weight:600;font-size:14.5px;
  color:var(--cp-pp);margin:0;
}
.cp-tile-desc{margin:6px 0 12px;font-size:12.5px;color:var(--cp-mut);line-height:1.55}
.cp-tile-body{flex:1;display:flex;flex-direction:column;min-height:0}
.cp-slot{
  flex:1;border:2px dashed #DCD5EA;border-radius:12px;display:flex;align-items:center;
  justify-content:center;color:#A9A3BC;font-size:12.5px;font-weight:700;text-align:center;padding:14px;
}
.cp-span-2{grid-column:span 2}
.cp-span-4{grid-column:1 / -1}
.cp-row-2{grid-row:span 2}
@media(max-width:980px){
  .cp-bento{grid-template-columns:repeat(2,1fr)}
  .cp-span-4{grid-column:1 / -1}
}
@media(max-width:620px){
  .cp-bento{grid-template-columns:1fr}
  .cp-span-2,.cp-span-4{grid-column:auto}
  .cp-row-2{grid-row:auto}
}

/* -------------------------------------------------------------
   7. Greeting tile
------------------------------------------------------------- */
.cp-hero{background:var(--cp-grad-135);border:none;color:#fff;justify-content:center}
.cp-hero__when{
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;opacity:.85;
}
.cp-hero__title{
  font-family:Fredoka,Nunito,sans-serif;font-weight:600;font-size:27px;
  margin:6px 0 4px;line-height:1.15;color:#fff;
}
.cp-hero__sub{margin:0;color:rgba(255,255,255,.9);font-size:13px}
.cp-hero__status{
  margin-top:12px;align-self:flex-start;background:rgba(255,255,255,.2);
  border-radius:20px;padding:5px 11px;font-size:11px;font-weight:800;
}
@media(max-width:620px){.cp-hero__title{font-size:23px}}

/* -------------------------------------------------------------
   8. Shortcode block
------------------------------------------------------------- */
.cp-code{
  background:#FAF9FC;border:1px dashed #DDD6EA;border-radius:9px;padding:10px 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--cp-pp);word-break:break-all;
}
.cp-copy{
  background:var(--cp-grad);color:#fff;border:none;border-radius:18px;padding:7px 14px;
  font-weight:800;font-size:11.5px;cursor:pointer;margin-top:9px;align-self:flex-start;
  font-family:inherit;
}
.cp-copy:hover{filter:brightness(1.06)}

/* -------------------------------------------------------------
   9. Content pages
------------------------------------------------------------- */
.cp-page{
  background:#fff;border:1px solid var(--cp-bd);border-radius:var(--cp-radius);
  padding:26px 30px;box-shadow:var(--cp-shadow);margin-bottom:18px;
}
.cp-page h1,.cp-page h2,.cp-page h3{font-family:Fredoka,Nunito,sans-serif;font-weight:600;color:var(--cp-pp)}
.cp-page h1{font-size:25px;margin-top:0}
.cp-entry + .cp-entry{margin-top:16px}
.cp-entry__title a{text-decoration:none}

/* -------------------------------------------------------------
   10. Footer
   The bottom right is deliberately left clear: that is where the
   assistant's floating chat button sits.
------------------------------------------------------------- */
.cp-footer{margin-top:16px;padding:0 18px 24px}
.cp-footer__in{
  max-width:1160px;margin:0 auto;display:flex;justify-content:flex-start;align-items:center;
  gap:12px;flex-wrap:wrap;font-size:12px;color:var(--cp-mut);
  padding-right:96px;
}
@media(max-width:620px){
  .cp-footer__in{padding-right:0;padding-bottom:74px}
}
/* Support contact, sitting under the second logo on the menu row. */
.cp-support{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:12.5px;color:var(--cp-mut);padding-right:4px;
}
.cp-support__link{
  color:var(--cp-pp);font-weight:800;text-decoration:none;
  border-bottom:2px solid transparent;
}
.cp-support__link:hover,.cp-support__link:focus{border-bottom-color:var(--cp-grad-start)}
@media(max-width:620px){.cp-support{margin-left:0;width:100%}}

/* -------------------------------------------------------------
   11. Widgets inside tiles
------------------------------------------------------------- */
.cp-tile .widget{margin:0 0 12px}
.cp-tile .widget:last-child{margin-bottom:0}
.cp-tile .widget-title{
  font-family:Fredoka,Nunito,sans-serif;font-weight:600;font-size:13px;
  color:var(--cp-ink);margin:0 0 6px;
}

/* -------------------------------------------------------------
   12. Reduced motion
------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}